پیشنمایش زنده
کد HTML
<button href="#" class="button" style="--clr: #f1643f;">
<span class="button-decor"></span>
<div class="button-content">
<div class="button__icon">
<svg
viewBox="0 0 46 46"
fill="none"
xmlns="http://www.w3.org/2000/svg"
width="24"
>
<g clip-path="url(#icon-bitcoin-cat_svg__clip0_701_19427)">
<circle
opacity="0.5"
cx="23"
cy="23"
r="23"
fill="url(#icon-bitcoin-cat_svg__paint0_linear_701_19427)"
></circle>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M23 37.95c8.257 0 14.95-6.693 14.95-14.95S31.257 8.05 23 8.05 8.05 14.743 8.05 23 14.743 37.95 23 37.95zm7.048-13.765c-.495-.655-1.18-1.122-2.054-1.398a3.672 3.672 0 001.486-1.377c.364-.583.546-1.245.546-1.988 0-1.224-.502-2.193-1.507-2.906-.793-.572-1.866-.914-3.219-1.028V12.65H23v2.795h-1.15V12.65h-2.3v2.795h-2.787V30.74h2.787v2.61h2.3v-2.61H23v2.61h2.3v-2.622c1.689-.069 2.995-.422 3.918-1.059 1.049-.728 1.573-1.762 1.573-3.102 0-.947-.247-1.741-.743-2.382zm-9.767-2.469v-3.605H23.8c.874 0 1.537.153 1.989.459.451.29.677.735.677 1.332 0 .598-.226 1.05-.677 1.355-.452.306-1.115.459-1.989.459h-3.518zm6.228 5.9c-.466.305-1.166.458-2.098.458h-4.13v-3.78h4.13c1.88 0 2.819.634 2.819 1.901 0 .641-.24 1.115-.721 1.42z"
fill="#fff"
></path>
</g>
<defs>
<linearGradient
id="icon-bitcoin-cat_svg__paint0_linear_701_19427"
x1="23"
y1="0"
x2="23"
y2="46"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#fff" stop-opacity="0.71"></stop>
<stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
</linearGradient>
<clipPath id="icon-bitcoin-cat_svg__clip0_701_19427">
<path fill="#fff" d="M0 0h46v46H0z"></path>
</clipPath>
</defs>
</svg>
</div>
<span class="button__text">Bitcoin</span>
</div>
</button>
کد CSS
.button {
text-decoration: none;
line-height: 1;
border-radius: 1.5rem;
overflow: hidden;
position: relative;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.05);
background-color: #fff;
color: #121212;
border: none;
cursor: pointer;
}
.button-decor {
position: absolute;
inset: 0;
background-color: var(--clr);
transform: translateX(-100%);
transition: transform 0.3s;
z-index: 0;
}
.button-content {
display: flex;
align-items: center;
font-weight: 600;
position: relative;
overflow: hidden;
}
.button__icon {
width: 48px;
height: 40px;
background-color: var(--clr);
display: grid;
place-items: center;
}
.button__text {
display: inline-block;
transition: color 0.2s;
padding: 2px 1.5rem 2px;
padding-left: 0.75rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.button:hover .button__text {
color: #fff;
}
.button:hover .button-decor {
transform: translate(0);
}