Using social networks on websites improves the SEO ranking of websites. For websites that have a dark theme, it is better to use social buttons that fit the theme of your website. In this code, we have a number of social buttons with the help of which we can make the website more beautiful. Each of these buttons has a border and displays an animated hover mode. The first finds a diagonal background. In the latter, two diagonal lines cross in the background. In the third, the background of the button is striped, and in the last, it has a slide with a yellow background according to the color of its border.


HTML
<!-- This script got from www.devanswer.com  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container-body">
  <div class="container"> 
    <!-- Example row of columns -->
    <div class="row">
      <div class="col-md-12 text-center">
        <h2>Victoria</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-md-3 col-sm-3 col-xs-6"> 
        <a href="#" class="btn btn-sm animated-button victoria-one">
          <span class="pad"> 
            Facebook 
          </span> 
          <i class="fa fa-facebook"></i>
        </a> 
      </div>
      <div class="col-md-3 col-sm-3 col-xs-6"> 
        <a href="#" class="btn btn-sm animated-button victoria-two">
          <span class="pad"> 
            Twitter 
          </span> 
          <i class="fa fa-twitter"></i>
        </a> 
      </div>
      <div class="col-md-3 col-sm-3 col-xs-6"> 
        <a href="#" class="btn btn-sm animated-button victoria-three">
          <span class="pad"> 
            Google 
          </span> 
          <i class="fa fa-google"></i>
        </a> 
      </div>
      <div class="col-md-3 col-sm-3 col-xs-6"> 
        <a href="#" class="btn btn-sm animated-button victoria-four">
          <span class="pad"> 
            Linkedin 
          </span> 
          <i class="fa fa-linkedin"></i>
        </a> 
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 text-center">
        <h2 class="mrng-60-top">Sandy</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-md-3 col-sm-3 col-xs-6"> 
        <a href="#" class="btn btn-sm animated-button sandy-one">
          <span class="pad"> 
            Facebook 
          </span> 
          <i class="fa fa-facebook"></i>
        </a> 
      </div>
      <div class="col-md-3 col-sm-3 col-xs-6"> 
        <a href="#" class="btn btn-sm animated-button sandy-two">
          <span class="pad"> 
            Twitter 
          </span> 
          <i class="fa fa-twitter"></i>
        </a> 
      </div>
      <div class="col-md-3 col-sm-3 col-xs-6"> 
        <a href="#" class="btn btn-sm animated-button sandy-three">
          <span class="pad"> 
            Google 
          </span> 
          <i class="fa fa-google"></i>
        </a> 
      </div>
      <div class="col-md-3 col-sm-3 col-xs-6"> 
        <a href="#" class="btn btn-sm animated-button sandy-four">
          <span class="pad"> 
            Linkedin 
          </span> 
          <i class="fa fa-linkedin"></i>
        </a> 
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 text-center">
        <h2 class="mrng-60-top">Gibson</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-md-3 col-sm-3 col-xs-6"> 
        <a href="#" class="btn btn-sm animated-button gibson-one">
          <span class="pad"> 
            Facebook 
          </span> 
          <i class="fa fa-facebook"></i>
        </a> 
      </div>
      <div class="col-md-3 col-sm-3 col-xs-6"> 
        <a href="#" class="btn btn-sm animated-button gibson-two">
          <span class="pad"> 
            Twitter 
          </span> 
          <i class="fa fa-twitter"></i>
        </a> 
      </div>
      <div class="col-md-3 col-sm-3 col-xs-6"> 
        <a href="#" class="btn btn-sm animated-button gibson-three">
          <span class="pad"> 
            Google 
          </span> 
          <i class="fa fa-google"></i>
        </a> 
      </div>
      <div class="col-md-3 col-sm-3 col-xs-6"> 
        <a href="#" class="btn btn-sm animated-button gibson-four">
          <span class="pad"> 
            Linkedin 
          </span> 
          <i class="fa fa-linkedin"></i>
        </a> 
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 text-center">
        <h2 class="mrng-60-top">Thar</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-md-3 col-sm-3 col-xs-6"> 
        <a href="#" class="btn btn-sm animated-button thar-one">
          <span class="pad"> 
            Facebook 
          </span> 
          <i class="fa fa-facebook"></i>
        </a> 
      </div>
      <div class="col-md-3 col-sm-3 col-xs-6"> 
        <a href="#" class="btn btn-sm animated-button thar-two">
          <span class="pad"> 
            Twitter 
          </span> 
          <i class="fa fa-twitter"></i>
        </a> 
      </div>
      <div class="col-md-3 col-sm-3 col-xs-6"> 
        <a href="#" class="btn btn-sm animated-button thar-three">
          <span class="pad"> 
            Google 
          </span> 
          <i class="fa fa-google"></i>
        </a> 
      </div>
      <div class="col-md-3 col-sm-3 col-xs-6"> 
        <a href="#" class="btn btn-sm animated-button thar-four">
          <span class="pad"> 
            Linkedin 
          </span> 
          <i class="fa fa-linkedin"></i>
        </a> 
      </div>
    </div>
  </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com ">Developers Answer</a></div>
                        

