スキュー（傾き）ホバーボタン
このボタンは、ホバーした瞬間にボタン全体を transform: skewX(-12deg) で左に傾け、平行四辺形にする CSS のみの部品です。同時に内側の span を逆向きの skewX(12deg) で打ち消すため、枠は斜めでも文字はまっすぐ読めるのがポイントです。
解説
このボタンは、ホバーした瞬間にボタン全体を transform: skewX(-12deg) で左に傾け、平行四辺形にする CSS のみの部品です。同時に内側の span を逆向きの skewX(12deg) で打ち消すため、枠は斜めでも文字はまっすぐ読めるのがポイントです。transition には跳ね気味のイージング（cubic-bezier）を使い、背景色も濃紺からピンク系へ切り替わるので、瞬間的なインパクトが生まれます。
使う場面
- アパレルやセレクトショップの「SHOP」「COLLECTION」など鋭さを出したい CTA
- アート・ポートフォリオサイトのキービジュアル下の導線
- イベント告知ページの「申し込む」など勢いを見せたいボタン
カスタマイズは skewX の角度を調整すれば傾きの強さを変えられ、外側と内側で必ず符号を反転させるのがコツです。傾きが大きいとクリック領域の感覚がずれるため、角度は控えめにします。動きの揺れが苦手な人向けに、prefers-reduced-motion で transform を無効化し色変化だけ残す配慮も入れておくと安心です。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
文字まで斜めにならないのはなぜですか
ボタン本体を傾けると同時に、中の span を逆向きに同じ角度だけ傾けて打ち消しているためです。span の skewX の符号を本体と逆にしておけば、枠は斜め・文字はまっすぐを保てます。
傾きの強さや色を変えられますか
変えられます。skewX の角度の数値を大きくすると傾きが強まり、本体と内側 span は必ず符号を反転させてください。ホバー時の background の色を差し替えればブランドカラーに合わせられます。