پیشنمایش زنده
کد HTML
<button class="cart-button">
<div class="glass-effect"></div>
<span class="button-text">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 80 9"
height="19"
width="170"
>
<path
fill="currentColor"
d="M2.976 6.956V4.916H0.804V3.716H2.976V1.412H4.2V3.716H6.384V4.916H4.2V6.956H2.976ZM10.3177 8.144V2.6H11.4097V1.52H12.4897V0.427999H13.7137V1.52H14.7937V2.6H15.8977V8.144H14.6737V5.972H11.5297V8.144H10.3177ZM11.5297 4.76H14.6737V2.72H13.5937V1.64H12.6097V2.72H11.5297V4.76ZM18.4409 8.144V7.064H17.3489V3.692H18.4409V2.6H21.7169V0.427999H22.9289V7.064H21.8249V8.144H18.4409ZM18.5609 6.944H21.7049V3.8H18.5609V6.944ZM25.2378 8.144V7.064H24.1458V3.692H25.2378V2.6H28.5138V0.427999H29.7258V7.064H28.6218V8.144H25.2378ZM25.3578 6.944H28.5018V3.8H25.3578V6.944ZM35.7514 8.144V7.064H34.6714V3.8H33.5794V2.6H34.6714V0.427999H35.8714V2.6H39.1594V3.8H35.8714V6.944H39.0394V5.852H40.2514V7.064H39.1594V8.144H35.7514ZM42.4292 8.144V7.064H41.3372V3.692H42.4292V2.6H45.8132V3.692H46.9172V7.064H45.8132V8.144H42.4292ZM42.5492 6.944H45.6932V3.8H42.5492V6.944ZM51.8628 8.144V7.064H50.7708V3.692H51.8628V2.6H55.2468V3.692H56.3508V4.88H55.1268V3.8H51.9828V6.944H55.1268V5.852H56.3508V7.064H55.2468V8.144H51.8628ZM58.5308 8.144V7.064H57.4388V3.692H58.5308V2.6H61.9148V3.692H63.0188V6.944H64.1108V8.144H62.8988V7.064H61.9148V8.144H58.5308ZM58.6508 6.944H61.7948V3.8H58.6508V6.944ZM65.5598 8.144V3.692H66.6518V2.6H70.0358V3.692H71.1398V4.88H69.9158V3.8H66.7718V8.144H65.5598ZM74.7631 8.144V7.064H73.6831V3.8H72.5911V2.6H73.6831V0.427999H74.8831V2.6H78.1711V3.8H74.8831V6.944H78.0511V5.852H79.2631V7.064H78.1711V8.144H74.7631Z"
></path>
</svg>
</span>
</button>
کد CSS
.cart-button {
position: relative;
padding: 0.8em 0.7em;
font-family: Courier, monospace;
font-size: 1.1em;
color: #d0d0d0;
cursor: pointer;
line-height: 1;
background: transparent;
border-radius: 0.77em;
border: none;
transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
transform-style: preserve-3d;
isolation: isolate;
}
.glass-effect {
position: absolute;
inset: -0.45em;
border-radius: 1rem;
background: linear-gradient(
165deg,
rgba(255, 255, 255, 0.1),
transparent 30%,
transparent 80%,
rgba(255, 255, 255, 0.05)
);
z-index: -3;
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.5),
inset 0 -1px 1px rgba(0, 0, 0, 0.3),
0 0 20px 1px rgb(0 0 0 / 20%);
transition: box-shadow 0.12s ease;
}
.cart-button::before {
content: "";
position: absolute;
inset: -0.8em;
background: radial-gradient(
circle at top center,
rgba(255, 225, 135, 0.5) 0%,
transparent 50%
),
radial-gradient(
circle at top left,
rgba(102, 245, 240, 0.5) 0%,
transparent 50%
),
radial-gradient(
circle at top right,
rgba(255, 134, 103, 0.5) 0%,
transparent 50%
),
radial-gradient(
circle at bottom center,
rgba(147, 112, 219, 0.5) 0%,
transparent 80%
);
border-radius: inherit;
filter: blur(0.3em);
opacity: 0.8;
z-index: -2;
transition: all 0.12s ease;
}
.cart-button::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(#363636, #242424);
border-radius: inherit;
z-index: -1;
}
.button-text {
position: relative;
background: linear-gradient(#242424, #363636);
padding: 0.85em 1.4em;
border: none;
border-radius: 999em;
display: block;
-webkit-user-select: none;
user-select: none;
z-index: 2;
transition: all 0.12s ease;
}
/* Hover эффекты */
.cart-button:hover {
transform: translateY(-2px);
}
.cart-button:hover .glass-effect {
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.6),
inset 0 -1px 1px rgba(0, 0, 0, 0.3),
0 0 30px 2px rgb(0 0 0 / 30%);
}
.cart-button:hover::before {
opacity: 1;
filter: blur(0.4em);
transform: scale(1.05);
}
.cart-button:hover .button-text {
transform: scale(1.02);
}
.cart-button:hover::before {
opacity: 1;
}
/* Active эффекты */
.cart-button:active {
transform: translateY(3px) scale(0.95);
transition: transform 0.08s cubic-bezier(0.4, 0, 0.2, 1);
}
.cart-button:active .glass-effect {
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.3),
inset 0 -1px 1px rgba(0, 0, 0, 0.2),
0 0 15px 0 rgb(0 0 0 / 20%);
opacity: 0.2;
transition: all 0.3s ease;
}
.cart-button:active::before {
opacity: 1;
filter: blur(1em);
transform: scale(1.1);
inset: -0.45em;
transition: all 0.08s ease;
}
.cart-button:active .button-text {
transform: scale(0.92);
background: linear-gradient(#1a1a1a, #2a2a2a);
transition: all 0.08s ease;
}
/* Focus эффекты */
.cart-button:active {
outline: none;
}