Balloon Float CSS Button

Free25 lines · no JS

Open in Studio

Theme

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

States

default

hover

focus-visible

active

disabled

not declared

.btn-balloon-float {
  display: inline-block;
  padding: 13px 30px;
  border: none;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 25%, #c4b5fd, #7c3aed 65%);
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 14px 24px -10px rgba(124, 58, 237, 0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-balloon-float:hover {
  transform: translateY(-5px) rotate(-2deg);
  box-shadow: 0 22px 30px -12px rgba(124, 58, 237, 0.7);
}
.btn-balloon-float:active {
  transform: translateY(0) scale(0.97);
}
.btn-balloon-float:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

Self-contained · MIT · no build step.btn-balloon-float

3D & TactilePill

Implementation notes

About the Balloon Float CSS button

Balloon Float uses visible depth and press feedback that makes interaction feel physical. Its pill silhouette makes the label easy to scan in compact layouts. It is built around a two-stop radial gradient anchored on #c4b5fd with a 300ms hover lift. The interaction stays intentionally restrained.

Usage

<button class="btn-balloon-float">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

Modal91% match