Coyote Labby Coyote Concept

NewCSS only · border-radius · keyframes

Liquid Fill

On hover the element fills from the bottom like a glass, with a slow wave turning on the surface.

A free liquid fill hover effect in HTML and CSS. Also known as water fill button, wave fill animation, liquid button or fill from bottom hover.

Class
.CCLiquid
Weight
0.9 KB
Needs
CSS only
Best for
Primary buttons, add-to-basket, sign-up

Tune it

Every snippet on this page follows these settings.

How the Liquid Fill hover effect works

  1. A square twice the element's width sits below its bottom edge on ::before, with a 42% border-radius.
  2. That not-quite-round shape spins slowly, so its top edge rolls like a wave.
  3. On hover it rises until it covers the element; overflow: hidden keeps it inside.
  4. The label turns to the on-accent colour as the liquid passes it.

Add it to your site

  1. Add the styles. Link https://coyoteconcept.com/lab/cc-lab.css once, or paste the CSS from any snippet below.
  2. Set a colourway. Wrap your content in class="CCTheme CCEmber", or any other colourway.
  3. Add the classes. For example <button class="CCButton CCLiquid">.
  4. That’s it. Liquid Fill is CSS only.

Core components

Liquid Fill on button, dropdown, card.

More ways to use it

The same class on badge.

The Liquid Fill code

The plain CSS behind the effect. Colours, speed and strength come from the --cc- custom properties; the snippets above bundle it with the component styles and your settings.

Show the CSS
.CCLiquid {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color calc(.5s / var(--cc-speed)) calc(.6s / var(--cc-speed));
}
.CCLiquid::before {
  content: "";
  position: absolute;
  left: -50%;
  top: 135%;
  z-index: -1;
  width: 200%;
  aspect-ratio: 1;
  border-radius: 42%;
  pointer-events: none;
  background: var(--cc-accent);
  transition: top calc(1.6s / var(--cc-speed)) cubic-bezier(.45, 0, .55, 1);
  animation: ccLiquid calc(5s / var(--cc-speed)) linear infinite;
}
.CCLiquid:hover,
.CCLiquid:focus-visible,
.CCLiquid:focus-within { color: var(--cc-on-accent); }
.CCLiquid:hover::before,
.CCLiquid:focus-visible::before,
.CCLiquid:focus-within::before { top: -24%; }
.CCLiquid:is(:hover, :focus-visible, :focus-within) :is(.CCCard-eyebrow, .CCCard-price, h3, p) { color: inherit; }
@keyframes ccLiquid { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .CCLiquid::before { animation: none; transition: none; } }

Pairs well with

Avoid on the same element Moonrise (::before), Ember Sparks (clipping), Spotlight (::before), Ink Pour (::before, fill), Northern Lights (fill), Stack Pop (fill), Metal (fill), Arrow Slide (::before, fill), Sonar (::before), Grain (fill), Pixel (fill), Goo (fill).

Browser support

Chrome & Edge88+
Safari15+
Firefox89+

Older browsers show the element without the effect: nothing breaks.

Accessibility

  • Text stays the on-accent colour against the fill, so contrast holds.
  • Plays on keyboard focus too.
  • Under reduced motion the fill appears without rising or turning.

Performance

  • 0.9 KB of code, no libraries.
  • Animates transforms, opacity and gradients, which browsers handle cheaply.
  • This page pauses every animation that’s scrolled out of view. Worth copying if you use lots of them.

Questions about Liquid Fill

What is a liquid fill hover effect?

On hover the element fills from the bottom like a glass, with a slow wave turning on the surface. Liquid Fill is a free liquid fill hover effect, also known as water fill button or wave fill animation, that works on buttons, dropdowns, cards and more.

How do you make a liquid fill hover effect in CSS?

A square twice the element's width sits below its bottom edge on ::before, with a 42% border-radius. That not-quite-round shape spins slowly, so its top edge rolls like a wave. On hover it rises until it covers the element; overflow: hidden keeps it inside. The label turns to the on-accent colour as the liquid passes it.

How do I add Liquid Fill to a button?

Add the class CCLiquid next to CCButton, inside an element with the CCTheme class, then include the Liquid Fill CSS. The Copy button on this page gives you all of it in one snippet.

Does Liquid Fill need JavaScript?

No, it's CSS only.

Which browsers support Liquid Fill?

Chrome and Edge 88+, Safari 15+ and Firefox 89+. Older browsers show the element without the effect, so nothing breaks.

Is Liquid Fill accessible?

Text stays the on-accent colour against the fill, so contrast holds. Plays on keyboard focus too. Under reduced motion the fill appears without rising or turning.

Can I use Liquid Fill in React, Tailwind, WordPress, Shopify, Webflow or Squarespace?

Yes. There's a ready-made React component and a Tailwind version on this page. On WordPress, Shopify, Webflow, Wix or Squarespace, paste the CSS into the site's custom code or custom CSS area, then add the class CCLiquid to a button or block.

Is Liquid Fill free for commercial use?

Yes. It's free for personal and client projects, with no sign-up. Credit and a link back are appreciated but never required.