logo DevAnswer - Developers Answer

Bootstrap Social Buttons with Hover Effect

26th September

Preview


Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
.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);
}
</style>

</head>
<body>
<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>

</body>
</html>



Other Codes

3D Oblique Social Buttons


3D Oblique Social Buttons

The social buttons in this code are three-dimensional and oblique, and in hover mode they change from gray to color and move slightly upwards.
Semicircular Animated Social Buttons


Semicircular Animated Social Buttons

Below we have a circular hamburger button that rotates when we click on it and the social media buttons open in a semicircle.
Toggle Social Buttons Code with Counter


Toggle Social Buttons Code with Counter

In this code, we have three toggle buttons that display social networks. These buttons are colored in the hover mode and can display a number instead . . .
Dark Social Buttons Code with Animating . . .


Dark Social Buttons Code with Animating . . .

In this code, social buttons are without background. These buttons have animated icons. All buttons have colored borders.