پیشنمایش زنده
کد HTML
<button class="button">
<svg class="saveicon" stroke="currentColor" stroke-width="1.7" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m8.25 3v6.75m0 0l-3-3m3 3l3-3M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" stroke-linejoin="round" stroke-linecap="round"></path>
</svg>
download
</button>
کد CSS
.button {
padding: 12px 19px;
border: none;
color: rgb(16, 52, 170);
cursor: pointer;
background-color: rgb(190, 219, 253);
border-radius: 7px;
font-weight: bold;
transition: 0.5s;
display: flex;
gap: 4px;
align-items: center;
font-size: 13px;
box-shadow: rgba(150, 143, 143, 0.2) 0px 2px 8px 0px;
}
.button:hover {
background-color: rgb(164, 206, 253);
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}
.saveicon {
width: 17px;
}