中央寄り → 広がる伸縮型
閉時は中央寄りの短い 3 本線、開時は端まで広がって X 形になる。スペース感を演出するミニマル設計。
解説
中央寄り → 広がる伸縮型は、UI コンポーネントカテゴリの「ボタン」に分類される実装パターンです。CSS と JavaScript の組み合わせで構成され、難易度は中級レベル。
閉時は中央寄りの短い 3 本線、開時は端まで広がって X 形になる。スペース感を演出するミニマル設計。
仕組み
下記コードタブから HTML / CSS / JS をそれぞれ確認・コピーできます。プレビュー領域では実際の動作をその場で確認可能です。
JavaScript 部分は vanilla（プレーン）JS で書かれており、jQuery / React / Vue いずれの環境にも持ち込めます。
注意点 / カスタマイズ時のポイント
ボタンクラスは BEM の __（modifier）で色違いを派生させる運用がおすすめ。:focus-visible のリングは消さずに残しておくとアクセシビリティが保てます。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
このスニペットは商用利用できますか？
はい。moatway がオリジナルで制作したスニペットは商用・個人問わず自由にご利用いただけます。クレジット表記も不要です。
そのまま貼り付ければ動きますか？
はい。HTML / CSS / JS タブのコードをそれぞれ自分のファイルにコピーして貼り付ければ動きます。クラス名が他の CSS と衝突しないよう、必要に応じてリネームしてください。
ブラウザ対応は？
最新 2 世代の Chrome / Safari / Firefox / Edge で動作確認しています。Internet Explorer はサポート対象外です。
jQuery でも書けますか？
この実装は vanilla JavaScript で書いています。jQuery が必要であれば
document.querySelector を $() に置き換える程度で動作しますが、近年は jQuery を使わない方が軽量で推奨されます。Web アクセシビリティ的に問題ありませんか？
<button> タグを使用しているため、キーボード Tab フォーカス・Enter / Space キー操作・スクリーンリーダー読み上げに対応します。フォーカスリングは visible のままにしておくことをおすすめします。