"Simple Hover Effect Btn"
Bootstrap 3.0.0 Snippet by Rashad1212

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="wrapper"> <!-- normal hover effect --> <div class="child-wrapper"> <div class="btn_box btn_one">hover me!</div> <div class="btn_box btn_two">hover me!</div> <div class="btn_box btn_three">hover me!</div> </div> <!-- animation effect --> <div class="child-wrapper"> <div class="btn_box btn_one btn_style_two">hover me!</div> <div class="btn_box btn_two btn_style_three">hover me!</div> </div> </div> <a class="fbme" href="https://www.facebook.com/eahea.ratan">Me on Facebook</a> </body> </html>
@import url('https://fonts.googleapis.com/css?family=Rozha+One'); .btn_box{ height: 45px; width: 150px; margin: 20px 0px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; text-transform:uppercase; font-size: 13px; color:#fff; text-align:center; line-height:45px; letter-spacing:0.08em; font-family: 'Rozha One', serif; cursor:pointer; transition:all 0.3s ease 0s; box-shadow:0px 0px 5px rgba(0,0,0,0.1) } .btn_one{ background: #fff; color:#444; } .btn_two{ background-color: #444; } .btn_three{ background-color: #ddd; color:black; } .btn_one:hover{ background: #444; color:#fff; } .btn_two:hover{ background: #fff; color:#444; } .btn_three:hover{ background: teal; color:#fff; } .wrapper{ display: flex; justify-content:space-between; max-width:350px; margin: auto; margin-top: 150px; } .btn_style_two:hover{ transform:scale(1.05); } .btn_style_three{ position:relative; overflow:hidden; z-index:22; } .btn_style_three:before{ content: ''; position: absolute; left: -150px; top: 0; height: 100%; width: 100%; background: #fff; transition:all 0.3s ease 0s; z-index;-1; } .btn_style_three:after{ content: 'hover me!'; position: absolute; left: -450px; top: 0; height: 100%; width: 100%; background: #444; transition:all 0.3s ease 0s; transition-delay:0.1s; z-index;-1; color:#fff; } .btn_style_three:hover:before, .btn_style_three:hover:after{ left:0px; } .fbme{ display:block; text-align:center; margin:50px 0px; }

Related: See More

Paper Kit 2
Hover Effect Style
Different types of hover and transition effect.
Sonar Wave Effect in Circle With CSS

Questions / Comments: