پیشنمایش زنده
کد HTML
<div class="button">
<span>
<svg
class="button-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<defs>
<linearGradient y2="1" x2="0" id="gradient">
<stop stop-color="#96a1e8" offset="0%"></stop>
<stop stop-color="#5061be" offset="100%"></stop>
</linearGradient>
</defs>
<path
d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
fill="url(#gradient)"
></path>
</svg>
</span>
<span class="button-lines">
<span class="button-line-1"></span>
<span class="button-line-2"></span>
</span>
</div>
کد CSS
.button {
--background: #fefbff;
--inner-shadow: #9faef9;
--inner-outline: #34217d;
--inner-outline-bottom: #fafcfe;
--inner-outline-middle: #8880d5;
--inner-outline-outer-top: #fefcff;
--inner-outline-outer-bottom-1: #29107b;
--inner-outline-outer-bottom-2: #5b42c4;
--inner-outline-outer-bottom-3: #200265;
--line-1: #8676c9;
--line-2: #5c69ca;
display: flex;
gap: 0.4em;
align-items: center;
padding: 0.6em 0.8em;
transition: all 0.3s;
background: var(--background);
border-radius: 0.7em;
box-shadow: inset 0px 1px 8px 1px var(--inner-shadow),
0px 2px 0px 0px var(--inner-outline-bottom),
0px -2px 0px 0px var(--inner-outline),
-2px -2px 0px 0px var(--inner-outline),
2px -2px 0px 0px var(--inner-outline),
0px 0px 0px 6px var(--inner-outline-middle),
0px -2px 0px 7px var(--inner-outline-outer-top),
0px 4px 0px 7px var(--inner-outline-outer-bottom-1),
0px 7px 0px 7px var(--inner-outline-outer-bottom-2),
0px 10px 0px 7px var(--inner-outline-outer-bottom-3);
}
.button-icon {
display: inline-block;
vertical-align: top;
width: 1.5em;
}
.button-icon path {
stroke-width: 2px;
stroke: var(--inner-outline);
stroke-linejoin: round;
}
.button-lines {
display: flex;
flex-direction: column;
gap: 0.4em;
}
.button-line-1 {
height: 0.2em;
width: 4em;
border-radius: 10em;
display: inline-block;
background: var(--line-1);
}
.button-line-2 {
height: 0.2em;
width: 3em;
border-radius: 10em;
display: inline-block;
background: var(--line-2);
}