扇形に展開シェアボタン
クリックすると複数のシェアアイコンが扇形（弧）を描いて飛び出すボタンです。メインボタンの onclick で is-on クラスを付け外しし、各アイコンは --i というインデックス変数を持って transition-delay をずらすことで、順番にパッと開く動きを作っています。
解説
クリックすると複数のシェアアイコンが扇形（弧）を描いて飛び出すボタンです。メインボタンの onclick で is-on クラスを付け外しし、各アイコンは --i というインデックス変数を持って transition-delay をずらすことで、順番にパッと開く動きを作っています。アイコンの位置は親要素の左上を基準に transform: translate() で散らしているため、JavaScript はトグル一行だけで済みます。
使う場面
- 記事やLPの末尾に置くSNSシェアの導線
- 普段は1つの丸に畳んで省スペースにしたいフローティングメニュー
- ポートフォリオやイベントページの遊び心ある共有ボタン
展開する数を増やすときは --i の値と translate の座標を足していきます。閉じている間はアイコンを pointer-events:none にして誤クリックを防いでいる点が実用上のポイントです。アクセシビリティ面では、装飾文字のアイコンを実際のリンクにする際に aria-label を添え、開閉状態を aria-expanded で伝えると、キーボードや読み上げ環境でも扱いやすくなります。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
展開するアイコンの数を増やせますか？
増やせます。HTMLにシェア用の要素を追加し、それぞれの --i の値を連番で振り、CSSの translate 座標を弧に沿うように足していけば、好きな数だけ展開できます。
JavaScriptは必須ですか？
開閉のトグルにJavaScriptを1行使っています。チェックボックスのチェック状態をCSSのセレクタで拾う方法に置き換えれば、JavaScriptなしの実装も可能です。