こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
ボタンにひと工夫を加えるだけで、Webサイト全体の印象は大きく変わります。その中でもおすすめなのが、「水滴のようにぷるんと跳ねるアニメーション」です。
シンプルなボタンでも、クリックやホバーした瞬間にまるで水滴が弾けるように動けば、視覚的な楽しさとインタラクションの心地よさが生まれます。
この記事では、CSSだけで実装できる「水滴風ボタンエフェクト」の作り方を解説します。
水滴風アニメーションのポイント
この表現の肝は「scale（拡大縮小）」と「transform-origin（変形の基準点）」を組み合わせ、弾力のある動きを演出することです。
- 拡大 → 縮小 → 軽く反発、という動きを段階的に作る
- transitionではなく@keyframesを使って自然な動きを演出
- 丸みのあるボタンにすることで水滴らしさを強調
実装コード
以下のコードをコピペするだけで、シンプルな「水滴風ボタン」が再現できます。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このアニメーションでは「縦横の比率をずらしながら拡縮」させることで、水滴のように跳ねる動きを再現しています。
応用アレンジ
もっと個性的にしたい場合は、以下のアレンジがおすすめです。
- 色を変える — 水色だけでなく、ピンクやグリーンを使えばカラフルで楽しい印象に。
- 光沢を追加 — box-shadowやグラデーションを工夫して、より水滴らしい質感を演出。
- クリック時にも反応 — :activeに同じアニメーションを付与して操作感をアップ。
まとめ
ボタンが水滴のように跳ねるアニメーションは、CSSだけで実装でき、ユーザー体験をグッと向上させる工夫のひとつです。
シンプルながら印象的な動きなので、Webサイトのアクセントとして活用すれば、訪問者に遊び心と親しみやすさを感じてもらえるでしょう。
シンプルながら印象的な動きなので、Webサイトのアクセントとして活用すれば、訪問者に遊び心と親しみやすさを感じてもらえるでしょう。
satokotadesignキャンペーン実施中！
