"CSS3 Button Hover Effects"
Bootstrap 3.0.0 Snippet by ashokpulyala

<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 ----------> <div class="container"> <h1 class="text-center">CSS3 Button Hover Effects</h1> <div class="col-md-2"> <a href="#" class="btn btn-1"> BUTTON </a> </div> <div class="col-md-2"> <a href="#" class="btn btn-2"> BUTTON </a> </div> <div class="col-md-2"> <a href="#" class="btn btn-3"> BUTTON </a> </div> <div class="col-md-2"> <a href="#" class="btn btn-4"> BUTTON </a> </div> <div class="col-md-2"> <a href="#" class="btn btn-5"> BUTTON </a> </div> <div class="col-md-2"> <a href="#" class="btn btn-6"> BUTTON </a> </div> <div> </div> <div class="col-md-2"> <a href="#" class="btn btn-7"> SEARCH <i class="glyphicon glyphicon-search"></i></a> </div> <div class="col-md-2"> <a href="#" class="btn btn-8"> NEXT <i class="glyphicon glyphicon-arrow-right"></i></a> </div> <div class="col-md-2"> <a href="#" class="btn btn-9"> NEXT </a> </div> <div class="col-md-2"> <a href="#" class="btn btn-10"> <i class="glyphicon glyphicon-arrow-right"></i> </a> </div> </div>
body{ /*background: #0e83cd;*/ background: #7D6EC6; color: #fff; } .btn { color: #fff; border: 1px solid #fff; border-radius: 0; font-size: 1.5em; padding: 10px 35px; width: 100%; } .btn:hover { color: #7D6EC6; } .btn-1:hover{ background: #fff; } .btn-2{ position: relative; overflow: hidden; } .btn-2:before { content: ''; display: block; position: absolute; background: #fff; width: 100%; height: 100%; left: 0; top: -100%; transition: all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; } .btn-2:hover:before { top: 0; z-index: -1 } .btn-3{ position: relative; overflow: hidden; } .btn-3:before { content: ''; display: block; position: absolute; background: #fff; width: 100%; height: 100%; left: -100%; top: 0; transition: all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; } .btn-3:hover:before { left: 0; z-index: -1 } .btn-4{ position: relative; overflow: hidden; } .btn-4:before { content: ''; display: block; position: absolute; background: #fff; width: 0%; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz- transform: translate(-50%, -50%); transition: all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; } .btn-4:hover:before { width: 100%; z-index: -1; } .btn-5{ position: relative; overflow: hidden; } .btn-5:before { content: ''; display: block; position: absolute; background: #fff; width: 100%; height: 0%; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(40deg); -webkit-transform: translate(-50%, -50%) rotate(40deg); -moz-transform: translate(-50%, -50%) rotate(40deg); transition: all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; } .btn-5:hover:before { width: 110%; height: 300%; z-index: -1; } .btn-6{ position: relative; overflow: hidden; } .btn-6:before { content: ''; display: block; position: absolute; background: #fff; width: 0%; height: 75%; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transition: all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; } .btn-6:hover:before { width: 90%; height: 75%; z-index: -1; } .btn-7{ overflow: hidden; padding: 10px 30px; } .btn-7:hover{ background: #fff; } .btn-7 .glyphicon{ opacity: 0; transform: translate(1000%,0); -webkit-transform: translate(1000%,0); -moz-transform: translate(1000%,0); transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } .btn-7:hover .glyphicon{ opacity: 1; transform: translate(25%,0); -webkit-transform: translate(25%,0); -moz-transform: translate(25%,0); } .btn-8{ overflow: hidden; padding: 10px 30px; border-radius: 50px; } .btn-8 .glyphicon{ opacity: 0; transform: translate(-1000%,0); -webkit-transform: translate(-1000%,0); -moz-transform: translate(-1000%,0); transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } .btn-8:hover{ background: #fff; } .btn-8:hover .glyphicon{ opacity: 1; transform: translate(25%,0); -webkit-transform: translate(25%,0); -moz-transform: translate(25%,0); } .btn-9{ transition: ease .5s; -webkit-transition: ease .5s; -moz-transition: ease .5s; } .btn-9:hover{ border-radius: 50px; color: #fff; } .btn-10 { border-radius: 50px; padding: 10px; width: 50px; height: 50px; position: relative; overflow: hidden; transition: all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; } .btn-10:hover { width: 100%; border-radius: 50px; background: #fff; } .btn-10:before { content: 'NEXT'; display: block; position: absolute; left: -120%; } .btn-10:hover:before { left: 28%; } .btn-10:hover .glyphicon{ left: 30%; position: relative; }

Related: See More


Questions / Comments: