.btn{
position:relative;
border-radius:0;
text-transform: uppercase;
z-index: 1;
transition: all 0.5s ease 0s;
}
.btn:after{
content: "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
width: 100%;
height: 100%;
transform: scale(1, 0.5);
transition: all 0.4s ease 0s;
}
.btn:hover:after{
opacity: 1;
transform: scale(1, 1);
}
.btn.purple{
border: 1px solid #580141;
color:#580141;
}
.btn.purple:after{
background-color: rgba(88, 1, 65, 1);
}
.btn.green{
border: 1px solid #396b1c;
color:#396b1c;
}
.btn.green:after{
background-color: rgba(57, 107, 28, 1);
}
.btn.orange{
border: 1px solid #e67e22;
color:#e67e22;
}
.btn.orange:after{
background-color: rgba(230, 126, 34, 1);
}
.btn.blue{
border: 1px solid #3498db;
color:#3498db;
}
.btn.blue:after{
background-color: rgba(52, 152, 219, 1);
}
.btn.purple:hover,
.btn.green:hover,
.btn.orange:hover,
.btn.blue:hover{
color:#fff;
}
@media only screen and (max-width: 767px) {
.btn{
margin-bottom: 15px;
}
}