mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
122 lines
No EOL
3 KiB
HTML
122 lines
No EOL
3 KiB
HTML
<label for="button" class="label">
|
|
<button id="button" class="button" name="button">
|
|
<div class="roundThing">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="33"
|
|
height="32"
|
|
fill="none"
|
|
viewBox="0 0 33 32"
|
|
class="svg"
|
|
>
|
|
<path
|
|
stroke="#161616"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="m10.367 8.427 11.32-3.774c5.08-1.693 7.84 1.08 6.16 6.16l-3.774 11.32c-2.533 7.614-6.693 7.614-9.226 0l-1.12-3.36-3.36-1.12c-7.614-2.533-7.614-6.68 0-9.226ZM13.98 18.2l4.773-4.786"
|
|
></path>
|
|
</svg>
|
|
<p>Send Message</p>
|
|
</div>
|
|
</button>
|
|
</label>
|
|
|
|
<style>
|
|
/* From Uiverse.io by Uncannypotato69 - Tags: simple, button, hover, light, modern, click, btn, simple button */
|
|
.button {
|
|
height: fit-content;
|
|
width: fit-content;
|
|
background-color: #ebebeb;
|
|
border-radius: 1rem;
|
|
padding: 0.5em;
|
|
position: relative;
|
|
z-index: 1;
|
|
transition: all 200ms;
|
|
outline: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.label {
|
|
--shadow-color: 0deg 0% 73%;
|
|
--shadow: 0px 0.3px 0.4px hsl(var(--shadow-color) / 0.21),
|
|
0.1px 1.7px 2px -0.3px hsl(var(--shadow-color) / 0.23),
|
|
0.1px 3.1px 3.7px -0.7px hsl(var(--shadow-color) / 0.24),
|
|
0.2px 5.2px 6.2px -1px hsl(var(--shadow-color) / 0.26),
|
|
0.3px 8.5px 10.2px -1.3px hsl(var(--shadow-color) / 0.27),
|
|
0.5px 13.6px 16.3px -1.7px hsl(var(--shadow-color) / 0.29),
|
|
0.7px 21px 25.2px -2px hsl(var(--shadow-color) / 0.3);
|
|
--shadow-hover: 0px 0.5px 0.6px hsl(var(--shadow-color) / 0.2),
|
|
-0.1px 1.6px 1.9px -0.7px hsl(var(--shadow-color) / 0.22),
|
|
-0.2px 3.7px 4.4px -1.3px hsl(var(--shadow-color) / 0.25);
|
|
|
|
height: fit-content;
|
|
width: fit-content;
|
|
padding: 3px;
|
|
background-image: linear-gradient(to bottom, #dddedd, #7a7b7a);
|
|
border-radius: calc(1rem + 3px);
|
|
transition: all 300ms;
|
|
box-shadow: 0px 0px 0px 1px #fff, var(--shadow);
|
|
color: #161616;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.label:has(button:hover) {
|
|
transform: translate(0px, 4px);
|
|
box-shadow: 0px 0px 0px 1px #fff, var(--shadow-hover);
|
|
}
|
|
|
|
.label:has(button:active) {
|
|
transform: translate(0px, 8px);
|
|
box-shadow: 0px 0px 0px 1px #fff;
|
|
}
|
|
|
|
.roundThing {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: fit-content;
|
|
width: fit-content;
|
|
gap: 0.5em;
|
|
padding: 1em;
|
|
border-radius: 2rem;
|
|
box-shadow: inset 0px 16px 16px 0px #d8dad8, inset 0px -16px 16px 0px #f4f6f5;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.button:hover .roundThing {
|
|
box-shadow: inset 0px 8px 8px 0px #d8dad8, inset 0px -24px 24px 0px #f4f6f5;
|
|
transition: all 300ms;
|
|
}
|
|
|
|
.roundThing p {
|
|
font-weight: 700;
|
|
color: #161616;
|
|
letter-spacing: -0.03rem;
|
|
}
|
|
|
|
.svg {
|
|
height: 1.5rem;
|
|
aspect-ratio: 1/1;
|
|
transition: transform 300ms;
|
|
}
|
|
|
|
.button:hover .svg {
|
|
transform: rotate(45deg);
|
|
animation: onHover 750ms ease infinite both;
|
|
animation-delay: 300ms;
|
|
}
|
|
|
|
.button:active .svg {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
@keyframes onHover {
|
|
50% {
|
|
translate: 4px;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|