Pretty posts

social media button
View Demo Download Sources

In this article, we will create creative social media button styles by CSS3, HTML5 and fontawesome icon that will enhance your web design experience. 

Now at this moment, social media is very popular platform. Every blogger want to display social media buttons in their site to promote their business. Our created social media buttons support all of the modern browsers. So you don't need to research anything.

For this artcle, we will use font-awesome icon.

HTML: See following html code. At the end of post, you will find full html code.
<!-- Facebook -->
<a class="btn_a btn_a_large facebook" href="#">
   <span>
     <i class="fa fa-facebook"></i>
     <span>1500+ Followers</span>
     <p>Facebook</p>
   </span>
</a>
Maybe, you are thinking that i have added simple code. Yes it's very simple. You just need to replace social media name and # value with your social profile link . Example: If you want to add google-plus just replace facebook to google-plus name. Now at this moment support google-plus, twitter, facebook, pinterest, youtube, instagram social media buttons. We used all element in <a>...</a> link attributes so that all are clickable. <i class="fa fa-facebook"></i> use for display facebook icon. 1500+ Followers and Facebook text you can change as your wish.

CSS: See following css code. At the end of post you will see full css code.
.btn_a {
width:210px;
overflow:hidden;
display:inline-block;
white-space:nowrap;
vertical-align:baseline;
cursor:pointer;
background:#222;
position:relative;
-moz-transition:all .4s ease;
-webkit-transition:all .4s ease;
transition:all .4s ease;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
margin:0 10px 10px 0;
}

.btn_a:hover {
-webkit-opacity:0.8;
-moz-opacity:0.8;
opacity:0.8;
}
We set width:210px; to fix it with layout. By changing this value, you can fix it with your website layouts. display: inline-block; use for creating two column. Between two social media box space set to 10px on right and bottom by margin:0 10px 10px 0; css code. When you take mouse on social media box, you will see small light effect, it was created by opacity: 0.8;
.btn_a span > span {
font-family:verdana;
font-size:13px;
overflow:hidden;
color:#aaa;
position:relative;
top:-3px;
margin:0;
}

.btn_a p {
font-size:22px;
font-family:verdana;
margin:-30px 0 0 42px;
} 
font family verdana use all of our social media box and set social count text font size 13px and color #aaa . For big social media name, we set font size 22px and color white(#fff) by following code
.btn_a.facebook span > span,.btn_a.twitter span > span,.btn_a.google-plus span > span,.btn_a.pinterest span > span,.btn_a.instagram span > span,.btn_a.youtube span > span {
color:#fff;
}
In our demo, you will see a ribbon button. It was created by below CSS3 code.
.btn_a span:before {
width:5px;
position:absolute;
color:red;
content:"";
border:6px solid #eee;
right:5px;
top:0;
}

.btn_a span:after {
content:"";
border-bottom:8px solid transparent;
border-left:8px solid #eee;
border-right:9px solid #eee;
position:absolute;
top:12px;
right:5px;
}
In .btn_a span:before class set width 5px and border 6px to create a ribbon box. After creating box, move it on top right section. In top right, we set space 5px. See below image
Creative Social Media Button Styles
In .btn_a span:after used to creating a triangle. After creating this, move it on top right so that it can adjust with ribbon box. See below image
Flat Social Media Button Styles
Let's see our created full html and css code.

Full HTML:
<!-- Facebook -->
<a class="btn_a btn_a_large facebook" href="#">
    <span>
 <i class="fa fa-facebook"></i>
 <span>1500+ Followers</span>
 <p>Facebook</p>
    </span>
</a>
    
<!-- Twitter -->
<a class="btn_a btn_a_large twitter" href="#">
    <span>
 <i class="fa fa-twitter"></i>
 <span>2500+ Followers</span>
 <p>Twitter</p>
    </span>
</a>
    
<!-- Google Plus -->
<a class="btn_a btn_a_large google-plus" href="#">
    <span>
 <i class="fa fa-google-plus"></i>
 <span>9.5M Followers</span>
 <p>Google+</p>
    </span>
</a>
    
<!-- Pinterest -->
<a class="btn_a btn_a_large pinterest" href="#">
    <span>
 <i class="fa fa-pinterest"></i>
 <span>2,100 Followers</span>
 <p>Pinterest</p>
    </span>
</a>

<!-- Youtube -->
<a class="btn_a btn_a_large youtube" href="#">
    <span>
 <i class="fa fa-youtube"></i>
 <span>5000 Subscribe</span>
 <p>Youtube</p>
    </span>
</a> 

<!-- Instagram -->
<a class="btn_a btn_a_large instagram" href="#">
    <span>
 <i class="fa fa-instagram"></i>
 <span>3,524 Followers</span>
 <p>Instagram</p>
    </span>
</a>

Full CSS:
/*
* Social Media Button
*/
.btn_a {
width:210px;
overflow:hidden;
display:inline-block;
white-space:nowrap;
vertical-align:baseline;
cursor:pointer;
background:#222;
position:relative;
-moz-transition:all .4s ease;
-webkit-transition:all .4s ease;
transition:all .4s ease;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
margin:0 10px 10px 0;
}

.btn_a:hover {
-webkit-opacity:0.8;
-moz-opacity:0.8;
opacity:0.8;
}

.btn_a span {
display:inline-block;
margin:15px;
}

.btn_a i {
width:30px;
height:30px;
background:rgba(255,255,0,0.5);
line-height:30px;
text-align:center;
border-radius:50%;
position:relative;
top:5px;
margin:0 10px 20px 0;
}

.btn_a span:before {
width:5px;
position:absolute;
color:red;
content:"";
border:6px solid #eee;
right:5px;
top:0;
}

.btn_a span:after {
content:"";
border-bottom:8px solid transparent;
border-left:8px solid #eee;
border-right:9px solid #eee;
position:absolute;
top:12px;
right:5px;
}

.btn_a span > span:before,.btn_a span > span:after {
content:none;
}

.btn_a span > span {
font-family:verdana;
font-size:13px;
overflow:hidden;
color:#aaa;
position:relative;
top:-3px;
margin:0;
}

.btn_a p {
font-size:22px;
font-family:verdana;
margin:-30px 0 0 42px;
}

.btn_a.facebook {
background:#3b5998;
}

.btn_a.facebook i {
background:#fff;
color:#3b5998;
}

.btn_a.twitter {
background:#00aced;
}

.btn_a.twitter i {
background:#fff;
color:#00aced;
}

.btn_a.google-plus {
background:#dd4b39;
}

.btn_a.google-plus i {
background:#fff;
color:#dd4b39;
}

.btn_a.pinterest {
background:#cb2027;
}

.btn_a.pinterest i {
background:#fff;
color:#cb2027;
}

.btn_a.instagram {
background:#517fa4;
}

.btn_a.instagram i {
background:#fff;
color:#517fa4;
}

.btn_a.youtube {
background:#b00;
}

.btn_a.youtube i {
background:#fff;
color:#b00;
}

.btn_a.facebook span > span,.btn_a.twitter span > span,.btn_a.google-plus span > span,.btn_a.pinterest span > span,.btn_a.instagram span > span,.btn_a.youtube span > span {
color:#fff;
}


View Project on Github