20+ Social Media Buttons in pure CSS a2zwebhelp

Let's create fast loading Social Media in pure CSS and fontawesome 4.7.0. Beautiful and eye catchy ready to use social media buttons, just copy and paste.

Before srating please include font-awesome library in your HTML page.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Social Media Square Buttons

HTML Code

<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-google"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-pinterest"></a>
<a href="#" class="fa fa-snapchat-ghost"></a>
<a href="#" class="fa fa-skype"></a>
<a href="#" class="fa fa-android"></a>
<a href="#" class="fa fa-dribbble"></a>
<a href="#" class="fa fa-vimeo"></a>
<a href="#" class="fa fa-tumblr"></a>
<a href="#" class="fa fa-vine"></a>
<a href="#" class="fa fa-foursquare"></a>
<a href="#" class="fa fa-stumbleupon"></a>
<a href="#" class="fa fa-flickr"></a>
<a href="#" class="fa fa-yahoo"></a>
<a href="#" class="fa fa-reddit"></a>
<a href="#" class="fa fa-rss"></a>
<a href="#" class="fa fa-stack-overflow"></a>
<a href="#" class="fa fa-openid"></a>
<a href="#" class="fa fa-digg"></a>

CSS Code

.fa {
  padding: 20px;
  font-size: 30px;
  width: 70px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}
.fa:hover {
    opacity: 0.7;
}
.fa-facebook {
  background: #3B5998;
  color: #FFFFFF;
}
.fa-twitter {
  background: #55ACEE;
  color: #FFFFFF;
}
.fa-google {
  background: #dd4b39;
  color: #FFFFFF;
}
.fa-linkedin {
  background: #007bb5;
  color: #FFFFFF;
}
.fa-youtube {
  background: #bb0000;
  color: #FFFFFF;
}
.fa-instagram {
  background: #125688;
  color: #FFFFFF;
}
.fa-pinterest {
  background: #cb2027;
  color: #FFFFFF;
}
.fa-snapchat-ghost {
  background: #fffc00;
  color: #FFFFFF;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.fa-skype {
  background: #00aff0;
  color: #FFFFFF;
}
.fa-android {
  background: #a4c639;
  color: #FFFFFF;
}
.fa-dribbble {
  background: #ea4c89;
  color: #FFFFFF;
}
.fa-vimeo {
  background: #45bbff;
  color: #FFFFFF;
}
.fa-tumblr {
  background: #2c4762;
  color: #FFFFFF;
}
.fa-vine {
  background: #00b489;
  color: #FFFFFF;
}
.fa-foursquare {
  background: #45bbff;
  color: #FFFFFF;
}
.fa-stumbleupon {
  background: #eb4924;
  color: #FFFFFF;
}
.fa-flickr {
  background: #f40083;
  color: #FFFFFF;
}
.fa-yahoo {
  background: #430297;
  color: #FFFFFF;
}
.fa-soundcloud {
  background: #ff5500;
  color: #FFFFFF;
}
.fa-reddit {
  background: #ff5700;
  color: #FFFFFF;
}
.fa-rss {
  background: #ff6600;
  color: #FFFFFF;
}
.fa-stack-overflow {
  background: #ffa500;
  color: #FFFFFF;
}
.fa-openid {
  background: #f68423;
  color: #FFFFFF;
}
.fa-digg {
  background: #466ca3;
  color: #FFFFFF;
}

Social Media Circle Buttons

HTML Code

<a href="#" class="fa fa-facebook circel"></a>
<a href="#" class="fa fa-twitter circel"></a>
<a href="#" class="fa fa-google circel"></a>
<a href="#" class="fa fa-linkedin circel"></a>
<a href="#" class="fa fa-youtube circel"></a>
<a href="#" class="fa fa-instagram circel"></a>
<a href="#" class="fa fa-pinterest circel"></a>
<a href="#" class="fa fa-snapchat-ghost circel"></a>
<a href="#" class="fa fa-skype circel"></a>
<a href="#" class="fa fa-android circel"></a>
<a href="#" class="fa fa-dribbble circel"></a>
<a href="#" class="fa fa-vimeo circel"></a>
<a href="#" class="fa fa-tumblr circel"></a>
<a href="#" class="fa fa-vine circel"></a>
<a href="#" class="fa fa-foursquare circel"></a>
<a href="#" class="fa fa-stumbleupon circel"></a>
<a href="#" class="fa fa-flickr circel"></a>
<a href="#" class="fa fa-yahoo circel"></a>
<a href="#" class="fa fa-reddit circel"></a>
<a href="#" class="fa fa-rss circel"></a>
<a href="#" class="fa fa-stack-overflow circel"></a>
<a href="#" class="fa fa-openid circel"></a>
<a href="#" class="fa fa-digg circel"></a>

CSS Code

.circel{border-radius:50%;}
.fa {
  padding: 20px;
  font-size: 30px;
  width: 70px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}
