ボタン１

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

ボタン

ボタンのホバー・クリック演出は、「押せること」「押したこと」を伝えるフィードバックの技術です。このページは、背景が流れる・波紋が広がる・押し込まれる――といった動きのあるバリエーションを集めた第1弾で、特にクリック時の波紋（リップル）はマテリアルデザイン以降の定番になりました。

装飾のようでいて、ボタンの演出はコンバージョンに直結する部品です。「押した感」があるだけで操作の不安が減り、フォーム送信やCTAの完了率に効いてきます。

ボタンのパターンが多いため、２回に分けて紹介いたします。

おさえておきたいところ

ボタンを使う目的と使いどころはこんな感じです。

       目的：ユーザーにアクションを起こさせる
使いどころ：マウスオーバー / クリック

背景が流れる

くるっと回転

クリックしたら波紋が広がる

無限に波紋が広がる

波紋がふわっと広がる

押し込まれる（円が縮小）

下に押し込まれる&浮き上がる

実務メモ（2026年追記）

実装面の今の定石は3つ。hover演出は@media (hover: hover)でポインタ環境に限定する、キーボード操作には:focus-visibleで同等のフィードバックを返す、そして動きはtransform/opacity/box-shadowに絞って軽くする。この3点を押さえれば、当時のデモの演出はいまでもそのまま通用します。

• ボタンはリンクなら<a>、動作なら<button>。divのボタン化はしない
• 波紋などのJS演出が失敗しても、クリック自体は成立する作りに
• 色のコントラスト比4.5:1以上はホバー後の状態でも維持する
• テキストリンク寄りの装飾はテキストナビゲーションで扱っています

次回の予定

引き続きボタンを作ってみようと思います＼＼\٩( ‘ω’ )و //／／