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

Post to Facebook Tweet this

<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>
*{ 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; } .btn-hover-postion2 { transition: all .5s .05s; } .btn-hover-postion3 { transition: all .5s .1s; } div[class^="btn-hover-postion"] span { color: blue; font-size: 35px; display: inline-block; z-index: -9; transition: all .5s; } div[class^="btn-hover-postion"] span:hover{ color: brown; } .circle-data { border: 2px solid black; position: absolute; top: 0; left: 0; height: 300px; width: 300px; border-radius: 50%; margin: 70px; display: none; } .btnapp span:hover .btn-hover-postion1{ top: 100px !important; left: 0px !important; opacity: 1; transform:rotate(0deg); } .btnapp span:hover .btn-hover-postion2 { top: 58px !important; left: 102px !important; opacity: 1; transform:rotate(0deg); } .btnapp span:hover .btn-hover-postion3 { top: -44px !important; left: 150px !important; opacity: 1; transform:rotate(0deg); }

Related: See More

Argon Design System
Hexa shape button
Hover Effect Style
Different types of hover and transition effect.

Questions / Comments: