"Hover Blue Button Bar"
Bootstrap 3.3.0 Snippet by royonly

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 ----------> <head> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet"> </head> <div class="container"> <div class="row"> <div class="btn-group" role="group" aria-label="Default button group"> <button type="button" class="btn btn-sm"><i class="fa fa-clock-o fa-5x" ></i></button> <button type="button" class="btn btn-sm"><i class="fa fa-chevron-up fa-5x" ></i></button> <button type="button" class="btn btn-sm"><i class="fa fa-desktop fa-5x" ></i></button> </div> </div> <br /> <div class="row"> <div class="btn-group-vertical" role="group" aria-label="Default button group"> <button type="button" class="btn btn-sm"><i class="fa fa-clock-o fa-5x" ></i></button> <button type="button" class="btn btn-sm"><i class="fa fa-chevron-up fa-5x" ></i></button> <button type="button" class="btn btn-sm"><i class="fa fa-desktop fa-5x" ></i></button> </div> </div> </div>
/* Blue Flat Button ==================================================*/ .btn-sm{ position: relative; vertical-align: center; margin: 0px; height: 100x; padding: 20px 20px; font-size: 4px; color: white; text-align: center; text-shadow: 0 3px 2px rgba(0, 0, 0, 0.3); background: #62b1d0; border: 0; border-bottom: 3px solid #9FE8EF; cursor: pointer; -webkit-box-shadow: inset 0 -3px #9FE8EF; box-shadow: inset 0 -3px #9FE8EF; } .btn-sm:active { top: 2px; outline: none; -webkit-box-shadow: none; box-shadow: none; } .btn-sm:hover { background: #45E1E8; }

Related: See More

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

Questions / Comments: