27 CSS Button Hover Effects 05 / 27

Liquid Fill & Organic Morphing Button Effects

Playful fluid motion on a teal organic palette — a liquid rising fill with a wavy meniscus, a border-radius blob morph, a gooey scaling-circle expand, and a swirling wave keyframe loop.

Pure CSS MIT licensed

Live Demo Open in tab

Open in playground

The code

<section class="bhe-lfo" aria-label="Liquid fill organic morphing button effects demo">
  <div class="bhe-lfo__cell"><button class="bhe-lfo__btn bhe-lfo__liquid" type="button"><span>Fill Up</span></button><span class="bhe-lfo__label">Liquid Rise</span></div>
  <div class="bhe-lfo__cell"><button class="bhe-lfo__btn bhe-lfo__morph"  type="button"><span>Explore</span></button><span class="bhe-lfo__label">Blob Morph</span></div>
  <div class="bhe-lfo__cell"><button class="bhe-lfo__btn bhe-lfo__goo"    type="button"><span>Add Item</span></button><span class="bhe-lfo__label">Gooey Expand</span></div>
  <div class="bhe-lfo__cell"><button class="bhe-lfo__btn bhe-lfo__flow"   type="button"><span>Dive In</span></button><span class="bhe-lfo__label">Wave Flow</span></div>
</section>

<section class="bhe-lfo" aria-label="Liquid fill organic morphing button effects demo">
  <div class="bhe-lfo__cell"><button class="bhe-lfo__btn bhe-lfo__liquid" type="button"><span>Fill Up</span></button><span class="bhe-lfo__label">Liquid Rise</span></div>
  <div class="bhe-lfo__cell"><button class="bhe-lfo__btn bhe-lfo__morph"  type="button"><span>Explore</span></button><span class="bhe-lfo__label">Blob Morph</span></div>
  <div class="bhe-lfo__cell"><button class="bhe-lfo__btn bhe-lfo__goo"    type="button"><span>Add Item</span></button><span class="bhe-lfo__label">Gooey Expand</span></div>
  <div class="bhe-lfo__cell"><button class="bhe-lfo__btn bhe-lfo__flow"   type="button"><span>Dive In</span></button><span class="bhe-lfo__label">Wave Flow</span></div>
</section>

.bhe-lfo {
  --bhe-lfo-bg: #eef6f3;
  --bhe-lfo-ink: #16302a;
  --bhe-lfo-muted: #6f8a82;
  --bhe-lfo-liquid: #14b8a6;
  --bhe-lfo-liquid2: #0d9488;
  --bhe-lfo-grape: #8b5cf6;
  --bhe-lfo-coral: #fb7185;

  background: var(--bhe-lfo-bg); color: var(--bhe-lfo-ink);
  font-family: 'Geneva', 'Avenir', 'Segoe UI', sans-serif;
  display: flex; flex-wrap: wrap; gap: 3rem;
  align-items: center; justify-content: center;
  padding: 3rem 2rem; min-height: 320px;
  box-sizing: border-box;
}
.bhe-lfo *, .bhe-lfo *::before, .bhe-lfo *::after { box-sizing: border-box; }
.bhe-lfo__cell { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.bhe-lfo__label { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--bhe-lfo-muted); text-transform: uppercase; }

.bhe-lfo__btn {
  position: relative; font-family: inherit; font-weight: 700; font-size: 1rem;
  cursor: pointer; border: none; padding: 1.05rem 2.6rem; overflow: hidden;
}
.bhe-lfo__btn span { position: relative; z-index: 2; transition: color 0.4s ease; }

/* 1: liquid rising fill */
.bhe-lfo__liquid {
  background: transparent; color: var(--bhe-lfo-liquid);
  border: 2px solid var(--bhe-lfo-liquid); border-radius: 12px;
}
.bhe-lfo__liquid::before {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 0;
  background: var(--bhe-lfo-liquid); z-index: 1;
  border-radius: 40% 42% 0 0 / 18px 18px 0 0;
  transition: height 0.5s cubic-bezier(0.6, 0, 0.2, 1);
}
.bhe-lfo__liquid:hover::before { height: 130%; }
.bhe-lfo__liquid:hover span { color: var(--bhe-lfo-bg); }

/* 2: morphing border-radius */
.bhe-lfo__morph {
  background: var(--bhe-lfo-grape); color: #fff;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  transition: border-radius 0.6s ease, transform 0.6s ease;
}
.bhe-lfo__morph:hover { border-radius: 70% 30% 35% 65% / 65% 60% 40% 35%; transform: scale(1.05) rotate(-2deg); }

/* 3: gooey blob expand */
.bhe-lfo__goo {
  background: transparent; color: var(--bhe-lfo-coral);
  border: 2px solid var(--bhe-lfo-coral); border-radius: 50px;
}
.bhe-lfo__goo::before {
  content: ''; position: absolute; top: 50%; left: 50%; z-index: 1;
  width: 12px; height: 12px; background: var(--bhe-lfo-coral); border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s cubic-bezier(0.6, 0, 0.2, 1);
}
.bhe-lfo__goo:hover::before { transform: translate(-50%, -50%) scale(30); }
.bhe-lfo__goo:hover span { color: var(--bhe-lfo-bg); }