CSS
.container-body {
  max-width: 100%;
  overflow: hidden;
  padding: 15px;
}
body {
  font-family: 'Lato', sans-serif;
  background: #353535!important;
  color: #FFF;
}
.jumbotron h1 {
  color: #353535;
}
footer {
  margin-bottom: 0 !important;
  margin-top: 80px;
}
footer p {
  margin: 0;
  padding: 0;
}
span.icon {
  margin: 0 5px;
  color: #D64541;
}
h2 {
  color: #BDC3C7;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.container .row:nth-child(2) i {
  color: #d24d57;
}
.container .row:nth-child(4) i {
  color: #aea8d3;
}
.container .row:nth-child(6) i {
  color: #65b37a;
}
.container .row:nth-child(8) i {
  color: #f7ca18;
}
a.btn.btn-sm.animated-button:hover >i {
  color: #fff;
  transition: 1s;
}
span.pad+i {
  border: 1px solid #fff;
  width: 25px;
  border-radius: 50%;
  height: 25px;
  text-align: center;
  line-height: 25px;
}
.mrng-60-top {
  margin-top: 60px;
}
/* Global Button Styles */
a.animated-button:link, a.animated-button:visited {
  position: relative;
  display: block;
  margin: 30px auto 0;
  padding: 14px 15px;
  color: #fff;
  font-size:14px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  letter-spacing: .08em;
  border-radius: 0;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
  content: "";
  position: absolute;
  height: 0%;
  left: 50%;
  top: 50%;
  width: 150%;
  z-index: -1;
  -webkit-transition: all 0.75s ease 0s;
  -moz-transition: all 0.75s ease 0s;
  -o-transition: all 0.75s ease 0s;
  transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
  color: #FFF;
  text-shadow: none;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
  height: 450%;
}
a.animated-button:link, a.animated-button:visited {
  position: relative;
  display: block;
  margin: 30px auto 0;
  padding: 14px 15px;
  color: #fff;
  font-size:14px;
  border-radius: 0;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  letter-spacing: .08em;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
/* Victoria Buttons */
a.animated-button.victoria-one {
  border: 2px solid #D24D57;
}
a.animated-button.victoria-one:after {
  background: #D24D57;
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}
a.animated-button.victoria-two {
  border: 2px solid #D24D57;
}
a.animated-button.victoria-two:after {
  background: #D24D57;
  -moz-transform: translateX(-50%) translateY(-50%) rotate(25deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(25deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg);
  transform: translateX(-50%) translateY(-50%) rotate(25deg);
}
a.animated-button.victoria-three {
  border: 2px solid #D24D57;
}
a.animated-button.victoria-three:after {
  background: #D24D57;
  opacity: .5;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
a.animated-button.victoria-three:hover:after {
  height: 140%;
  opacity: 1;
}
a.animated-button.victoria-four {
  border: 2px solid #D24D57;
}
a.animated-button.victoria-four:after {
  background: #D24D57;
  opacity: .5;
  -moz-transform: translateY(-50%) translateX(-50%) rotate(90deg);
  -ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);
  -webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
  transform: translateY(-50%) translateX(-50%) rotate(90deg);
}
a.animated-button.victoria-four:hover:after {
  opacity: 1;
  height: 600% !important;
}
/* Sandy Buttons */
a.animated-button.sandy-one {
  border: 2px solid #AEA8D3;
  color: #FFF;
}
a.animated-button.sandy-one:after {
  border: 3px solid #AEA8D3;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
a.animated-button.sandy-one:hover:after {
  height: 120% !important;
  opacity: 1;
  color: #FFF;
}
a.animated-button.sandy-two {
  border: 2px solid #AEA8D3;
  color: #FFF;
}
a.animated-button.sandy-two:after {
  border: 3px solid #AEA8D3;
  opacity: 0;
  -moz-transform: translateY(-50%) translateX(-50%) rotate(90deg);
  -ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);
  -webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
  transform: translateY(-50%) translateX(-50%) rotate(90deg);
}
a.animated-button.sandy-two:hover:after {
  height: 600% !important;
  opacity: 1;
  color: #FFF;
}
a.animated-button.sandy-three {
  border: 2px solid #AEA8D3;
  color: #FFF;
}
a.animated-button.sandy-three:after {
  border: 3px solid #AEA8D3;
  opacity: 0;
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}
a.animated-button.sandy-three:hover:after {
  height: 400% !important;
  opacity: 1;
  color: #FFF;
}
a.animated-button.sandy-four {
  border: 2px solid #AEA8D3;
  color: #FFF;
}
a.animated-button.sandy-four:after {
  border: 3px solid #AEA8D3;
  opacity: 0;
  -moz-transform: translateY(-50%) translateX(-50%) rotate(25deg);
  -ms-transform: translateY(-50%) translateX(-50%) rotate(25deg);
  -webkit-transform: translateY(-50%) translateX(-50%) rotate(25deg);
  transform: translateY(-50%) translateX(-50%) rotate(25deg);
}
a.animated-button.sandy-four:hover:after {
  height: 400% !important;
  opacity: 1;
  color: #FFF;
}
/* Gibson Buttons */
a.animated-button.gibson-one {
  border: 2px solid #65b37a;
  color: #FFF;
}
a.animated-button.gibson-one:after {
  opacity: 0;
  background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%);
  background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%);
  background-size: 10px 10px;
  -moz-transform: translateX(-50%) translateY(-50%) rotate(25deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(25deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg);
  transform: translateX(-50%) translateY(-50%) rotate(25deg);
}
a.animated-button.gibson-one:hover:after {
  height: 600% !important;
  opacity: 1;
  color: #FFF;
}
a.animated-button.gibson-two {
  border: 2px solid #65b37a;
  color: #FFF;
}
a.animated-button.gibson-two:after {
  opacity: 0;
  background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%);
  background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%);
  background-size: 10px 10px;
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}
a.animated-button.gibson-two:hover:after {
  height: 600% !important;
  opacity: 1;
  color: #FFF;
}
a.animated-button.gibson-three {
  border: 2px solid #65b37a;
  color: #FFF;
}
a.animated-button.gibson-three:after {
  opacity: 0;
  background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%);
  background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%);
  background-size: 10px 10px;
  -moz-transform: translateX(-50%) translateY(-50%) rotate(90deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(90deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg);
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
}
a.animated-button.gibson-three:hover:after {
  height: 600% !important;
  opacity: 1;
  color: #FFF;
}
a.animated-button.gibson-four {
  border: 2px solid #65b37a;
  color: #FFF;
}
a.animated-button.gibson-four:after {
  opacity: 0;
  background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%);
  background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%);
  background-size: 10px 10px;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%));
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
a.animated-button.gibson-four:hover:after {
  height: 600% !important;
  opacity: 1;
  color: #FFF;
}
/* Thar Buttons */
a.animated-button.thar-one {
  color: #fff;
  cursor: pointer;
  display: block;
  position: relative;
  border: 2px solid #F7CA18;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
a.animated-button.thar-one:hover {
  color: #000 !important;
  background-color: transparent;
  text-shadow: none;
}
a.animated-button.thar-one:hover:before {
  bottom: 0%;
  top: auto;
  height: 100%;
}
a.animated-button.thar-one:before {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  height: 0px;
  width: 100%;
  z-index: -1;
  content: '';
  color: #000 !important;
  background: #F7CA18;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
a.animated-button.thar-two {
  color: #fff;
  cursor: pointer;
  display: block;
  position: relative;
  border: 2px solid #F7CA18;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
a.animated-button.thar-two:hover {
  color: #000 !important;
  background-color: transparent;
  text-shadow: ntwo;
}
a.animated-button.thar-two:hover:before {
  top: 0%;
  bottom: auto;
  height: 100%;
}
a.animated-button.thar-two:before {
  display: block;
  position: absolute;
  left: 0px;
  bottom: 0px;
  height: 0px;
  width: 100%;
  z-index: -1;
  content: '';
  color: #000 !important;
  background: #F7CA18;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
a.animated-button.thar-three {
  color: #fff;
  cursor: pointer;
  display: block;
  position: relative;
  border: 2px solid #F7CA18;
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
0s;
}
a.animated-button.thar-three:hover {
  color: #000 !important;
  background-color: transparent;
  text-shadow: nthree;
}
a.animated-button.thar-three:hover:before {
  left: 0%;
  right: auto;
  width: 100%;
}
a.animated-button.thar-three:before {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 0px;
  z-index: -1;
  content: '';
  color: #000 !important;
  background: #F7CA18;
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
0s;
}
a.animated-button.thar-four {
  color: #fff;
  cursor: pointer;
  display: block;
  position: relative;
  border: 2px solid #F7CA18;
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
0s;
}
a.animated-button.thar-four:hover {
  color: #000 !important;
  background-color: transparent;
  text-shadow: nfour;
}
a.animated-button.thar-four:hover:before {
  right: 0%;
  left: auto;
  width: 100%;
}
a.animated-button.thar-four:before {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 0px;
  z-index: -1;
  content: '';
  color: #000 !important;
  background: #F7CA18;
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}