Using social icons increases the number of visitors to your website and is very useful for your website SEO. Social buttons should be chosen to fit the look of your website. This code is useful for you if you have a dark themed website. The background of all buttons is black and the buttons have no background. All buttons have a colored border. The color of the border on each button is different from the other button. It consists of a title and a social network icon. Social media icons have animation and are constantly moving.


HTML
<!-- This script got from www.devanswer.com -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<div class="container">
    <div class="row text-center">
        <h2><i class="fa fa-bolt"></i> Animated Social Buttons</h2>
    </div>
</div>
<div class="container text-center">
    <div class="row">
        <div class="col-md-3">
            <button type="button" class="btn btn-twitter btn-lg"><i class="fa fa-twitter animated infinite flash"></i> Twitter</button>
        </div>

        <div class="col-md-3"><button type="button" class="btn btn-Github btn-lg"><i class="fa fa-github-alt animated infinite rubberBand"></i> Github</button></div>

        <div class="col-md-3"><button type="button" class="btn btn-Google btn-lg"><i class="fa fa-google-plus animated infinite tada"></i> Google+</button></div>

        <div class="col-md-3"><button type="button" class="btn btn-instagram btn-lg"><i class="fa fa-instagram animated infinite flip"></i> Instagram</button></div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
                        

CSS
body {
  background-color: #222!important;
  padding-top: 30px;
}
.btn {
  margin: 40px;
}
h2 {
  color: #fff;
}
p {
  color: #fff;
  font-family:sans-serif;
  font-weight:lighter;
}
/*--css needed for button Style*/
.btn.btn-twitter {
  background-color: transparent;
  color: #fff;
  border-color: #57e7fd;
  border-size: 2px;
  border-radius: 0;
}
.btn.btn-twitter:hover {
  background-color: transparent;
  color: #fff;
  border-color: #fff;
  border-size: 2px;
  border-radius: 0;
}
.btn.btn-Github {
  background-color: transparent;
  color: #fff;
  border-color: #cff99e;
  border-size: 2px;
  border-radius: 0;
}
.btn.btn-Github:hover {
  background-color: transparent;
  color: #fff;
  border-color: #fff;
  border-size: 2px;
  border-radius: 0;
}
.btn.btn-Google {
  background-color: transparent;
  color: #fff;
  border-color: #ee1010;
  border-size: 2px;
  border-radius: 0;
}
.btn.btn-Google:hover {
  background-color: transparent;
  color: #fff;
  border-color: #fff;
  border-size: 2px;
  border-radius: 0;
}
.btn.btn-instagram {
  background-color: transparent;
  color: #fff;
  border-color: #ecce88;
  border-size: 2px;
  border-radius: 0;
}
.btn.btn-instagram:hover {
  background-color: transparent;
  color: #fff;
  border-color: #fff;
  border-size: 2px;
  border-radius: 0;
}
a{
  color:#fff;
}