پیشنمایش زنده
کد HTML
<div>
<button class="button">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-lightning-charge-fill"
viewBox="0 0 16 16"
>
<path
d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"
></path></svg
>button
</button>
</div>
کد CSS
.button {
--bezier: cubic-bezier(0.22, 0.61, 0.36, 1);
--edge-light: hsla(0, 0%, 30%, 0.8);
--text-light: rgba(255, 255, 255, 0.4);
--back-color: 220, 30%;
cursor: pointer;
padding: 0.7em 1em;
border-radius: 0.5em;
min-height: 2.4em;
min-width: 3em;
display: flex;
align-items: center;
gap: 0.5em;
font-size: 18px;
letter-spacing: 0.05em;
line-height: 1;
font-weight: bold;
background: linear-gradient(
140deg,
hsla(var(--back-color), 20%, 1) min(2em, 20%),
hsla(var(--back-color), 20%, 0.6) min(8em, 100%)
);
color: hsla(0, 0%, 80%);
border: 0;
box-shadow: inset 0.4px 1px 4px var(--edge-light);
transition: all 0.1s var(--bezier);
}
.button:hover {
--edge-light: hsla(0, 0%, 40%, 1);
text-shadow: 0px 0px 10px var(--text-light);
box-shadow:
inset 0.4px 1px 4px var(--edge-light),
2px 4px 8px hsla(0, 0%, 0%, 0.5);
transform: scale(1.1);
}
.button:active {
--text-light: rgba(255, 255, 255, 0.8);
background: linear-gradient(
140deg,
hsla(var(--back-color), 25%, 1) min(2em, 20%),
hsla(var(--back-color), 25%, 0.6) min(8em, 100%)
);
box-shadow:
inset 0.4px 1px 8px var(--edge-light),
0px 0px 8px hsla(var(--back-color), 30%, 0.6);
text-shadow: 0px 0px 20px var(--text-light);
color: hsla(0, 0%, 90%, 1);
letter-spacing: 0.1em;
transform: scale(1);
}