/* 4: animated wave */
.bhe-lfo__flow {
  background: var(--bhe-lfo-liquid2); color: #fff; border-radius: 14px;
}
.bhe-lfo__flow::before {
  content: ''; position: absolute; left: -50%; bottom: -160%;
  width: 200%; height: 200%; z-index: 1;
  background: rgba(255,255,255,0.25);
  border-radius: 45%;
  transition: bottom 0.6s ease;
}
.bhe-lfo__flow:hover::before { bottom: -130%; animation: bhe-lfo-swirl 4s linear infinite; }
@keyframes bhe-lfo-swirl { from { transform: rotate(0); } to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .bhe-lfo__btn, .bhe-lfo__btn::before, .bhe-lfo__btn span { transition: none; }
  .bhe-lfo__flow:hover::before { animation: none; }
}

.bhe-lfo {
  --bhe-lfo-bg: #eef6f3;
  --bhe-lfo-ink: #16302a;
  --bhe-lfo-muted: #6f8a82;
  --bhe-lfo-liquid: #14b8a6;
  --bhe-lfo-liquid2: #0d9488;
  --bhe-lfo-grape: #8b5cf6;
  --bhe-lfo-coral: #fb7185;

  background: var(--bhe-lfo-bg); color: var(--bhe-lfo-ink);
  font-family: 'Geneva', 'Avenir', 'Segoe UI', sans-serif;
  display: flex; flex-wrap: wrap; gap: 3rem;
  align-items: center; justify-content: center;
  padding: 3rem 2rem; min-height: 320px;
  box-sizing: border-box;
}
.bhe-lfo *, .bhe-lfo *::before, .bhe-lfo *::after { box-sizing: border-box; }
.bhe-lfo__cell { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.bhe-lfo__label { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--bhe-lfo-muted); text-transform: uppercase; }

.bhe-lfo__btn {
  position: relative; font-family: inherit; font-weight: 700; font-size: 1rem;
  cursor: pointer; border: none; padding: 1.05rem 2.6rem; overflow: hidden;
}
.bhe-lfo__btn span { position: relative; z-index: 2; transition: color 0.4s ease; }

/* 1: liquid rising fill */
.bhe-lfo__liquid {
  background: transparent; color: var(--bhe-lfo-liquid);
  border: 2px solid var(--bhe-lfo-liquid); border-radius: 12px;
}
.bhe-lfo__liquid::before {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 0;
  background: var(--bhe-lfo-liquid); z-index: 1;
  border-radius: 40% 42% 0 0 / 18px 18px 0 0;
  transition: height 0.5s cubic-bezier(0.6, 0, 0.2, 1);
}
.bhe-lfo__liquid:hover::before { height: 130%; }
.bhe-lfo__liquid:hover span { color: var(--bhe-lfo-bg); }

/* 2: morphing border-radius */
.bhe-lfo__morph {
  background: var(--bhe-lfo-grape); color: #fff;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  transition: border-radius 0.6s ease, transform 0.6s ease;
}
.bhe-lfo__morph:hover { border-radius: 70% 30% 35% 65% / 65% 60% 40% 35%; transform: scale(1.05) rotate(-2deg); }

/* 3: gooey blob expand */
.bhe-lfo__goo {
  background: transparent; color: var(--bhe-lfo-coral);
  border: 2px solid var(--bhe-lfo-coral); border-radius: 50px;
}
.bhe-lfo__goo::before {
  content: ''; position: absolute; top: 50%; left: 50%; z-index: 1;
  width: 12px; height: 12px; background: var(--bhe-lfo-coral); border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s cubic-bezier(0.6, 0, 0.2, 1);
}
.bhe-lfo__goo:hover::before { transform: translate(-50%, -50%) scale(30); }
.bhe-lfo__goo:hover span { color: var(--bhe-lfo-bg); }

/* 4: animated wave */
.bhe-lfo__flow {
  background: var(--bhe-lfo-liquid2); color: #fff; border-radius: 14px;
}
.bhe-lfo__flow::before {
  content: ''; position: absolute; left: -50%; bottom: -160%;
  width: 200%; height: 200%; z-index: 1;
  background: rgba(255,255,255,0.25);
  border-radius: 45%;
  transition: bottom 0.6s ease;
}
.bhe-lfo__flow:hover::before { bottom: -130%; animation: bhe-lfo-swirl 4s linear infinite; }
@keyframes bhe-lfo-swirl { from { transform: rotate(0); } to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .bhe-lfo__btn, .bhe-lfo__btn::before, .bhe-lfo__btn span { transition: none; }
  .bhe-lfo__flow:hover::before { animation: none; }
}

More from 27 CSS Button Hover Effects

Neo-Brutalist & Cyberpunk Button Glow Effects Sliding Background Color Wipe Button Effects Kinetic Text Flip & Icon Reveal Button Effects Liquid Fill Magnetic Border Glitch Slice Neon Pulse Split Reveal Diagonal Shutter Elastic Lift Center Underline Draw 3D Flip

View the full collection →