Social Media Icon Button With 100% Pure Css

Social Media Icon Button With 100% Pure Css




Now days its very important to stay connected with your social media and also associate your social media with your blog or website which is very easy to install the only thing you should care about is the loading time of these plugins but there is no need to worry for it.

so i'm going to share something interesting with you guys How to make social media icons with 100% pure css no JavaScript or jquery etc..
i hope you guys like this ,share & comment below :)

note:i'm using font-awesome icons which i get from https://fortawesome.github.io/Font-Awesome

First you need to add this inside head tags

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

and then add this html codes to inside the body tags

<div class="button-box">

  <a href="#">
    <div class="button-border">
      <div class="button">
          <i class="fa fa-facebook"></i>
      </div>
    </div>
  </a>


<a href="#">
  <div class="button-border">
      <div class="button">
          <i class="fa fa-twitter"></i>
      </div>
  </div>
</a>

<a href="#">
  <div class="button-border">
    <div class="button">
        <i class="fa fa-google-plus"></i>
    </div>
  </div>
</a>
<a href="#">
  <div class="button-border">
    <div class="button">
        <i class="fa fa-reddit"></i>
    </div>
  </div>
</a>
<a href="#">
  <div class="button-border">
    <div class="button">
        <i class="fa fa-flickr"></i>
    </div>
  </div>
</a>
<a href="#">
  <div class="button-border">
      <div class="button">
          <i class="fa fa-android"></i>
      </div>
  </div>
</a>

<a href="#">
  <div class="button-border">
    <div class="button">
        <i class="fa fa-youtube"></i>
    </div>
  </div>
</a>
<a href="#">
  <div class="button-border">
    <div class="button">
        <i class="fa fa-linkedin"></i>
    </div>
  </div>
</a>
<a href="#">
  <div class="button-border">
    <div class="button">
        <i class="fa fa-tumblr-square"></i>
    </div>
  </div>
</a>
<a href="#">
  <div class="button-border">
    <div class="button">
        <i class="fa fa-vk"></i>
    </div>
  </div>
</a>
<a href="#">
  <div class="button-border">
    <div class="button">
        <i class="fa fa-whatsapp"></i>
    </div>
  </div>
</a>
<a href="#">
  <div class="button-border">
    <div class="button">
      <i class="fa fa-stack-overflow"></i>
    </div>
  </div>
</a>
  </div>

And now add these css style


/*------button box-----------*/
    .button-box{
      width: 310px;
      margin-top: 170px;
      overflow: auto;#0084b4.

    }
/*------button box a decoration-----------*/
    .button-box a{
      text-decoration: none;
      color: #333;
    }
/*------button section-----------*/
        .button{
          width: 80px;
          height: 80px;
          background: white;
          border: 8px solid #636262;
          border-style: inset;
          border-top: transparent;
          border-left: transparent;
          border-radius: 4px;
          text-align: center;
          margin: 1px 0px;
        }
/*------font-awsome icon -----------*/
        .button .fa{
          background: rgba(204, 204, 204, 0.13);
          font-size: 40px;
          margin: 6px auto;
          border-radius: 10px;
          width: 60px;
          height: 60px;
          line-height: 60px;
        }
        }
        .button .fa {
          color: black;
        }
/*------font-awesome icon hover state color-----------*/
        .button:hover > .fa{
          background: rgba(204, 204, 204, 0.27);
        }
        .button:hover > .fa-facebook{
          color: #3b5998;
        }
        .button:hover > .fa-twitter{
          color: #55ACEE;
        }
        .button:hover > .fa-google-plus{
          color: #d34836;
        }
        .button:hover > .fa-reddit{
          color:  #cee3f8;
        }
        .button:hover > .fa-flickr{
          color: #0063DC;
        }
        .button:hover > .fa-android{
          color: #89c400;
        }
        .button:hover > .fa-youtube{
          color: #FE3331;
        }
        .button:hover > .fa-linkedin{
          color: #03659A;
        }
        .button:hover > .fa-tumblr-square{
          color: #86B9D7;
        }

        .button:hover > .fa-vk{
          color: #335795;
        }
        .button:hover > .fa-whatsapp{
          color: #28C427;
        }

        .button:hover > .fa-stack-overflow{
          color: #ff5700;
          }
/*------button inner border section-----------*/
        .button-border{
          border-radius: 4px 5px 7px 4px;
          border: 4px solid #333;
          width: 83px;
          height: 83px;
          border-top: transparent;
          border-left: transparent;
          position: relative;
          cursor: pointer;
          float: left;
          margin: 10px;
        }
/*------button inner border active state-----------*/
        .button-border:active{
          border-radius: 6px;
          border: 4px solid #333;
          width: 83px;
          border-top: 1px solid #333;
          border-left: 1px solid #333;
        }
        .button-border:active > .button{
          width: 80px;
          height: 80px;
          border: 2px solid #636262;
          border-top: transparent;
          border-left: transparent;
          border-style: inset;
          margin: 1px 0px;
        }

Comments