CSSのスゴ技！シンプルなHTMLで実装されたボタン、グリッチエフェクトが厨二心をくすぐられるかっこよさ
Post on:2021年1月28日
sponsors
CSSのtext-shadowとbox-shadow、そしてclip-pathを使用してノイズをつけ、ジジッと動かすグリッチエフェクトのボタンを紹介します。
今年もCSSの進化が楽しみですね！
CSSだけで実装されたグリッチエフェクト
実際の動作は、下記ページでご覧ください。
上のボタンだけでなく、下のボタンでもグリッチエフェクトが楽しめます。
See the Pen
Pure CSS Cyberpunk 2077 Buttons 😎 by Jhey (@jh3y)
on CodePen.
実装方法の解説は、下記ページから。
ボタンの基本的な形を実装するところから、詳しく解説されています。
最終的な実装コードは、下記の通り。
HTMLは、思っていたよりシンプルです。
|
1 2 3 4 5 6 7 8 9 10 |
<button class="cybr-btn"> Cyber<span aria-hidden>_</span> <span aria-hidden class="cybr-btn__glitch">Cyber_</span> <span aria-hidden class="cybr-btn__tag">R25</span> </button> <button class="cybr-btn"> Buttons<span aria-hidden>_</span> <span aria-hidden class="cybr-btn__glitch">Buttons_</span> <span aria-hidden class="cybr-btn__tag">R25</span> </button> |
CSSは、けっこう長いです。
@keyframesのアニメーションで、ノイズをジジッと動かしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 |
@font-face { font-family: Cyber; src: url("https://assets.codepen.io/605876/Blender-Pro-Bold.otf"); font-display: swap; } * { box-sizing: border-box; } body { display: flex; align-items: center; flex-direction: column; justify-content: center; min-height: 100vh; font-family: 'Cyber', sans-serif; background: linear-gradient(90deg, #f5ed00 70%, #e6de00 70%), #fff700; } body .cybr-btn + .cybr-btn { margin-top: 2rem; } .cybr-btn { --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 1%)); --shadow-primary: hsl(var(--shadow-primary-hue), 90%, 50%); --primary-hue: 0; --primary-lightness: 50; --color: hsl(0, 0%, 100%); --font-size: 26px; --shadow-primary-hue: 180; --label-size: 9px; --shadow-secondary-hue: 60; --shadow-secondary: hsl(var(--shadow-secondary-hue), 90%, 60%); --clip: polygon(0 0, 100% 0, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 70%); --border: 4px; --shimmy-distance: 5; --clip-one: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%); --clip-two: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%); --clip-three: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%); --clip-four: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0); --clip-five: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0); --clip-six: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%); --clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%); font-family: 'Cyber', sans-serif; color: var(--color); cursor: pointer; background: transparent; text-transform: uppercase; font-size: var(--font-size); outline: transparent; letter-spacing: 2px; position: relative; font-weight: 700; border: 0; min-width: 300px; height: 75px; line-height: 75px; transition: background 0.2s; } .cybr-btn:hover { --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 0.8%)); } .cybr-btn:active { --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 0.6%)); } .cybr-btn:after, .cybr-btn:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; clip-path: var(--clip); z-index: -1; } .cybr-btn:before { background: var(--shadow-primary); transform: translate(var(--border), 0); } .cybr-btn:after { background: var(--primary); } .cybr-btn__tag { position: absolute; padding: 1px 4px; letter-spacing: 1px; line-height: 1; bottom: -5%; right: 5%; font-weight: normal; color: hsl(0, 0%, 0%); font-size: var(--label-size); } .cybr-btn__glitch { position: absolute; top: calc(var(--border) * -1); left: calc(var(--border) * -1); right: calc(var(--border) * -1); bottom: calc(var(--border) * -1); background: var(--shadow-primary); text-shadow: 2px 2px var(--shadow-primary), -2px -2px var(--shadow-secondary); clip-path: var(--clip); animation: glitch 2s infinite; display: none; } .cybr-btn:hover .cybr-btn__glitch { display: block; } .cybr-btn__glitch:before { content: ''; position: absolute; top: calc(var(--border) * 1); right: calc(var(--border) * 1); bottom: calc(var(--border) * 1); left: calc(var(--border) * 1); clip-path: var(--clip); background: var(--primary); z-index: -1; } @keyframes glitch { 0% { clip-path: var(--clip-one); } 2%, 8% { clip-path: var(--clip-two); transform: translate(calc(var(--shimmy-distance) * -1%), 0); } 6% { clip-path: var(--clip-two); transform: translate(calc(var(--shimmy-distance) * 1%), 0); } 9% { clip-path: var(--clip-two); transform: translate(0, 0); } 10% { clip-path: var(--clip-three); transform: translate(calc(var(--shimmy-distance) * 1%), 0); } 13% { clip-path: var(--clip-three); transform: translate(0, 0); } 14%, 21% { clip-path: var(--clip-four); transform: translate(calc(var(--shimmy-distance) * 1%), 0); } 25% { clip-path: var(--clip-five); transform: translate(calc(var(--shimmy-distance) * 1%), 0); } 30% { clip-path: var(--clip-five); transform: translate(calc(var(--shimmy-distance) * -1%), 0); } 35%, 45% { clip-path: var(--clip-six); transform: translate(calc(var(--shimmy-distance) * -1%)); } 40% { clip-path: var(--clip-six); transform: translate(calc(var(--shimmy-distance) * 1%)); } 50% { clip-path: var(--clip-six); transform: translate(0, 0); } 55% { clip-path: var(--clip-seven); transform: translate(calc(var(--shimmy-distance) * 1%), 0); } 60% { clip-path: var(--clip-seven); transform: translate(0, 0); } 31%, 61%, 100% { clip-path: var(--clip-four); } } .cybr-btn:nth-of-type(2) { --primary-hue: 260; } |
サイバーパンク2077は、RPGのゲームなんですね。
サイトでは同様のボタンやテキストで、グリッチエフェクトを楽しめます。
sponsors
