四角い箱の中に収まったボタンは、静かすぎます。クリックを促す要素が「押せそうな形をしている」だけでは、ユーザーの指先は止まってしまう。そこで「液体」という要素を持ち込むと、話が変わります。形が揺れる、液体が流れ込む、ゼリーのように弾む——そういった有機的な動きは、見ている人の視線を引きつけ、思わず触ってみたくなる衝動を生みます。「リキッドデザイン」は2024〜2026年のWebトレンドで急浮上したキーワードですが、その中心にあるのは「硬くない形」「生き物のような動き」という感覚です。
この記事では、液体・粘体・有機的変形をテーマにしたCSSボタンを5パターン紹介します。すべてCSSのみで実装しており、JavaScriptは不要。Blob Morph・Liquid Fill・Jelly Bounce・Goo Merge・Wave Fillの5本で、演出のバリエーションを幅広く揃えました。WordPressやSWELLにもコピペで使えます。
Blob Morph（ブロブ・モーフ）
ページを開いた瞬間から、ボタンはすでに動いています。border-radius の8方向の値を @keyframes でゆっくり変化させることで、ボタンの輪郭が有機的にうごめき続ける設計です。ホバーすると通常のゆっくりしたモーフィングが停止し、より大きく、激しい変形アニメーションが一閃します。「常に動いている→ホバーで応答する」という二段構えの演出がポイントです。
ダーク背景（#0f0e17）との組み合わせが最も映え、ポートフォリオ・音楽系LP・クリエイティブエージェンシーのメインCTAに向いています。動いているボタンは「早く押さないと変わってしまう」という心理的な焦りを微妙に生み出し、クリック率の向上にも寄与します。常時アニメーションのためパフォーマンス影響が気になる場合は、animation-duration を長めに設定すると負荷を抑えられます。
See the Pen Blob Morph by BaseKENT (@basekent) on CodePen.
調整方法
- アイドル変形の速度:
animation: blob-idle 6s ease-in-out infiniteの6sを大きくするとゆっくりした変形に、小さくすると忙しない動きになります。8〜10sが落ち着いた印象になります - 背景色:
body { background: #0f0e17 }とボタンのbackground: #e94560をセットで変更することで、テーマカラーに合わせられます - ホバー変形の激しさ:
blob-burstの各フレームのborder-radius値を極端な数値（80% 20%など）にするとより激しい変形に、45〜55%に近づけると落ち着いた変形になります
Liquid Fill（リキッド・フィル）
ホバーすると、ボタンの中心から丸い液体が膨らみ出して全体を飲み込みます。::before 擬似要素を小さな円（width: 12px）として中央に配置し、transform: scale(18) まで膨らませることで、液体がボタン内に充填される視覚効果を生み出しています。キーは cubic-bezier(0.3, 1, 0.8, 1) で、最初はゆっくり、終わりにかけて勢いよく広がる「水が弾ける」ような動きを表現しています。
アウトライン（ゴースト）ボタンとの組み合わせが特によく、「塗りがない→液体が充填される」という変化が視覚的に成立します。オーガニック系食品・コスメ系・自然環境をテーマにしたサイトで、「CSSボタンなのに生き物っぽい」という印象を与えられる実用性の高い一本です。
See the Pen Liquid Fill by BaseKENT (@basekent) on CodePen.
調整方法
- 液体の色:
.btn::before { background: #2d6a4f }をブランドカラーに変更してください。.btnのborder-colorとcolorも同じ色に揃えると一体感が出ます - 充填の速度:
transition: transform 0.65s cubic-bezier(0.3, 1, 0.8, 1)の0.65sを小さくすると素早く、大きくするとゆっくりした充填になります - 角丸:
border-radius: 50pxをやめてborder-radius: 8pxにすると、四角いボタンから液体が充填される対比が強まりより印象的になります
Jelly Bounce（ジェリー・バウンス）
ホバーした瞬間、ボタンが横に引き伸ばされたかと思ったら縦に圧縮され、また戻る——ゼリーを指で押したときの反応そのものです。scaleX と scaleY を交互に変化させる @keyframes jelly で、弾性のある物体特有の「圧縮→復元」の連鎖を表現しています。8フレームで振動の振幅が徐々に減衰するよう設計されており、自然に「収束する弾み」を再現しています。
暖色系のボタン（オレンジ・コーラル）との相性が抜群で、フードデリバリー・子ども向けサービス・ゲーミングサイトなど「楽しさ・親しみやすさ」を前面に出すデザインで特に機能します。transform-origin をデフォルト（中心）に設定しているため、ホバーするとボタンがその場でぷるぷると震える動作になります。
See the Pen Jelly Bounce by BaseKENT (@basekent) on CodePen.
調整方法
- 弾みの強度:
@keyframes jellyの最初のフレームscaleX(1.28) scaleY(0.72)の差を大きくするとより激しく弾み、小さく（例:scaleX(1.12) scaleY(0.88)）するとソフトな弾みになります - 弾みの速度:
animation: jelly 0.7s ease forwardsの0.7sを変更します。0.5sで素早いスナップ感に、1sでゆっくりした弾みになります - 角丸:
border-radius: 12pxを50pxにするとピル型ゼリーに、4pxにするとシャープな素材感になります
Goo Merge（グー・マージ）
ボタンの両脇に浮かんでいた2つの小さな丸が、ホバーするとゆっくりボタン本体に向かって引き寄せられ、「ぬるっ」と合体します。これは filter: blur(8px) contrast(18) を親要素に適用する「gooeyフィルター」という技法で、ブラーで溶かしたエッジをコントラスト補正で急峻に戻すことで、隣接した要素が粘液のように合体して見えます。
このデモのみ、フィルターを当てるラッパー div が1つ必要です（HTMLに <div class="goo-wrap"> を追加）。その性質上、テキストはやや滲みますが、視覚的なインパクトは5本の中で最大です。クリエイティブ系・ゲーム系・エンタメ系サイトの「これは何だ？」という驚きを設計したいCTAに向いています。
See the Pen Goo Merge by BaseKENT (@basekent) on CodePen.
調整方法
- 粘液の強度:
.goo-wrap { filter: blur(8px) contrast(18) }のblurとcontrastの組み合わせが効果を決めます。blur値を大きくするとより「ぬるっ」感が強まりますが、合体時の境界が太くなります。contrast値を下げると粘液感が薄れます - 衛星ブロブの大きさ:
::before { width: 22px; height: 22px }と::after { width: 18px; height: 18px }の値を変更すると合体する丸の大きさが変わります。ボタン本体に近いサイズにすると合体時のインパクトが増します - 合体の速度:
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)の0.5sを変更します。0.3sで素早い吸い込み感に、0.8sでゆっくりした引き寄せ感になります
Wave Fill（ウェーブ・フィル）
ボタンの下から波が押し寄せてきて、ボタン全体を水没させます。::before 擬似要素の上辺を clip-path: polygon() で波形に切り抜き、transform: translateY(-95%) でボタン上端まで波を押し上げる設計です。波の形はポリゴン座標で手動定義されているため、JavaScript不要でサイン波のような曲線を再現しています。
ライトブルー系の背景とシアン・ネイビー系ボタンとの組み合わせが自然で、環境系・水・マリン系・クリーンテックをテーマにしたサイトに直感的に合います。「波が満ちる」演出は「満足が得られる」という心理的な快感と結びつきやすく、購入ボタンや「無料で始める」ボタンに使うと完了感を強調できます。
See the Pen Wave Fill by BaseKENT (@basekent) on CodePen.
調整方法
- 波の形:
clip-path: polygon()の各座標（55%,50%,45%など）の数値を変更すると波の高低差が変わります。差を大きくすると荒波に、差を小さくするとなだらかなさざ波になります - 波の色:
.btn::before { background: #0369a1 }をブランドカラーに変更してください。.btnのborder-colorとcolorも揃えると統一感が生まれます - 充填の速度:
transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1)の0.65sを調整します。0.4sで素早く水没し、1sでゆっくりと水が満ちる感覚になります
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
