プラス → 回転して X になるシンプル型
丸いボタンの中央に置いた横棒と縦棒で + （プラス）を描き、クリックするとボタンごと 45 度回転して × 印 に切り替わるシンプルな開閉ボタンです。線そのものを動かすのではなく、ボタン全体に transform:rotate(45deg) をかけて十字を斜めにするだけなので構造が軽く、理解しやすいのが利点。
解説
丸いボタンの中央に置いた横棒と縦棒で +（プラス）を描き、クリックするとボタンごと 45 度回転して × 印に切り替わるシンプルな開閉ボタンです。線そのものを動かすのではなく、ボタン全体に transform:rotate(45deg) をかけて十字を斜めにするだけなので構造が軽く、理解しやすいのが利点。色は閉時のアクセント（#f5576c）から開時の #1a1a2e へ変わり、状態が一目でわかります。動作管理は aria-pressed の切り替えのみです。
応用しやすい用途
- 画面右下に固定するフローティングアクションボタン（FAB）
- FAQ やアコーディオンの開閉トリガー
- 追加・展開と閉じるを兼ねる円形ボタン
横棒・縦棒の長さは 22px、太さは 2.5px で、サイズを変えるときは両方を同じ比率で調整すると十字のバランスが崩れません。回転の速さは .4s が基準です。プラスとバツで意味が大きく変わるため、開閉に合わせて aria-label を更新すると支援技術に正しく伝わります。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
プラスとバツのアイコンの太さは変えられますか？
横棒（__h）と縦棒（__v）はそれぞれ height と width で太さを指定しています。両方を同じ値で太く／細くすれば、プラスとバツのバランスを保ったまま線の太さを調整できます。
FAQ の開閉ボタンにも使えますか？
使えます。プラスからバツへの回転は『開く・閉じる』を直感的に表すため、アコーディオンや FAQ のトグルにも自然に流用できます。aria-pressed をそのまま開閉状態に対応させてください。