Hello.
I have a large CSS archive
I have more than 20 ready-made HTML + CSS buttons
I can sell you them now for the price of the offer
For an example, I enclose the code here, it is clean and understandable
HTML
<button class="shadow-btn">
<span class="btn-inner">
<span class="text">Перейти</span>
<i class="fa fa-long-arrow-right"></i>
</span>
<span class="shadow"></span>
</button>
CSS
.shadow-btn {
position: relative;
padding: 15px 40px;
margin: 0 20px;
background: #fff9ef;
font-family: 'Montserrat Alternates', sans-serif;
color: #fe7660;
text-transform: lowercase;
border: 2px solid #052464;
font-size: 16px;
font-weight: 600;
outline: none;
cursor: pointer;
}
.btn-inner {
display: flex;
align-items: center;
}
.text {
line-height: 1;
transform: translateX(0px);
transition: .3s cubic-bezier(.86,0,.07,1);
}
.btn-inner i {
margin-left: 5px;
font-size: 14px;
transition: transform .3s cubic-bezier(.86,0,.07,1), opacity .3s;
}
.shadow {
position: absolute;
top: 9px;
left: 9px;
width: 100%;
height: 100%;
background: #98dfd7;
z-index: -1;
transition: .3s ease;
transform: translate3d(0,0,0);
}
.shadow-btn:hover .text {
transform:translateX(8px);
}
.shadow-btn:hover i {
transform: translateX(100%);
opacity: 0;
}
.shadow-btn:hover .shadow {
transform: translate3d(3px,3px,0);
}