Bootstrap Snippet Animated CSS3 social buttons using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<ul class="social-buttons" id="demo1">
  <li>
    <a href="#" class="brandico-twitter-bird"></a>
  </li>
  <li>
    <a href="#" class="brandico-facebook"></a>
  </li>
  <li>
    <a href="#" class="brandico-instagram"></a>
  </li>
  <li>
    <a href="#" class="brandico-googleplus-rect"></a>
  </li>
</ul>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url(http://weloveiconfonts.com/api/?family=brandico);
/* brandico */
[class*="brandico-"]:before {
  font-family: 'brandico', sans-serif;
}
ul.social-buttons {
  text-align: center;
  margin-top: 50px;
}
ul.social-buttons li {
  display: inline-block;
  margin: 0 10px;
}
ul.social-buttons li a {
  width: 60px;
  height: 60px;
  display: block;
  border-radius: 50px;
  text-decoration: none;
  font-size: 30px;
  line-height: 60px;
  color: white;
}
ul.social-buttons li a.brandico-twitter-bird {
  background-color: #4099FF;
}
ul.social-buttons li a.brandico-facebook {
  background-color: #3B5998;
}
ul.social-buttons li a.brandico-instagram {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Animated CSS3 social buttons"
Bootstrap 3.3.0 Snippet by mahesh749

Related: See More

Questions / Comments:

"Animated CSS3 social buttons" Bootstrap 3.3.0 Snippet by mahesh749

Related: See More

Questions / Comments:

"Animated CSS3 social buttons"
Bootstrap 3.3.0 Snippet by mahesh749