斜め切り取りコーナーボタン
このボタンは、 clip-path で右下の角を斜めに切り取ったシャープな部品です。 polygon() で多角形の頂点を指定し、四角形の右下だけを面取りした形にしています。ホバーすると背景色がシアンから白へ変わり、 clip-path の頂点も変化して切り取られる角が右下から右上側へ移るため、形そのものが動いて見…
解説
このボタンは、clip-path で右下の角を斜めに切り取ったシャープな部品です。polygon() で多角形の頂点を指定し、四角形の右下だけを面取りした形にしています。ホバーすると背景色がシアンから白へ変わり、clip-path の頂点も変化して切り取られる角が右下から右上側へ移るため、形そのものが動いて見えるのが特徴です。鋭い斜めのラインがテック・ゲーミングらしいクールな印象を作り、CSS のみで完結します。
使う場面
- ゲームやアプリの「ENTER」「START」などの起点ボタン
- SaaS やテック系ランディングの「無料で始める」CTA
- 近未来的なトーンのサイトでアクセントを付けたい導線
切り取る角度や位置は polygon() の頂点座標を変えて調整します。座標はパーセントで指定されているので、面取りを深くしたいときは内側へ寄せます。色はホバー前後の background で変えられます。clip-path の外側に出た部分はクリックできないため、形を大きく削るとボタンの当たり判定が見た目どおりに狭くなる点に注意します。動きを抑えたい場合は prefers-reduced-motion で形の変化を止め、色変化だけ残します。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
斜めの角はどうやって作っていますか
clip-path の polygon() で多角形の頂点を指定し、右下の角だけを面取りして切り取っています。画像や枠線ではなく形そのものを切り抜いているため、背景色がそのまま斜めの形になります。
切り取る角度や位置を変えられますか
polygon() の頂点座標を変えれば角度や位置を調整できます。座標はパーセント指定なので内側に寄せると面取りが深くなります。切り取った外側はクリックできないので削りすぎに注意してください。