پیشنمایش زنده
کد HTML
<button class="button">
<svg class="w-6 h-6" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" stroke-linejoin="round" stroke-linecap="round"></path>
</svg>
<span class="text">
Button
</span>
</button>
کد CSS
.button {
width: 10em;
height: 3em;
border-radius: 8px;
border: 0.15em solid rgb(162, 63, 255);
color: rgb(162, 63, 255);
background-color: #00000000;
transition: all 0.5s ease;
}
.button .text {
display: none
}
.button:hover>.text {
display: block;
}
.button:hover>svg {
display: none;
}
.button:hover {
background-color: rgb(162, 63, 255);
color: #fff
}
.button svg {
width: 1.5em;
margin-top: 3px;
}