.btn{
color: #00662b;
font-family:'Archivo', sans-serif;
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
padding: 10px 25px;
border: 3px solid #00662b;
border-radius: 50px 50px;
overflow: hidden;
position: relative;
z-index: 1;
transition: all 0.7s;
}
.btn:hover{
color: #fff;
}
.btn:before,
.btn:after,
.btn span:before,
.btn span:after{
content: "";
background: #00662b;
width: 25%;
height: 100%;
position: absolute;
right: 100%;
top: 0;
z-index: -1;
transition: all 0.7s;
}
.btn:after{
right: auto;
left: 25%;
top: -100%;
}
.btn span:before{
right: auto;
top: 100%;
left: 50%;
}
.btn span:after{
right: auto;
left: 100%;
}
.btn:hover:before{
top: 0;
right: 0;
}
.btn:hover:after{
right: auto;
top: 0;
left: 50%;
}
.btn:hover span:before{
top: 0;
left: 25%;
}
.btn:hover span:after{
top: 0;
left: 0;
}
@media only screen and (max-width: 767px){
.btn{ margin-bottom: 30px; }
}