"button menu animation"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

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="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="rollovers grid">
<li class="logo_reveal">
<svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70" enable-background="new 0 0 70 70"><path d="M36.4 61.2c-.7.7-1.9.7-2.7 0l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.4c-.7.7-.7 1.9 0 2.7l4.2 4.2c.7.7 1.9 1.9 2.7 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7 1.9-1.9 2.7-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2zM61.2 33.8c.7.7.7 1.9 0 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.2-4.2c.7-.7 1.9-1.9 2.7-2.7l1.4-1.4c.7-.7.7-1.9 0-2.7l-1.4-1.5c-.7-.7-1.9-1.9-2.7-2.7l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.5c-.7.7-.7 1.9 0 2.7l4.2 4.2zM33.6 8.8c.7-.7 1.9-.7 2.7 0l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.2c-.7-.7-1.9-1.9-2.7-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-1.5 1.4c-.7.7-1.9 1.9-2.7 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.3-4.2zM8.8 36.2c-.7-.7-.7-1.9 0-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2c-.7.7-1.9 1.9-2.7 2.7l-1.4 1.4c-.7.7-.7 1.9 0 2.7l1.4 1.5c.7.7 1.9 1.9 2.7 2.7l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.3z"/></svg>
<span class="icon_contain">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50"><g><circle cx="4.7" cy="9.4" r="4.7"/><circle cx="4.7" cy="25" r="4.7"/><circle cx="4.7" cy="40.6" r="4.7"/><path d="M18.8 12.5h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.3 3.1 3.1 3.1zM46.9 21.9h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1zM46.9 37.5h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1z"/></g></svg>
</span>
<a href="#">Logo Reveal</a>
</li>
<li class="logo_grow">
<svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70" enable-background="new 0 0 70 70"><path d="M36.4 61.2c-.7.7-1.9.7-2.7 0l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.4c-.7.7-.7 1.9 0 2.7l4.2 4.2c.7.7 1.9 1.9 2.7 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7 1.9-1.9 2.7-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2zM61.2 33.8c.7.7.7 1.9 0 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.2-4.2c.7-.7 1.9-1.9 2.7-2.7l1.4-1.4c.7-.7.7-1.9 0-2.7l-1.4-1.5c-.7-.7-1.9-1.9-2.7-2.7l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.5c-.7.7-.7 1.9 0 2.7l4.2 4.2zM33.6 8.8c.7-.7 1.9-.7 2.7 0l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.2c-.7-.7-1.9-1.9-2.7-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-1.5 1.4c-.7.7-1.9 1.9-2.7 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.3-4.2zM8.8 36.2c-.7-.7-.7-1.9 0-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2c-.7.7-1.9 1.9-2.7 2.7l-1.4 1.4c-.7.7-.7 1.9 0 2.7l1.4 1.5c.7.7 1.9 1.9 2.7 2.7l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.3z"/></svg>
<span class="icon_contain">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50"><g><circle cx="4.7" cy="9.4" r="4.7"/><circle cx="4.7" cy="25" r="4.7"/><circle cx="4.7" cy="40.6" r="4.7"/><path d="M18.8 12.5h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.3 3.1 3.1 3.1zM46.9 21.9h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1zM46.9 37.5h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1z"/></g></svg>
</span>
<a href="#">Logo Grow</a>
</li>
<li class="logo_grow_alt">
<svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70" enable-background="new 0 0 70 70"><path d="M36.4 61.2c-.7.7-1.9.7-2.7 0l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.4c-.7.7-.7 1.9 0 2.7l4.2 4.2c.7.7 1.9 1.9 2.7 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7 1.9-1.9 2.7-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2zM61.2 33.8c.7.7.7 1.9 0 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.2-4.2c.7-.7 1.9-1.9 2.7-2.7l1.4-1.4c.7-.7.7-1.9 0-2.7l-1.4-1.5c-.7-.7-1.9-1.9-2.7-2.7l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.5c-.7.7-.7 1.9 0 2.7l4.2 4.2zM33.6 8.8c.7-.7 1.9-.7 2.7 0l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.2c-.7-.7-1.9-1.9-2.7-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-1.5 1.4c-.7.7-1.9 1.9-2.7 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.3-4.2zM8.8 36.2c-.7-.7-.7-1.9 0-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2c-.7.7-1.9 1.9-2.7 2.7l-1.4 1.4c-.7.7-.7 1.9 0 2.7l1.4 1.5c.7.7 1.9 1.9 2.7 2.7l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.3z"/></svg>
<span class="icon_contain">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50"><g><circle cx="4.7" cy="9.4" r="4.7"/><circle cx="4.7" cy="25" r="4.7"/><circle cx="4.7" cy="40.6" r="4.7"/><path d="M18.8 12.5h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.3 3.1 3.1 3.1zM46.9 21.9h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1zM46.9 37.5h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1z"/></g></svg>
</span>
<a href="#">Logo Grow Alt</a>
</li>
<li class="logo_rotate">
<svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70" enable-background="new 0 0 70 70"><path d="M36.4 61.2c-.7.7-1.9.7-2.7 0l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.4c-.7.7-.7 1.9 0 2.7l4.2 4.2c.7.7 1.9 1.9 2.7 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7 1.9-1.9 2.7-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2zM61.2 33.8c.7.7.7 1.9 0 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.2-4.2c.7-.7 1.9-1.9 2.7-2.7l1.4-1.4c.7-.7.7-1.9 0-2.7l-1.4-1.5c-.7-.7-1.9-1.9-2.7-2.7l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.5c-.7.7-.7 1.9 0 2.7l4.2 4.2zM33.6 8.8c.7-.7 1.9-.7 2.7 0l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.2c-.7-.7-1.9-1.9-2.7-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-1.5 1.4c-.7.7-1.9 1.9-2.7 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.3-4.2zM8.8 36.2c-.7-.7-.7-1.9 0-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2c-.7.7-1.9 1.9-2.7 2.7l-1.4 1.4c-.7.7-.7 1.9 0 2.7l1.4 1.5c.7.7 1.9 1.9 2.7 2.7l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.3z"/></svg>
<span class="icon_contain">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50"><g><circle cx="4.7" cy="9.4" r="4.7"/><circle cx="4.7" cy="25" r="4.7"/><circle cx="4.7" cy="40.6" r="4.7"/><path d="M18.8 12.5h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.3 3.1 3.1 3.1zM46.9 21.9h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1zM46.9 37.5h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1z"/></g></svg>
</span>
<a href="#">Logo Rotate</a>
</li>
<li class="logo_rotate_alt">
<svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70" enable-background="new 0 0 70 70"><path d="M36.4 61.2c-.7.7-1.9.7-2.7 0l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.4c-.7.7-.7 1.9 0 2.7l4.2 4.2c.7.7 1.9 1.9 2.7 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7 1.9-1.9 2.7-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2zM61.2 33.8c.7.7.7 1.9 0 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.2-4.2c.7-.7 1.9-1.9 2.7-2.7l1.4-1.4c.7-.7.7-1.9 0-2.7l-1.4-1.5c-.7-.7-1.9-1.9-2.7-2.7l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.5c-.7.7-.7 1.9 0 2.7l4.2 4.2zM33.6 8.8c.7-.7 1.9-.7 2.7 0l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.2c-.7-.7-1.9-1.9-2.7-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-1.5 1.4c-.7.7-1.9 1.9-2.7 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.3-4.2zM8.8 36.2c-.7-.7-.7-1.9 0-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2c-.7.7-1.9 1.9-2.7 2.7l-1.4 1.4c-.7.7-.7 1.9 0 2.7l1.4 1.5c.7.7 1.9 1.9 2.7 2.7l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.3z"/></svg>
<span class="icon_contain">
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(https://fonts.googleapis.com/css?family=Open+Sans:300);
* {
box-sizing: border-box;
}
.rollovers {
overflow: hidden;
list-style-type: none;
margin: 0;
padding: 1em;
text-align: center;
}
.rollovers li {
position: relative;
display: inline-block;
width: 13em;
}
.rollovers li a {
position: relative;
z-index: 1;
display: block;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 1.25em;
text-decoration: none;
color: #000;
padding: 4.7em 1em 1em;
}
.icon_contain {
position: absolute;
top: 3em;
left: 50%;
width: 4.375em;
height: 4.375em;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Argon Design System
Ripple Dot Animation
Success and Error Icon Animation
Bootstrap4 navigation border animation

Questions / Comments: