All styles
Solid

Barber Pole CSS Button

Free27 lines · no JS · WCAG AA 5.2
Open in Studio
Theme

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

States
default
hover
focus-visible
active
not declared
disabled
not declared
.btn-barber-pole {
  display: inline-block;
  padding: 13px 28px;
  border: none;
  border-radius: 10px;
  background-color: #2563eb;
  background-image: linear-gradient(45deg, #1d4ed8 25%, #3b82f6 25%, #3b82f6 50%, #1d4ed8 50%, #1d4ed8 75%, #3b82f6 75%, #3b82f6 100%);
  background-size: 28px 28px;
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  animation: btn-barber-pole-march 1.2s linear infinite;
}
.btn-barber-pole:hover {
  animation-duration: 0.5s;
}
@keyframes btn-barber-pole-march {
  to {
    background-position: 28px 0;
  }
}
.btn-barber-pole:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
}
Self-contained · MIT · no build step.btn-barber-pole
SolidRoundedLoadingAnimated

Implementation notes

About the Barber Pole CSS button

Barber Pole uses a clear, high-contrast treatment for primary product actions. Its rounded corners balance product-friendly softness with a clear boundary. It is built around a seven-stop linear gradient anchored on #1d4ed8 with a 1.2s keyframe animation. The loading, animated details are included in the copy-paste CSS.

Usage

<button class="btn-barber-pole">Deploying…</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
Rounded
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
Modal86% match

Midnight System Decision Modal

Midnight System kit

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

Midnight System Smart Input

Midnight System kit

blue palettesolid surface
Pro preview
Toggle86% match

Midnight System Preference Toggle

Midnight System kit

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

Midnight System Feature Card

Midnight System kit

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

Midnight System Action Menu

Midnight System kit

blue palettesolid surface
Unlock with Pro →
Pro preview
Form86% 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

Progress Charge

Arrow Nudge

Classic Blue

Midnight

Ripple Press

Slate Calm

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