Social Media Buttons

social media buttons

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">
		<div class="btn">
			<div class="icon"><i class="fa fa-facebook-f"></i></div>
			<span>Facebook</span>
		</div>
		<div class="btn">
			<div class="icon"><i class="fa fa-instagram"></i></div>
			<span>Instagram</span>
		</div>
		<div class="btn">
			<div class="icon"><i class="fa fa-twitter"></i></div>
			<span>Twitter</span>
		</div>
		<div class="btn">
			<div class="icon"><i class="fa fa-linkedin"></i></div>
			<span>LinkedIn</span>
		</div>
	</div>
 

CSS Code

Create a .css file and link it with .html 

Use the display grid style for aligning all buttons.

Inline social icon and social media name.

Give its height and width as per requirement.

Give a border radius for circular look.

Use overflow hidden .btn class to hide its name until we required it while hovering on button.

Now, use transition effect on .btn and icon class.

Below is CSS file Code. 

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

html,body {
background: rgb(214,214,214);
display: grid;
width: 100%;
height: 100%;
place-items: center;
}
.wrap .btn {
display: inline-block;
height: 70px;
width: 70px;
margin: 0 25px;
text-align: center;
border-radius: 50px;
overflow: hidden;
float: left;
box-shadow: -7px -7px 20px 0 rgba(255, 255, 255, 0.9),
7px 7px 20px 0 rgba(0, 0, 0, 0.3);
transition: all 0.4s ease-out;
cursor: pointer;
}
.btn .icon {
display: inline-block;
height: 70px;
width: 70px;
background: #333;
border-radius: 50px;
float: left;
box-shadow: inset -7px -7px 20px 0;
}
.btn span {
font-size: 24px;
font-weight: 600px;
line-height: 70px;
}
.btn .icon i {
font-size: 30px;
line-height: 70px;
color: #fff;
transition: all 0.4s ease-out;
}
.btn:hover {
width: 220px;
transition: all 0.4s ease-out;
}
.btn:first-child:hover .icon {
background: #3b5998;
box-shadow: inset 1px 0 20px 0;
}
.btn:nth-child(2):hover .icon {
background: #dd2a7b;
box-shadow: inset 1px 0 20px 0;
}
.btn:nth-child(3):hover .icon {
background: #00acee;
box-shadow: inset 1px 0 20px 0;
}
.btn:last-child:hover .icon {
background: #0e76a8;
box-shadow: inset 1px 0 20px 0;
}
.btn:first-child:hover {
color: #3b5998;
}
.btn:nth-child(2):hover {
color: #dd2a7b;
}
.btn:nth-child(3):hover {
color: #00acee;
}
.btn:last-child:hover {
color: #0e76a8;
} 

Watch Below Video for Detail Understanding

Social Media Buttons Using HTML and CSS | AcodeAkash
social media button

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.

Course Provider: Person

Course Provider Name: Akash Kumar

Leave a Reply

Your email address will not be published. Required fields are marked *