Morphing Blob Button

CODE

HTML

<div class="demo-stage mbb-stage">
  <button class="mbb-btn" type="button"><span class="mbb-label">GET STARTED</span></button>
  <p class="mbb-note">ホバーすると形が引き締まります</p>
</div>

CSS

.mbb-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.6rem; padding:3rem; background:#0B0B10; min-height:280px; }
.mbb-btn {
  position:relative; padding:1.15rem 2.6rem; border:none; cursor:pointer;
  background:linear-gradient(135deg,#E91B89 0%,#7B37A8 55%,#5BAADE 100%);
  color:#fff; font-family:'Oswald',sans-serif; font-size:.82rem; letter-spacing:.22em;
  border-radius:62% 38% 55% 45% / 45% 52% 48% 55%;
  box-shadow:0 12px 32px rgba(233,27,137,.28);
  animation: mbb-morph 8s ease-in-out infinite;
  transition: border-radius .5s cubic-bezier(.23,1,.32,1), transform .35s cubic-bezier(.23,1,.32,1), box-shadow .35s ease;
}
@keyframes mbb-morph {
  0%   { border-radius:62% 38% 55% 45% / 45% 52% 48% 55%; }
  25%  { border-radius:42% 58% 38% 62% / 58% 40% 60% 42%; }
  50%  { border-radius:55% 45% 62% 38% / 40% 60% 40% 60%; }
  75%  { border-radius:38% 62% 45% 55% / 55% 45% 55% 45%; }
  100% { border-radius:62% 38% 55% 45% / 45% 52% 48% 55%; }
}
.mbb-btn:hover, .mbb-btn:focus-visible {
  animation-play-state:paused;
  border-radius:999px; transform:translateY(-3px) scale(1.04);
  box-shadow:0 18px 40px rgba(233,27,137,.42);
}
.mbb-btn:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.mbb-btn:active { transform:translateY(-1px) scale(.99); }
.mbb-label { position:relative; }
.mbb-note { font-size:.72rem; color:#6E6E7A; letter-spacing:.05em; }
@media (prefers-reduced-motion: reduce) {
  .mbb-btn { animation:none; border-radius:999px; transition-duration:.01ms; }
}

AI PROMPT

Claude Code Cursor v0

PROMPT

有機的にゆらぐブロブ形状のボタンをCSSだけで作って。border-radius はスラッシュ区切りで8つの値を取れる（水平半径4つ / 垂直半径4つ）ので、例えば border-radius: 62% 38% 55% 45% / 45% 52% 48% 55% のように指定すると、円でも角丸長方形でもない不定形になる。@keyframes でこの8値の組を4パターン用意し、8秒 ease-in-out の無限ループで巡回させると、粘性のある有機的なゆらぎになる（値はすべて % で指定すること。px を混ぜると要素サイズによって破綻する）。ホバー時は animation-play-state: paused でゆらぎを止め、border-radius: 999px の完全な角丸へトランジションさせると「ふわふわした状態から、押せる状態へ引き締まる」という意味の変化になる。同時に translateY(-3px) と scale(1.04)、影の強調を加える。:focus-visible にも同じ指定を書き、アウトラインは残すこと。@media (prefers-reduced-motion: reduce) ではゆらぎを止めて角丸固定にする。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

BOOKS · PR · AMAZON

📖 なかしまぁ先生のCSSアニメーション入門 📖 マイクロインタラクション ―UI/UXデザインの神が宿る細部 📖 Fundamentals of Web Animation with GSAP

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

📚 Kindle Unlimited — 技術書・デザイン書が読み放題。30日無料体験 → 🎧 Audible — 移動中に耳で学ぶオーディオブック。30日無料体験 → 📦 Amazon Prime — Prime Reading・配送特典つき。30日無料体験 → 🎵 Music Unlimited — 作業用BGMに。1億曲が聴き放題・30日無料体験 →

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

Morphing Blob Button（ブロブボタン）とは

border-radius の8値スラッシュ記法をアニメーションさせ、粘性のある有機的な形状に変形し続けるボタンです。SVGのパスモーフィングを使わずCSSだけで作れるため、追加のライブラリもマークアップも必要ありません。

当サイトの Liquid Button はホバー時に液体が満ちるような塗りの変化、SVG Blob Rotate はSVG図形の回転による背景装飾です。本ページはボタンの輪郭そのものが常時変形する別テーマで、装飾性の強いLPやクリエイティブ系サイトのCTAに向きます。

常時変形するとクリック目標が定まらないため、ホバーとフォーカスでアニメーションを止めて角丸へ収束させる設計が実用上の要点になります。装飾と操作性を役割で分けてください。

よくある質問

border-radius のスラッシュ記法とは何ですか？

border-radius は「水平方向の半径4つ / 垂直方向の半径4つ」という書式で最大8つの値を取れます。スラッシュの前後で楕円の縦横比を別々に指定できるため、各角が非対称な楕円になり、円でも角丸長方形でもない有機的な形が作れます。すべて % で指定すると、要素サイズが変わっても形の比率が保たれます。

ゆらぎ続けるボタンは押しにくくないですか？

常時変形しているとクリック目標が定まらず、押しにくさにつながります。そのためホバーとフォーカスで animation-play-state: paused にして動きを止め、同時に角丸へ引き締めるのが本ページの設計です。「離れているときは目を引く・近づいたら押しやすくなる」という役割分担にすると、装飾と操作性が両立します。

コードは無料で使えますか？

はい。Motion LabのコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。コピーしてそのままプロジェクトに利用できます。

RELATED EFFECTS

Morphing Blob Button（ブロブボタン）とは

よくある質問