Bubble Gum CSS Button

Free37 lines · no JS

Open in Studio

Theme

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

States

default

hover

focus-visible

active

disabled

not declared

.btn-bubble-gum {
  position: relative;
  display: inline-block;
  padding: 13px 30px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff9ecd 0%, #f472b6 55%, #ec4899 100%);
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(236, 72, 153, 0.4), inset 0 -3px 6px rgba(190, 24, 93, 0.35), inset 0 2px 3px rgba(255, 255, 255, 0.6);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.btn-bubble-gum::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 16px;
  right: 16px;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.btn-bubble-gum:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 18px rgba(236, 72, 153, 0.5), inset 0 -3px 6px rgba(190, 24, 93, 0.35), inset 0 2px 3px rgba(255, 255, 255, 0.6);
}
.btn-bubble-gum:active {
  transform: scale(1.08, 0.8);
}
.btn-bubble-gum:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

Self-contained · MIT · no build step.btn-bubble-gum

PlayfulPillElastic

Implementation notes

About the Bubble Gum CSS button

Bubble Gum uses expressive color, shape and feedback for characterful products. Its pill silhouette makes the label easy to scan in compact layouts. It is built around a three-stop linear gradient anchored on #ff9ecd, with a 250ms hover scale and a three-layer shadow. The elastic details are included in the copy-paste CSS.

Usage

<button class="btn-bubble-gum">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: Pill
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