پیشنمایش زنده
کد HTML
<button>
<svg class="css-i6dzq1" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2" stroke="currentColor" height="24" width="24" viewBox="0 0 24 24">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
</svg>
Click me
</button>
کد CSS
button {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: inherit;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.8px;
color: #ffffff;
background-color: #ff5f5f;
border-style: none;
border-radius: 8px;
padding: 16px 24px;
transform: scale(1);
transition: 0.2s;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
button:hover {
background-color: #ff3b3b;
box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2);
}
button:active {
transform: scale(0.95);
box-shadow: none;
}