mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
44 lines
No EOL
1.9 KiB
HTML
44 lines
No EOL
1.9 KiB
HTML
<button class="button" type="submit">
|
|
<svg viewBox="0 0 576 512" class="svg" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z"
|
|
fill="#74C0FC"
|
|
></path>
|
|
</svg>
|
|
Hover Me
|
|
</button>
|
|
|
|
<style>
|
|
/* From Uiverse.io by vishal2231179 - Tags: button, light&dark, hover effect, hoverme, hover button, 3d button, button hover effect , generate button */
|
|
.button {
|
|
cursor: pointer;
|
|
/* padding: 15px; */
|
|
padding: 20px;
|
|
width: 190px;
|
|
/* background-color: rgb(43, 43, 43); */
|
|
border-radius: 30px;
|
|
font-weight: 600;
|
|
font-size: 20px;
|
|
border-style: double;
|
|
border-color: rgba(74, 61, 255, 0.753);
|
|
|
|
color: rgba(126, 185, 236, 0.968);
|
|
background-image: linear-gradient(to right, rgb(14, 15, 58), rgb(49, 3, 118));
|
|
/* border-color: rgb(67, 67, 67); */
|
|
transition: 300ms;
|
|
}
|
|
.button:hover {
|
|
border-color: rgb(100, 43, 215);
|
|
border-top-right-radius: 5%;
|
|
border-bottom-left-radius: 5%;
|
|
|
|
box-shadow: 0px 5px 10px 1px rgb(0, 0, 0);
|
|
font-size: 22px;
|
|
transition: 400px;
|
|
}
|
|
.svg {
|
|
height: 20px;
|
|
}
|
|
|
|
</style>
|
|
|