半円形 アシメトリックメニュー
濃紺の円形ボタンに白い 3 本線を収め、開いた状態で上下の線が 中央へ向かって弧を描くように寄って閉じる 、曲線的でアシメトリックな開閉アニメのメニューです。 transform-origin:left center を基準に各線を回転・移動させ、長さも 14px へ縮めることで、まっすぐな X とは違う柔らかいシ…
解説
濃紺の円形ボタンに白い 3 本線を収め、開いた状態で上下の線が中央へ向かって弧を描くように寄って閉じる、曲線的でアシメトリックな開閉アニメのメニューです。transform-origin:left center を基準に各線を回転・移動させ、長さも 14px へ縮めることで、まっすぐな X とは違う柔らかいシルエットを作ります。cubic-bezier(.7,0,.3,1) の緩急が曲線的な印象を強めます。動作は CSS が担い、JavaScript は aria-pressed の切り替えのみです。
映えるシーン
- アート・写真・デザイン系のクリエイティブサイト
- 個性的な動きで記憶に残したいブランド表現
- 装飾性の高いポートフォリオのヘッダー
円の地色 #1a1a2e と線の白は反転させても成立します。線の寄り具合は translate と rotate(38deg) 系の値で決まり、角度を変えると閉じ方の表情が変わります。動きが大きめなので、prefers-reduced-motion 環境では回転量を抑えるか、シンプルな X 変形に置き換えると見やすさを保てます。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
円の色と線の色を入れ替えられますか？
はい。ボタンの背景 #1a1a2e と線の白は、互いに入れ替えても成立します。明るい円に濃い線の配色にしたい場合は、背景を明色、i の background を濃色に変更してください。
通常のまっすぐな X 形にもできますか？
できます。上下の線の rotate 角度を 45 度系に、translate の値を中央寄せに調整すれば、曲線的な印象を抑えてオーソドックスな X 形に近づけられます。