ボーダー描画アニメボタン
このボタンは、ホバーすると枠線が一筆書きのように上・右・下・左の順で描かれていくトレースアニメです。4 辺それぞれを i 要素として絶対配置し、上下は width 、左右は height をホバーで 0 から 100% へ伸ばします。
解説
このボタンは、ホバーすると枠線が一筆書きのように上・右・下・左の順で描かれていくトレースアニメです。4 辺それぞれを i 要素として絶対配置し、上下は width、左右は height をホバーで 0 から 100% へ伸ばします。各辺に transition-delay を 0 / 0.3 / 0.6 / 0.9 秒と段階的に付けることで、線が辺をなぞって一周する印象を作っています。JavaScript は不要で、CSS のトランジションだけで動きます。
使う場面
- クリエイティブ系スタジオやデザイン会社のトップにある「VIEW WORK」
- 暗い背景のヒーローに置く、線で輪郭を見せたい CTA
- テック・スタートアップの資料請求やデモ申し込みボタン
色を変えるときは 4 本の線の background をまとめて差し替えます。一周にかかる時間は各 transition-delay の合計で決まるので、速くしたい場合は遅延の刻みを小さくします。線の太さは height・width の 2px を調整します。マウスを当てる前は線が見えないため、文字色とのコントラストを確保し、ホバーできない環境でも本文が読めるようにしておきます。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
線がなぞる順番や速さを変えられますか
各辺の transition-delay の値で順番と速さが決まります。0 / 0.3 / 0.6 / 0.9 秒の刻みを小さくすると一周が速くなり、順番を入れ替えたい場合は遅延の割り当てを変えてください。
JavaScript は必要ですか
不要です。4 辺の幅と高さをホバーで伸ばす CSS のトランジションだけで動作します。HTML には辺用の i 要素が 4 つ含まれている点だけ確認してください。