mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
54 lines
843 B
HTML
54 lines
843 B
HTML
<button class="button">
|
|
glitch
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by r7chardgh - Tags: button, hover, glitch */
|
|
.button {
|
|
position: relative;
|
|
border: 0;
|
|
padding: 1em 2em;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
outline: .5em solid #fff;
|
|
outline-offset: -.3em;
|
|
color: #fff;
|
|
background-color: #333;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.button:hover {
|
|
animation: shake 500ms infinite,glitch 400ms infinite steps(4);
|
|
}
|
|
|
|
@keyframes shake {
|
|
0% {
|
|
}
|
|
|
|
25% {
|
|
transform: translate(-.1em,-.1em);
|
|
}
|
|
|
|
50% {
|
|
transform: translate(.3em,0);
|
|
}
|
|
|
|
75% {
|
|
transform: translate(0,.3em);
|
|
}
|
|
|
|
100% {
|
|
}
|
|
}
|
|
|
|
@keyframes glitch {
|
|
from {
|
|
box-shadow: .8em .8em rgba(240, 84, 219),
|
|
-.8em -.8em rgba(84, 240, 232);
|
|
}
|
|
|
|
to {
|
|
text-shadow: .3em .2em rgba(240, 84, 219),
|
|
-.3em -.2em rgba(84, 240, 232);
|
|
}
|
|
}
|
|
</style>
|