Gooey Drip CSS Button

Free43 lines · no JS · WCAG AA large 3.2

Open in Studio

Theme

A real <button> carrying .btn-gooey-drip — the preview is the stylesheet, not a picture of it.

States

default

hover

focus-visible

active

disabled

not declared

.btn-gooey-drip {
  position: relative;
  display: inline-block;
  padding: 14px 30px;
  border: none;
  border-radius: 48% 52% 55% 45% / 60% 55% 45% 40%;
  background: #ec4899;
  color: #fff0f7;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: border-radius 0.45s cubic-bezier(0.68, -0.4, 0.32, 1.4), background 0.3s ease, transform 0.35s cubic-bezier(0.68, -0.4, 0.32, 1.4);
}
.btn-gooey-drip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 12px;
  height: 10px;
  border-radius: 50% 50% 60% 60%;
  background: #ec4899;
  transform: translateX(-50%);
  transition: height 0.45s cubic-bezier(0.68, -0.45, 0.32, 1.35), bottom 0.45s cubic-bezier(0.68, -0.45, 0.32, 1.35), border-radius 0.45s ease, background 0.3s ease;
}
.btn-gooey-drip:hover {
  border-radius: 52% 48% 45% 55% / 45% 50% 60% 55%;
  background: #db2777;
}
.btn-gooey-drip:hover::after {
  height: 26px;
  bottom: -22px;
  border-radius: 45% 55% 65% 60% / 30% 30% 75% 70%;
  background: #db2777;
}
.btn-gooey-drip:active {
  transform: scale(0.94, 0.88);
}
.btn-gooey-drip:focus-visible {
  outline: 2px solid #ec4899;
  outline-offset: 3px;
}

Self-contained · MIT · no build step.btn-gooey-drip

PlayfulOrganicLiquidElastic

Implementation notes

About the Gooey Drip CSS button

Gooey Drip uses expressive color, shape and feedback for characterful products. Its organic outline adds personality to the interaction. The liquid, elastic details are included in the copy-paste CSS.

Usage

<button class="btn-gooey-drip">Button</button>

Pair it with the CSS tab above — the class is self-contained.

Before shipping: keep the semantic button element, verify contrast on your actual background and add a visible:focus-visible state. If you retain motion, include a prefers-reduced-motion override.

Built with: HTML + plain CSS
Shape: Organic
Exports: CSS, Tailwind, React
License: MIT · commercial use

Complete the look

Build the interface around this button

We matched its palette, surface, geometry and motion to a complete UI system — like composing an outfit, not browsing unrelated parts.

Style DNA · v1

How matching works →

Pro preview

Modal78% match