پیشنمایش زنده
کد HTML
<button class="button">
<p class="text">
Download
</p>
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" fill="white" class="bi bi-download" viewBox="0 0 16 16"> <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"></path> <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"></path> </svg>
</div>
</button>
کد CSS
.button {
padding: 0.8rem 4rem;
border: none;
outline: none;
font-size: 1.3rem;
border-radius: 0.3rem;
font-weight: 600;
background-color: rgba(255, 255, 255, 0.953);
position: relative;
overflow: hidden;
cursor: pointer;
transition: 0.4s ease-in-out;
}
.button .text {
position: absolute;
left: 1.8rem;
top: 1.3rem;
transition: 0.4s ease-in-out;
color: rgb(50, 50, 50);
}
.svg {
transform: translateY(-20px) rotate(30deg);
opacity: 0;
width: 2rem;
transition: 0.4s ease-in-out;
}
.button:hover {
background-color: rgb(50, 50, 50);
}
.button:hover .svg {
display: inline-block;
transform: translateY(0px) rotate(0deg);
opacity: 1;
}
.button:hover .text {
opacity: 0;
}
.button:active {
scale: 0.97;
}