Bootstrap Snippet CSS3 Animated 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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 ---------->
<div class="container">
    <h1 style="color:red; text-align:center;margin-top:40px; font-size:50px; font-weight:bold;">Hossain Shahid</h1>
    <br>
    <div class="row">
        <div id="ballMenuContainer">
<div id="menuBall1" class="menuBall">
  <a href="#" class="ball blueball">
    <div class="menuText">
        Party Info
    </div>
  </a>
</div>
<div id="menuBall2" class="menuBall">
    <a href="#" class="ball redball">
    <div class="menuText">
        Directions
    </div>
  </a>
</div>
<div id="menuBall3" class="menuBall">
    <a href="#" class="ball greenball">
    <div class="menuText">
        The Dairy
    </div>
  </a>
</div>
<div id="menuBall4" class="menuBall">
    <a href="#" class="ball yellowball">
    <div class="menuText">
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
.menuBall a:hover{
        text-decoration: none;
}
@-webkit-keyframes pulse {
    0% {
      -webkit-transform: scale(1) rotate(0deg); 
    }
    50% {
      -webkit-transform: scale(1.1) rotate(-5deg); 
    }
    100% {
      -webkit-transform: scale(1) rotate(0deg); 
    }
}
@-o-keyframes pulse {
    0% {
      -o-transform: scale(1) rotate(0deg); 
    }
    50% {
      -o-transform: scale(1.1) rotate(-5deg); 
    }
    100% {
      -o-transform: scale(1) rotate(0deg); 
    }
}
@-moz-keyframes pulse {
    0% {
      -moz-transform: scale(1) rotate(0deg); 
    }
    50% {
      -moz-transform: scale(1.1) rotate(-5deg); 
    }
    100% {
      -moz-transform: scale(1) rotate(0deg); 
    }
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"CSS3 Animated buttons"
Bootstrap 3.3.0 Snippet by Divscodebd

Related: See More

Questions / Comments:

"CSS3 Animated buttons" Bootstrap 3.3.0 Snippet by Divscodebd

Related: See More

Questions / Comments:

"CSS3 Animated buttons"
Bootstrap 3.3.0 Snippet by Divscodebd