.btn-one {
position: relative;
display: inline-block;
overflow: hidden;
padding-top: 5px;
padding-left: 60px;
padding-bottom: 5px;
padding-right: 60px;
background-color: var(--thm-base, #ff8300);
color: #ffffff;
font-size: 14px;
line-height: 60px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
font-family: var(--thm-font, sans-serif);
z-index: 1;
}
.btn-one:before {
position: absolute;
top: 0px;
left: 0;
bottom: 0px;
width: 50%;
content: "";
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
transition-duration: 800ms;
background-color: var(--thm-black, #1a1a1a);
z-index: 2;
}
.btn-one:hover:before {
-webkit-transform: translateX(0px) !important;
transform: translateX(0px) !important;
}
.btn-one:after {
position: absolute;
top: 0px;
right: 0;
bottom: 0px;
width: 50%;
content: "";
-webkit-transform: translateX(100%);
transform: translateX(100%);
transition-duration: 800ms;
background-color: var(--thm-black, #1a1a1a);
z-index: 2;
}
.btn-one:hover:after {
-webkit-transform: translateX(0px) !important;
transform: translateX(0px) !important;
}
.btn-one .txt {
position: relative;
display: flex;
align-items: center;
z-index: 3;
}
.btn-one:hover,
.btn-one:focus {
color: #ffffff !important;
} .btn-two {
position: relative;
display: inline-block;
color: #ffffff;
font-size: 14px;
font-weight: 400;
line-height: 20px;
text-transform: uppercase;
text-decoration: none;
font-family: var(--thm-font-2, sans-serif);
transition: all 200ms linear;
transition-delay: 0.1s;
}
.btn-two span {
position: relative;
top: 3px;
display: inline-block;
padding-right: 10px;
line-height: 15px;
transform: rotate(180deg);
}
.btn-two span:before {
position: relative;
top: 3px;
display: inline-block;
color: var(--thm-black, #1a1a1a);
font-size: 25px;
font-weight: 400;
z-index: 1;
}
.btn-two span:after {
content: "";
position: absolute;
top: 0;
right: 20px;
bottom: 0;
width: 20px;
height: 20px;
background: #ffffff;
border-radius: 50%;
transition: all 200ms linear;
transition-delay: 0.1s;
}
.btn-two:hover span:after {
transform: scale(1.1);
}
.btn-two:hover {
color: var(--thm-base, #ff8300);
} .btn-three {
position: relative;
display: inline-block;
padding: 15px 40px;
background-color: transparent;
border: 2px solid var(--thm-base, #ff8300);
color: var(--thm-base, #ff8300);
font-size: 14px;
font-weight: 700;
line-height: 1.5;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1em;
transition: all 0.3s ease;
z-index: 1;
}
.btn-three:hover {
background-color: var(--thm-base, #ff8300);
color: #ffffff;
} .btn-one.btn-black {
background-color: var(--thm-black, #1a1a1a);
}
.btn-one.btn-black:before,
.btn-one.btn-black:after {
background-color: var(--thm-base, #ff8300);
}
.btn-one.btn-white {
background-color: #ffffff;
color: var(--thm-black, #1a1a1a);
}
.btn-one.btn-white:before,
.btn-one.btn-white:after {
background-color: var(--thm-base, #ff8300);
}
.btn-one.btn-white:hover {
color: #ffffff !important;
} .btn-one.btn-sm {
padding: 3px 30px;
font-size: 12px;
line-height: 44px;
}
.btn-one.btn-lg {
padding: 8px 80px;
font-size: 16px;
line-height: 70px;
} @media only screen and (max-width: 767px) {
.btn-one {
padding-left: 40px;
padding-right: 40px;
line-height: 50px;
}
.btn-one.btn-lg {
padding-left: 50px;
padding-right: 50px;
line-height: 60px;
}
}