mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
40 lines
856 B
HTML
40 lines
856 B
HTML
<button>BUTTON</button>
|
|
<style>
|
|
/* From Uiverse.io by AqFox - Tags: 3d, blue, button, glossy */
|
|
button {
|
|
--c: #fff;
|
|
/* text color */
|
|
background: linear-gradient(90deg, #0000 33%, #fff5, #0000 67%) var(--_p,100%)/300% no-repeat,
|
|
#004dff;
|
|
/* background color */
|
|
color: #0000;
|
|
border: none;
|
|
transform: perspective(500px) rotateY(calc(20deg*var(--_i,-1)));
|
|
text-shadow: calc(var(--_i,-1)* 0.08em) -.01em 0 var(--c),
|
|
calc(var(--_i,-1)*-0.08em) .01em 2px #0004;
|
|
outline-offset: .1em;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
button:hover,
|
|
button:focus-visible {
|
|
--_p: 0%;
|
|
--_i: 1;
|
|
}
|
|
|
|
button:active {
|
|
text-shadow: none;
|
|
color: var(--c);
|
|
box-shadow: inset 0 0 9e9q #0005;
|
|
transition: 0s;
|
|
}
|
|
|
|
button {
|
|
font-family: system-ui, sans-serif;
|
|
font-weight: bold;
|
|
font-size: 2rem;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
padding: .1em .3em;
|
|
}
|
|
</style>
|