.theme-btn {
display: inline-flex;
gap: 8px;
justify-content: center;
text-align: center;
white-space: nowrap;
transition: all 300ms ease;
}
.theme-btn .btn-title {
position: relative;
display: flex;
align-items: center;
} .btn-style1 {
border: 1px solid #c2c1c1;
border-radius: 60px;
overflow: hidden;
padding: 4px 5.5px;
padding-right: 27px;
position: relative;
}
.btn-style1 .icon {
align-items: center;
background-color: var(--theme-color1);
color: var(--theme-color1-text-color);
border-radius: 50%;
display: flex;
height: 45px;
justify-content: center;
overflow: hidden;
width: 45px;
z-index: 1;
transition: all 400ms ease;
}
.btn-style1 .icon svg {
fill: var(--theme-color1-text-color);
}
.btn-style1 .icon i,
.btn-style1 .icon svg {
transition: transform 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
width: 10px;
}
.btn-style1 .icon i:first-child,
.btn-style1 .icon svg:first-child {
transform: translateX(5px);
transition-delay: 0s;
}
.btn-style1 .icon i:last-child,
.btn-style1 .icon svg:last-child {
transform: translateX(-100px);
transition-delay: 0s;
}
.btn-style1:before {
background-color: var(--theme-color1);
bottom: 10px;
border-radius: 50px;
content: "";
height: 45px;
left: 5.5px;
position: absolute;
right: 5.5px;
top: 4px;
width: 45px;
z-index: 0;
transition: all 400ms ease;
}
.btn-style1:hover {
color: var(--theme-color1-text-color);
}
.btn-style1:hover i:first-child,
.btn-style1:hover svg:first-child {
transform: translateX(200px);
transition-delay: 0s;
}
.btn-style1:hover i:last-child,
.btn-style1:hover svg:last-child {
transform: translateX(0);
transition-delay: 0.1s;
}
.btn-style1:hover:before {
left: 11px;
width: calc(100% - 16px);
}