#212121
1button,button::after { 2 padding: 10px 50px; 3 font-size: 20px; 4 border: none; 5 border-radius: 5px; 6 color: white; 7 background-color: transparent; 8 position: relative; 9} 10 11button::after { 12 --move1: inset(50% 50% 50% 50%); 13 --move2: inset(31% 0 40% 0); 14 --move3: inset(39% 0 15% 0); 15 --move4: inset(45% 0 40% 0); 16 --move5: inset(45% 0 6% 0); 17 --move6: inset(14% 0 61% 0); 18 clip-path: var(--move1); 19 content: 'GLITCH'; 20 position: absolute; 21 top: 0; 22 left: 0; 23 right: 0; 24 bottom: 0; 25 display: block; 26} 27 28button:hover::after { 29 animation: glitch_4011 1s; 30 text-shadow: 10 10px 10px black; 31 animation-timing-function: steps(2, end); 32 text-shadow: -3px -3px 0px #1df2f0, 3px 3px 0px #E94BE8; 33 background-color: transparent; 34 border: 3px solid rgb(0, 255, 213); 35} 36 37button:hover { 38 text-shadow: -1px -1px 0px #1df2f0, 1px 1px 0px #E94BE8; 39} 40 41button:hover { 42 background-color: transparent; 43 border: 1px solid rgb(0, 255, 213); 44 box-shadow: 0px 10px 10px -10px rgb(0, 255, 213); 45} 46 47@keyframes glitch_4011 { 48 0% { 49 clip-path: var(--move1); 50 transform: translate(0px,-10px); 51 } 52 53 10% { 54 clip-path: var(--move2); 55 transform: translate(-10px,10px); 56 } 57 58 20% { 59 clip-path: var(--move3); 60 transform: translate(10px,0px); 61 } 62 63 30% { 64 clip-path: var(--move4); 65 transform: translate(-10px,10px); 66 } 67 68 40% { 69 clip-path: var(--move5); 70 transform: translate(10px,-10px); 71 } 72 73 50% { 74 clip-path: var(--move6); 75 transform: translate(-10px,10px); 76 } 77 78 60% { 79 clip-path: var(--move1); 80 transform: translate(10px,-10px); 81 } 82 83 70% { 84 clip-path: var(--move3); 85 transform: translate(-10px,10px); 86 } 87 88 80% { 89 clip-path: var(--move2); 90 transform: translate(10px,-10px); 91 } 92 93 90% { 94 clip-path: var(--move4); 95 transform: translate(-10px,10px); 96 } 97 98 100% { 99 clip-path: var(--move1); 100 transform: translate(0); 101 } 102} 103 104
9.1K views
9.1K views
Comments
2jpausa 1. August at 17:42
1. August at 17:42
Cool! But what if I want to change the 'Glitch' text dynamically ?
SteveBloX
Pro
22. August at 7:1922. August at 7:19
@jpausa What do you mean?
MIT License