پیشنمایش زنده
کد HTML
<button class="btn-save">
<svg viewBox="0 0 384 512" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 48C0 21.5 21.5 0 48 0l0 48V441.4l130.1-92.9c8.3-6 19.6-6 27.9 0L336 441.4V48H48V0H336c26.5 0 48 21.5 48 48V488c0 9-5 17.2-13 21.3s-17.6 3.4-24.9-1.8L192 397.5 37.9 507.5c-7.3 5.2-16.9 5.9-24.9 1.8S0 497 0 488V48z"></path></svg>
</button>
کد CSS
.btn-save {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
border: none;
border-radius: 4px;
background-color: #f2f2f2;
color: #333;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn-save:hover {
background-color: #ddd;
}
.icon {
width: 24px;
height: 24px;
margin-right: 8px;
}
.icon-path {
fill: #333;
transition: fill 0.3s ease;
}
.btn-save:hover .icon-path {
fill: #888;
}