پیشنمایش زنده
کد HTML
<button class="button">
<span class="btn__icon">
<svg stroke-linejoin="round" stroke-linecap="round" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path fill="none" d="M0 0h24v24H0z" stroke="none"></path>
<path d="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1"></path>
<path d="M9 15l3 -3l3 3"></path>
<path d="M12 12l0 9"></path>
</svg>
</span>
<span class="btn__text">Upload</span>
</button>
کد CSS
.button {
--bg: linear-gradient(180deg,
hsla(0, 0%, 100%, .1),
hsla(0, 0%, 100%, 0)),
hsl(128, 52%, 45%);
box-shadow: 0 1px 2px #25114f66, 0 0 0 1px hsla(128, 50%, 45%, 0.761);
background-color: transparent;
border: none;
line-height: 1;
display: flex;
align-items: center;
gap: .5rem;
padding: .25rem .5rem;
cursor: pointer;
padding-right: 1rem;
font-weight: 600;
color: #fff;
background: var(--bg);
white-space: nowrap;
border-radius: 6px;
border: 1px solid #fff3;
}