Beautiful social media buttons using CSS3 with cool animation

Beautiful social buttons will make your design look attractive and if you have good animation with beautiful social buttons it will increase chances to share your website on social sites. Today I am going to create beautiful social buttons with cool animations using css. I will not use any JavaScript or jQuery here and its pure CSS, HTML animation. Take a quick look at these demos and try all these with modern browsers like Chrome, Firefox and Safari, sure you will love these effects.

DEMO:
Here is demo of CSS social media buttons with cool animation.

Download Code

I am using fontawesome for social icons(you can use images as well if you want).

HTML5 Code:
CSS3 works with HTML5 doctype this informs the browser to render code in advanced way, include the CSS code within the tag HEAD.

<!doctype html>

Page Title
//Include style here
<div class="container">
<h1>Effects with rotate</h1>
<div class="row "></div>
</div>
<div class="social-iconbox-icon fb"></div>
&nbsp;
<div class="clearfix"></div>
<div class="social-wrap text-center pull-left"></div>
<div class="social-wrap text-center pull-left"></div>
<div class="social-wrap text-center pull-left"></div>

CSS code:
Here is css used in for these animations:

body {
background-color: #e5e7e7;
}

.social-wrap{
position:relative;
margin:10px 20px;
}
.social-wrap i {
line-height: 90px;
}

.social-iconbox-link
{
color: #31c5c7;
display:inline;

}

.social-iconbox-link.rotate{
transform: rotate(0deg);
transition:0.5s;
}

.social-iconbox-icon {
opacity: 1;
transform: scale(1);
text-align:center;
color : #31c5c7;
border-radius: 50%;
color: #fff !important;
font-size: 40px;
height: 90px;
line-height: 90px;
width: 90px;
background-color: #31c5c7;

}
.social-iconbox-icon::after {
border-radius: 50%;
box-shadow: 0 0 0 3px #444;
content: "";
display: block;
height: 100%;
left: 0px;
opacity: 0;
padding: 5px;
position: absolute;
top: 0px;
transform: scale(0.8);
transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
width: 100%;
}
a.social-iconbox-link:hover .social-iconbox-icon::after {
opacity: 1;
transform: scale(1.15);

}
a.social-iconbox-link.rotate:hover {
transform:rotate(360deg);

}
.w-iconbox-icon {
font-size: 40px;
}
a.social-iconbox-link:hover .social-iconbox-icon{
background-color: #444;

}
a.social-iconbox-link:hover span {
bottom: 106px;
opacity: 1;
visibility: visible;
}
.social-iconbox-link span:before {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #ccc;
bottom: -6px;
content: "";
height: 0;
left: 47%;
position: absolute;
width: 0;
}

.social-iconbox-link span {
background: #fff none repeat scroll 0 0;
border-radius: 2px;
bottom: 0;
color: #666;
font-family: sans-serif;
font-size: 14px;
left: -25px;
opacity: 0;
padding: 5px 7px;
position: absolute;
right: -25px;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
visibility: hidden;
z-index: -1;
font-weight: bold;
border: 1px solid #ccc;
}

.margin-right-20
{
margin-right:20px;
}
.margin-top-40
{
margin-top:40px;
}
.wd-90 {
width: 9.66% !important;
}

.fb{
background:#365899;
}

.twitter{
background:#3B94D9;
}
.google{
background:#db4437;
}

.git {
background:#444;
}

Add a Comment

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