Hi Friends, In this blog you’ll figure out how to make Social Media Buttons with the help of HTML and CSS.

The Social Media Links and Buttons let your site guests and content watchers to effortlessly impart your website to their favored online media associations and organizations. Adding these catches or connections to your website or Design permits you to grow the span of your website or Design to new crowds and make new guests back to your site.

In this tutorial (Social Media Buttons), on the site pages, there are four distinctive online media networks catches — Facebook, Instagram, Twitter and LinkedIn with their symbol or logo and when you click on a specific icon, the icon is clicked with animated perception which makes these Social media icons more appealing.

You can watch a full video instructional exercise on this program (Animated Social Media Buttons) at the end of the article.

I will suggest you to understand below given HTML and CSS code and practice by your own.

HTML Code

Create a Main with Wrap class.

Inside wrap class create a button container and give it a class (here i have used “btn” class)

After creating btn div, insert social media icon and its name in span.

Below is HTML file Code.

<div class="wrap">
	<label class="switch">
		<input type="checkbox" onclick="change()">
		<span class="slider round">
			<h1 id="light-text">OFF</h1>
		</span>
	</label>
</div> 

CSS Code

Below is CSS file Code. 

body {
	height: 100vh;
	width: 100vw;
	display: flex;
	flex-direction: column;
	text-align: center;
	background: #ffb830;
	padding: 0;
	margin: 0;
	color: #fff;
}
.wrap {
	margin: auto;
}
.switch {
	position: relative;
	display: inline-block;
	width: 250px;
	height: 80px;
}
.switch input {
	visibility: hidden;
}
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #ffb830;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	box-shadow: -5px -5px 8px rgba(255,255,255,0.2),
				5px 5px 8px rgba(0,0,0,0.2);
}
.slider:before {
	position: absolute;
	content: "";
	height: 65px;
	width: 65px;
	background: #fff;
	left: 4px;
	bottom: 4px;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}
input:checked + .slider {
	background: #ff2442;
}
input:checked + .slider:before {
	transform: translateX(177px);
}
.slider.round {
	border-radius: 50px;
}
.slider.round:before {
	border-radius: 50%;
}
.lights-on {
	background: #ff2442;
	width: 100vw;
	height: 100vh;
}

Below is JS file Code. 

function change() {
	var x = document.getElementById("light-text");
	if (x.innerHTML === "OFF") {
		x.innerHTML = "ON";
	} else {
		x.innerHTML = "OFF";
	}
	var element = document.body;
	element.classList.toggle("lights-on");
}