CSS
.btn{
padding: 15px 25px;
text-transform: uppercase;
position: relative;
transition: all 0.6s ease 0s;
}
.btn:before{
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
height:0;
z-index: -1;
transition: all 0.6s ease 0s;
}
.btn:after{
content: "";
position: absolute;
bottom:0;
right:0;
width: 100%;
height:0;
z-index: -1;
transition: all 0.6s ease 0s;
}
.btn:hover{
color:#fff;
}
.purple{
border: 1px solid #580141;
color: #580141;
}
.purple:hover:before,
.purple:hover:after{
background: #580141;
height:50%;
}
.green{
border: 1px solid #396b1c;
color: #396b1c;
}
.green:hover:before,
.green:hover:after{
background: #396b1c;
height:50%;
}
.blue{
border: 1px solid #3498db;
color: #3498db;
}
.blue:hover:before,
.blue:hover:after{
background: #3498db;
height:50%;
}
.orange{
border: 1px solid #e67e22;
color: #e67e22;
}
.orange:hover:before,
.orange:hover:after{
background: #e67e22;
height:50%;
}
@media only screen and (max-width: 767px) {
.btn{
margin-bottom: 15px;
}
}