mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
42 lines
904 B
HTML
42 lines
904 B
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>
|
|
<style>
|
|
/* From Uiverse.io by reshades - Tags: button, hover, svg */
|
|
.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;
|
|
}
|
|
</style>
|