.fa:hover {
    opacity: 0.7;
}
.fa-facebook {
  background: #3B5998;
  color: #FFFFFF;
}
.fa-twitter {
  background: #55ACEE;
  color: #FFFFFF;
}
.fa-google {
  background: #dd4b39;
  color: #FFFFFF;
}
.fa-linkedin {
  background: #007bb5;
  color: #FFFFFF;
}
.fa-youtube {
  background: #bb0000;
  color: #FFFFFF;
}
.fa-instagram {
  background: #125688;
  color: #FFFFFF;
}
.fa-pinterest {
  background: #cb2027;
  color: #FFFFFF;
}
.fa-snapchat-ghost {
  background: #fffc00;
  color: #FFFFFF;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.fa-skype {
  background: #00aff0;
  color: #FFFFFF;
}
.fa-android {
  background: #a4c639;
  color: #FFFFFF;
}
.fa-dribbble {
  background: #ea4c89;
  color: #FFFFFF;
}
.fa-vimeo {
  background: #45bbff;
  color: #FFFFFF;
}
.fa-tumblr {
  background: #2c4762;
  color: #FFFFFF;
}
.fa-vine {
  background: #00b489;
  color: #FFFFFF;
}
.fa-foursquare {
  background: #45bbff;
  color: #FFFFFF;
}
.fa-stumbleupon {
  background: #eb4924;
  color: #FFFFFF;
}
.fa-flickr {
  background: #f40083;
  color: #FFFFFF;
}
.fa-yahoo {
  background: #430297;
  color: #FFFFFF;
}
.fa-soundcloud {
  background: #ff5500;
  color: #FFFFFF;
}
.fa-reddit {
  background: #ff5700;
  color: #FFFFFF;
}
.fa-rss {
  background: #ff6600;
  color: #FFFFFF;
}
.fa-stack-overflow {
  background: #ffa500;
  color: #FFFFFF;
}
.fa-openid {
  background: #f68423;
  color: #FFFFFF;
}
.fa-digg {
  background: #466ca3;
  color: #FFFFFF;
}

Social Media Rounded Buttons

HTML Code

<a href="#" class="fa fa-facebook round"></a>
<a href="#" class="fa fa-twitter round"></a>
<a href="#" class="fa fa-google round"></a>
<a href="#" class="fa fa-linkedin round"></a>
<a href="#" class="fa fa-youtube round"></a>
<a href="#" class="fa fa-instagram round"></a>
<a href="#" class="fa fa-pinterest round"></a>
<a href="#" class="fa fa-snapchat-ghost round"></a>
<a href="#" class="fa fa-skype round"></a>
<a href="#" class="fa fa-android round"></a>
<a href="#" class="fa fa-dribbble round"></a>
<a href="#" class="fa fa-vimeo round"></a>
<a href="#" class="fa fa-tumblr round"></a>
<a href="#" class="fa fa-vine round"></a>
<a href="#" class="fa fa-foursquare round"></a>
<a href="#" class="fa fa-stumbleupon round"></a>
<a href="#" class="fa fa-flickr round"></a>
<a href="#" class="fa fa-yahoo round"></a>
<a href="#" class="fa fa-reddit round"></a>
<a href="#" class="fa fa-rss round"></a>
<a href="#" class="fa fa-stack-overflow round"></a>
<a href="#" class="fa fa-openid round"></a>
<a href="#" class="fa fa-digg round"></a>

CSS Code

.round{border-radius:15px;}
.fa {
  padding: 20px;
  font-size: 30px;
  width: 70px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}
.fa:hover {
    opacity: 0.7;
}
.fa-facebook {
  background: #3B5998;
  color: #FFFFFF;
}
.fa-twitter {
  background: #55ACEE;
  color: #FFFFFF;
}
.fa-google {
  background: #dd4b39;
  color: #FFFFFF;
}
.fa-linkedin {
  background: #007bb5;
  color: #FFFFFF;
}
.fa-youtube {
  background: #bb0000;
  color: #FFFFFF;
}
.fa-instagram {
  background: #125688;
  color: #FFFFFF;
}
.fa-pinterest {
  background: #cb2027;
  color: #FFFFFF;
}
.fa-snapchat-ghost {
  background: #fffc00;
  color: #FFFFFF;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.fa-skype {
  background: #00aff0;
  color: #FFFFFF;
}
.fa-android {
  background: #a4c639;
  color: #FFFFFF;
}
.fa-dribbble {
  background: #ea4c89;
  color: #FFFFFF;
}
.fa-vimeo {
  background: #45bbff;
  color: #FFFFFF;
}
.fa-tumblr {
  background: #2c4762;
  color: #FFFFFF;
}
.fa-vine {
  background: #00b489;
  color: #FFFFFF;
}
.fa-foursquare {
  background: #45bbff;
  color: #FFFFFF;
}
.fa-stumbleupon {
  background: #eb4924;
  color: #FFFFFF;
}
.fa-flickr {
  background: #f40083;
  color: #FFFFFF;
}
.fa-yahoo {
  background: #430297;
  color: #FFFFFF;
}
.fa-soundcloud {
  background: #ff5500;
  color: #FFFFFF;
}
.fa-reddit {
  background: #ff5700;
  color: #FFFFFF;
}
.fa-rss {
  background: #ff6600;
  color: #FFFFFF;
}
.fa-stack-overflow {
  background: #ffa500;
  color: #FFFFFF;
}
.fa-openid {
  background: #f68423;
  color: #FFFFFF;
}
.fa-digg {
  background: #466ca3;
  color: #FFFFFF;
}

20+ Social Media Buttons in pure CSS

Social Media Square Buttons

HTML Code

CSS Code

Social Media Circle Buttons

HTML Code

CSS Code

Social Media Rounded Buttons

HTML Code

CSS Code

Subscribe