<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;
}
