Demo for Dark Social Buttons Code with Animating Icons

Preview

Source Code

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


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

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

</body>
</html>

Other Codes

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 . . .

Bootstrap Social Buttons with Hover Effect

In this code, we have several types of social buttons, all of which have no background and have a border, and in hover mode, animation is run on them . . .

Flying Social Buttons Icons on Background

In this code, there are 4 icons of social buttons in the middle of the page. By placing the mouse on one of them, the social button in the background . . .

Radio Social Buttons Code

In this post, we have some radio buttons. These radio buttons belong to any social network. Social icons are also displayed by clicking the share button.