ボタンはだいたい長方形——そう思いこんでいませんか。clip-path を使うと、ボタンの形そのものを変えられます。矢印型、平行四辺形、六角形バッジ、ホバーするたびに形が変わるモーフィング。CSSだけで作れて、ブラウザサポートも問題なし。「ボタンのデザインにそこまで手をかけてないな」と感じているなら、形を変えることで一気に印象が変わります。
全5デモ、JavaScriptは一切なし。HTMLは <a> タグ1つ。CodePenにコピペして、そのままWordPressやWebサイトに持ってこられます。背景色やサイズは自由に調整できるので、自分のサイトカラーに合わせてみてください。
Arrow Right（アロー・ライト）
右側だけが矢印型に切り取られたボタンです。clip-path: polygon() の5点で形を定義していて、右端の中央1点だけを突き出す構造になっています。「続きを読む」「次のページへ」といった誘導系のCTAに使うと、視線の流れと形の向きが一致してクリック率が上がりやすいデザインです。
ホバーすると矢印の突き出し量が増し、「もっと前に進む」ような視覚的フィードバックを与えます。calc(100% - 20px) の数値を変えるだけで、矢印の鋭さが調整できます。
See the Pen Arrow Right by BaseKENT (@basekent) on CodePen.
調整方法
- 矢印の深さ:
calc(100% - 20px)の20pxを大きくすると鋭い矢印に、小さくすると緩やかな矢印になります - 背景色:
background: #3b82f6をお好みの色に変更してください - 右側の余白:
padding-rightを広めにとると矢印先端にテキストが被りにくくなります
Slant Cut（スラント・カット）
両端を斜めにカットした平行四辺形のボタンです。左上・右下の角を削ることで、前向きな勢いと動感が出ます。スポーツ系・テクノロジー系・スタートアップ系のサイトで見かけることが多く、「ありきたりな長方形じゃない感」を出したいときに重宝します。
ホバーすると右にわずかにスライドする動きが加わり、斜め形状の「進む」イメージをさらに強調します。
See the Pen Slant Cut by BaseKENT (@basekent) on CodePen.
調整方法
- 傾きの量:
polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%)の18pxを変えると斜めの角度が変わります - スライド距離:
:hoverのtransform: translateX(4px)の値を増やすと、より大きくスライドします - 背景色:
#10b981（エメラルド系）をブランドカラーに変えてください
Hexagon（ヘキサゴン）
左右の両端を六角形状にカットしたバッジ型ボタンです。polygon(8% 0%, 92% 0%, 100% 50%, 92% 100%, 8% 100%, 0% 50%) の6点で構成されていて、横長の六角形になります。バッジ・ラベル・タグ的な文脈で使うと自然で、「特別感」や「限定感」を醸し出したいときに効果的です。
ホバーで少し拡大する動きを加えていて、バッジのように「掴める感覚」を演出しています。
See the Pen Hexagon by BaseKENT (@basekent) on CodePen.
調整方法
- 六角形の比率:
width: 160pxとheight: 56pxの比率を変えると形が変わります。高さを大きくすると縦に近い六角形になります - カット量:
8%と92%の数値を15%・85%にするとより大きく切れ込んだ形に - 背景色:
#8b5cf6（バイオレット）をお好みのカラーに
Morph Hover（モーフ・ホバー）
通常時は長方形、ホバーすると右矢印に変形するボタンです。clip-path の同頂点数トリックを使っています——通常時も「5点で構成された長方形」として定義しておくことで、ホバー時の「5点の矢印形状」へ滑らかにアニメーションできます。点数が違うと clip-path のトランジションは効かないため、あらかじめ点数を揃えておくのがポイントです。
「普段は馴染む形、ホバーで意図を伝える」という二段構えで、さりげなく使えます。
See the Pen Morph Hover by BaseKENT (@basekent) on CodePen.
調整方法
- 変形の速度:
transition: clip-path 0.35sの秒数を変えると変形のテンポが変わります - 矢印の深さ:
:hoverのcalc(100% - 22px)の数値を大きくするほど深い矢印になります - 背景色:
#f43f5e（ローズ）をお好みのカラーに。明るい色ほど変形の印象が際立ちます
Reveal Clip（リビール・クリップ）
ページ読み込み時に左から右へワイプしながらボタンが現れるエントランスアニメーションです。clip-path: inset(0 100% 0 0) で完全に隠れた状態からスタートし、inset(0 0% 0 0) まで変化することで「ワイプインサート」の動きを作っています。clip-path の inset() は矩形の四辺それぞれをどれだけ切り取るかを指定するもので、右辺を100%→0%に動かすことで左から右へのリビール効果になります。
ファーストビューのCTAボタンや、スクロールアニメーションのトリガーと組み合わせると、サイトの第一印象が締まります。
See the Pen Reveal Clip by BaseKENT (@basekent) on CodePen.
調整方法
- アニメーション速度:
animation: reveal 0.6sの秒数を変えると出現の速さが変わります - 遅延:
0.3s（animationの3番目の値）を調整すると、ページ表示からボタンが現れるまでの間が変わります - 背景色:
#0f172a（ダークネイビー）を明るい色にすると、また違った印象のリビールになります
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
