پیشنمایش زنده
کد HTML
<button class="download-btn">
<svg
id="download"
viewBox="0 0 24 24"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.29,17.29,13,18.59V13a1,1,0,0,0-2,0v5.59l-1.29-1.3a1,1,0,0,0-1.42,1.42l3,3a1,1,0,0,0,.33.21.94.94,0,0,0,.76,0,1,1,0,0,0,.33-.21l3-3a1,1,0,0,0-1.42-1.42ZM18.42,6.22A7,7,0,0,0,5.06,8.11,4,4,0,0,0,6,16a1,1,0,0,0,0-2,2,2,0,0,1,0-4A1,1,0,0,0,7,9a5,5,0,0,1,9.73-1.61,1,1,0,0,0,.78.67,3,3,0,0,1,.24,5.84,1,1,0,1,0,.5,1.94,5,5,0,0,0,.17-9.62Z"
></path>
</svg>
</button>
کد CSS
.download-btn {
border: 2px solid rgb(168, 38, 255);
background-color: white;
width: 50px;
height: 50px;
border-radius: 10px;
position: relative;
z-index: 1;
transition: all 0.2s ease;
cursor: pointer;
}
.download-btn svg {
width: 25px;
height: 25px;
transition: all 0.3s ease;
}
.download-btn:hover svg {
fill: white;
}
.download-btn:hover {
background-color: rgb(168, 38, 255);
}