/home/marynathaconsult/public_html/assets/scss/_button.scss
.theme_btn {
font-size: 13px;
line-height: 28px;
font-family: $pop;
letter-spacing: 4.16px;
text-transform: uppercase;
padding: 13px 30px 12px;
min-width: 230px;
color: #fff;
background: #8781bd;
font-weight: 600;
text-align: center;
display: inline-block;
border: 1px solid #8781bd;
transition: background 0.4s linear, color 0.3s linear;
position: relative;
overflow: hidden;
z-index: 1;
&:after {
position: absolute;
top: 50%;
left: 50%;
width: 120%;
height: 50%;
opacity: 0;
z-index: -1;
content: "";
background: #fff;
-webkit-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
&:hover {
color: $title;
border-color: #fff;
&:after {
opacity: 1;
height: 500%;
}
}
}
.theme_w_btn {
font: 600 13px/30px $pop;
border: 1px solid #fff;
display: inline-block;
padding: 13px 20px 10px;
letter-spacing: 4.16px;
min-width: 230px;
text-align: center;
color: $title;
text-transform: uppercase;
position: relative;
overflow: hidden;
z-index: 1;
&:after {
position: absolute;
top: 50%;
left: 50%;
width: 120%;
height: 500%;
opacity: 1;
z-index: -1;
content: "";
background: #fff;
transition: all 0.3s linear 0s;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
&:hover {
color: #fff;
&:after {
height: 0%;
}
}
}
.border_btn {
background: transparent;
color: #fff;
&:after {
height: 50%;
opacity: 0;
}
&:hover {
color: $title;
&:after {
height: 500%;
opacity: 1;
}
}
}