グリッチエフェクトボタン
ホバーすると文字が 赤紫とシアンの 2 色に分裂し、デジタルノイズのように細かく震える グリッチエフェクトです。仕掛けは ::before と ::after の疑似要素で、 data-text 属性に入れた同じ文字を content:attr(data-text) で複製。
解説
ホバーすると文字が赤紫とシアンの 2 色に分裂し、デジタルノイズのように細かく震えるグリッチエフェクトです。仕掛けは ::before と ::after の疑似要素で、data-text 属性に入れた同じ文字を content:attr(data-text) で複製。それぞれを別の色にして本体に重ね、clip-path で上半分と下半分に切り分け、@keyframes で translate をわずかにずらし続けることで、映像が乱れたような揺れを生み出しています。
映えるサイト
- ゲームや eスポーツ、配信系のテック寄りなサイト
- サブカル・ストリート系のブランドや LP
- 近未来・サイバーパンクなトーンのキービジュアル周り
分裂する色は #f093fb と #0ff の部分で変えられ、震えの幅は @keyframes 内の translate の値で調整します。文字を変えるときは、表示テキストと data-text 属性を必ず同じにしてください。注意点として、激しい点滅・振動は刺激が強いので、長時間動かさず、prefers-reduced-motion で揺れを止める配慮があると安全です。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
ボタンの文字を変えるとき注意点はありますか
表示テキストと data-text 属性の両方を同じ文字に揃える必要があります。data-text を更新し忘れると、分裂して震える文字だけ古いままになり表示がずれてしまいます。
グリッチの色や震えの強さは変えられますか
色は ::before と ::after に指定した #f093fb と #0ff を書き換えれば変わります。震えの幅は @keyframes 内の translate の値を増やすと激しく、減らすと控えめになります。