پیشنمایش زنده
کد HTML
<button href="#" class="button" style="--clr: #7808d0;">
<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-insights-cat_svg__clip0_1051_21081)">
<circle
opacity="0.5"
cx="23"
cy="23"
r="23"
fill="url(#icon-insights-cat_svg__paint0_linear_1051_21081)"
></circle>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M33.35 12.65a2.3 2.3 0 012.3 2.3V27.6a2.3 2.3 0 01-2.3 2.3H22.373c-.304 0-.596.12-.811.334l-4.723 4.694c-.725.721-1.96.207-1.96-.816V31.05a1.15 1.15 0 00-1.15-1.15H12.65a2.3 2.3 0 01-2.3-2.3V14.95a2.3 2.3 0 012.3-2.3h20.7zm-18.4 5.75c0-.635.515-1.15 1.15-1.15h12.65a1.15 1.15 0 010 2.3H16.1a1.15 1.15 0 01-1.15-1.15zm0 4.6c0-.635.515-1.15 1.15-1.15h10.35a1.15 1.15 0 010 2.3H16.1A1.15 1.15 0 0114.95 23z"
fill="#fff"
></path>
</g>
<defs>
<linearGradient
id="icon-insights-cat_svg__paint0_linear_1051_21081"
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-insights-cat_svg__clip0_1051_21081">
<path fill="#fff" d="M0 0h46v46H0z"></path>
</clipPath>
</defs>
</svg>
</div>
<span class="button__text">Insights</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);
}