"Stylish - Hover Toggle Button (No jQuery) - "
Bootstrap 3.3.0 Snippet by manikbiradar

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
<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 ---------->
<!DOCTYPE html>
<html>
<head>
<title>Toogle</title>
</head>
<body>
<div class="container">
<div class="buttonclick">
<div class="btnapp">
<span class="glyphicon glyphicon-plus-sign">
<div class="hover-btn">
<div class="btn-hover-postion1">
<span class="glyphicon glyphicon-cloud"></span>
</div>
<div class="btn-hover-postion2">
<span class="glyphicon glyphicon-envelope"></span>
</div>
<div class="btn-hover-postion3">
<span class="glyphicon glyphicon-globe"></span>
</div>
</div>
</span>
</div>
<div class="circle-data"></div>
</div><!-- buttonclick -->
</div>
</body>
</html>
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
*{
margin:0px
padding:0px;
border-size:border-box;
}
.buttonclick{
position: relative;
}
.btnapp {
margin: 200px;
display: inline-block;
}
.btnapp span {
font-size: 50px;
color: brown;
display: inline-block;
z-index: 99;
height: 50px;
width: 50px;
transition: all .5s;
}
.btnapp span:hover{
color: black;
}
.hover-btn{
position: relative;
}
div[class^="btn-hover-postion"] {
top: -58px;
position: absolute;
left: 4px;
opacity: 0;
transform:rotate(30deg);
}
.btn-hover-postion1 {
transition: all .5s;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit PRO React
Hexa shape button
Hover Effect Style
Different types of hover and transition effect.

Questions / Comments: