پیشنمایش زنده
کد HTML
<button href="#" class="button" style="--clr: #00c2c5;">
<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-blockchain-cat_svg__clip0_701_19339)">
<circle
opacity="0.5"
cx="23"
cy="23"
r="23"
fill="url(#icon-blockchain-cat_svg__paint0_linear_701_19339)"
></circle>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M35.65 15.354L23 8.05l-12.65 7.303V29.96L23 37.264l12.65-7.304V15.353zm-1.512 3.02l-9.988 4.994v9.912h-2.3v-9.933L12.5 18.36l1.082-2.03 9.435 5.033 10.092-5.046 1.029 2.057z"
fill="#fff"
></path>
</g>
<defs>
<linearGradient
id="icon-blockchain-cat_svg__paint0_linear_701_19339"
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-blockchain-cat_svg__clip0_701_19339">
<path fill="#fff" d="M0 0h46v46H0z"></path>
</clipPath>
</defs>
</svg>
</div>
<span class="button__text">Blockchain</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);
}