アイコン回転ボタン
このボタンは、ホバーすると左の歯車アイコンが transform: rotate(90deg) で 90 度回転する設定ボタンです。アイコンはインライン SVG で埋め込まれているため外部読み込みが不要で、回転には跳ね気味のイージングを使い、止まる瞬間に少し戻るような気持ちよさを出しています。
解説
このボタンは、ホバーすると左の歯車アイコンが transform: rotate(90deg) で 90 度回転する設定ボタンです。アイコンはインライン SVG で埋め込まれているため外部読み込みが不要で、回転には跳ね気味のイージングを使い、止まる瞬間に少し戻るような気持ちよさを出しています。ホバー時には枠線と文字色もアクセントカラーへ変わり、操作可能であることが直感的に伝わります。文字とアイコンは inline-flex と gap で横並びにそろえています。
使う場面
- 管理画面やダッシュボードの「設定」ボタン
- 一覧の再読み込み・更新トリガー（回転で「処理」を連想させる）
- アプリのメニュー内オプション項目
回転角は rotate の数値で調整でき、180deg や 360deg にすると印象が変わります。アイコンは currentColor を使っているので、文字色を変えれば線の色も一緒に変わります。回転だけで状態を伝えると分かりにくい場面では、aria-label でボタンの目的を補い、動きが苦手な利用者向けに prefers-reduced-motion で回転を弱める配慮を入れると親切です。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
アイコンは別途読み込みが必要ですか
不要です。歯車アイコンは SVG として HTML に直接書かれているため、アイコンフォントや画像の外部読み込みなしで表示されます。stroke に currentColor を使っているので文字色に追従します。
回転する角度を変えられますか
ホバー時の rotate の数値を変えれば調整できます。90deg を 180deg や 360deg にすると一回転に近い動きになります。回転時間はアイコンの transition の秒数で決まります。