January 29, 2022

Social buttons for bootstrap

<ul class="social-link">
       <li><a href="" class="facebook"><i class="fa fa-facebook"></i></a></li>
       <li><a href="" class="twitter"><i class="fa fa-twitter"></i></a></li>
       <li><a href="" class="xing"><i class="fa fa-xing"></i></a></li>
       <li><a href="" class="instagram"><i class="fa fa-instagram"></i></a></li>
       <li><a href="" class="vimo"><i class="fa fa-vimeo"></i></a></li>
   </ul>

 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   <style>
      ul.social-link{list-style-type:none}
      ul.social-link li{display:inline-block}
      ul.social-link li a{border:1px solid #7c7c7c;color:#0f0f0f;display:block;font-size:16px;height:38px;line-height:38px;text-align:center;width:38px;border-radius:4px;position:relative;margin-right:2px;z-index:1;padding:0}
      ul.social-link li a.facebook:after{background:#3b5998}
      ul.social-link li a.twitter:after{background:#00aced}
      ul.social-link li a.xing:after{background:#80c71a}
      ul.social-link li a.instagram:after{background:#f09433;background:-moz-linear-gradient(45deg,#f09433 0,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);background:-webkit-linear-gradient(45deg,#f09433 0,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);background:linear-gradient(45deg,#f09433 0,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)}
      ul.social-link li a.vimo:after{background:#4ebbff}
      ul.social-link li a:after{position:absolute;content:'';width:100%;height:100%;left:0;top:0;background:#f7c51e;transition:.4s;border-radius:4px;opacity:0;-moz-transform:scale(1.3);-ms-transform:scale(1.3);-o-transform:scale(1.3);-webkit-transform:scale(1.3);transform:scale(1.3);z-index:-1}
      ul.social-link li a:hover:after{-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);opacity:1}
      ul.social-link li a:hover{border-color:transparent;color:#fff}ul.top_social{margin:0 15px 0 20px}
   </style>

 

Leave a Reply

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