پیشنمایش زنده
کد HTML
<button style="--clr: #0044e9;" class="button" href="#">
<span class="button-decor"></span>
<div class="button-content">
<div class="button__icon">
<svg
width="24"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 36 36"
>
<circle
fill="url(#icon-lightning-cat_svg__paint0_linear_379_8580)"
r="18"
cy="18"
cx="18"
opacity="0.5"
></circle>
<path
fill="#fff"
d="M22.911 8.791c.46-.87-.621-1.734-1.368-1.093L9.293 18.215c-.627.54-.246 1.568.581 1.568h6.93l-3.838 7.248c-.46.87.622 1.734 1.368 1.093l12.25-10.517c.627-.539.246-1.567-.58-1.567h-6.93L22.91 8.79z"
clip-rule="evenodd"
fill-rule="evenodd"
></path>
<defs>
<linearGradient
gradientUnits="userSpaceOnUse"
y2="36"
x2="18"
y1="0"
x1="18"
id="icon-lightning-cat_svg__paint0_linear_379_8580"
>
<stop stop-opacity="0.71" stop-color="#fff"></stop>
<stop stop-opacity="0" stop-color="#fff" offset="1"></stop>
</linearGradient>
</defs>
</svg>
</div>
<span class="button__text">Lightning</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);
}