ボタン２
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。 その中でも特に勉強になったコードを紹介します。 コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。 あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
ボタン
ボタン演出の第2弾は、線から塗りへ・角丸へ変形・矢印が動く――といった「形の変化」を主役にしたバリエーション集です。第1弾の押した感の演出に対し、こちらはホバーで期待感をつくる、CTAらしい表情づけが中心になっています。
特に「矢印が動く」系は、ボタンの文言を変えずに“先へ進む”ニュアンスを足せるため、実案件のCTAボタンで最も使い回しの利くパターンです。
前回に引き続きボタンのパターンを紹介いたします。
おさえておきたいところ
ボタンを使う目的と使いどころはこんな感じです。
目的：ユーザーにアクションを起こさせる
使いどころ：マウスオーバー / クリック
線から塗りに変化①
線から塗りに変化②
グラデーション変化
線が伸びる
塗りから線に変わる
角丸に変わる
丸がボタンに変形する
表示するテキストが切り替わる
ボタン内の矢印が動く
矢印が右に移動して背景がつく
矢印が縮む
実務メモ（2026年追記）
保守の観点では、この種の演出は疑似要素とtransformの組み合わせでほぼ完結しているため壊れにくく、テーマを乗り換えてもCSSごと移植しやすいのが利点です。注意点はただひとつ、装飾を足すほどボタンの本業――「何が起きるか一目で分かる」――が薄れないようにすること。文言とコントラストが主、動きは従です。
- 変形時にボタンのサイズが変わるとレイアウトが揺れる。外形は固定し、中身だけ動かす
- ホバー前の状態だけで「押せる見た目」が成立していること（演出前提にしない）
- CTAは1画面に主ボタン1つが原則。演出は主ボタンにだけ強く
- クリック感の演出はボタン１を参照