All styles
Solid

Idle Breathe CSS Button

Free28 lines · no JS · WCAG fails 2.8
Open in Studio
Theme

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

States
default
hover
focus-visible
active
not declared
disabled
not declared
.btn-idle-breathe {
  display: inline-block;
  padding: 12px 28px;
  border: none;
  border-radius: 999px;
  background: #0ea5e9;
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  animation: btn-idle-breathe-flow 3s ease-in-out infinite;
}
.btn-idle-breathe:hover {
  animation-duration: 1s;
}
@keyframes btn-idle-breathe-flow {
  0%, 100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.04, 0.96);
  }
}
.btn-idle-breathe:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 3px;
}
Self-contained · MIT · no build step.btn-idle-breathe
SolidPillAnimatedElastic

Implementation notes

About the Idle Breathe CSS button

Idle Breathe uses a clear, high-contrast treatment for primary product actions. Its pill silhouette makes the label easy to scan in compact layouts. Motion comes from a 3s keyframe animation. The animated, elastic details are included in the copy-paste CSS.

Usage

<button class="btn-idle-breathe">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
Modal82% match

Midnight System Decision Modal

Midnight System kit

blue palettesolid surface
Unlock with Pro →
Free sample
Input82% match

Midnight System Smart Input

Midnight System kit

blue palettesolid surface
Pro preview
Toggle82% match

Midnight System Preference Toggle

Midnight System kit

blue palettesolid surface
Unlock with Pro →
Pro preview
Card82% match

Midnight System Feature Card

Midnight System kit

blue palettesolid surface
Unlock with Pro →
Pro preview
Dropdown82% match

Midnight System Action Menu

Midnight System kit

blue palettesolid surface
Unlock with Pro →
Pro preview
Form82% match

Midnight System Signup Form

Midnight System kit

blue palettesolid surface
Unlock with Pro →
Get the complete Midnight System kit
Six coordinated component types, commercial license and future kit updates.
Explore Pro · $39

More styles that match

Pill Primary

Success Morph

Arrow Nudge

Classic Blue

Midnight

Ripple Press

Two optional extras load only if you allow them. Every button, preview and line of code works exactly the same either way. What each one does