51 CSS Buttons

Q: How do I style a submit button with CSS?

Start from a real `button` element with `type='submit'` inside a `form` element — never a `div` or an `a` with a click handler. Style it with padding, a solid background or gradient, border-radius, font-weight, and cursor pointer. Add `:hover` and `:active` states with a transition so the change is smooth, and a `:focus-visible` outline so keyboard users can see focus. Set a minimum touch target of 44×44px so mobile taps hit reliably. Demo 01 in this collection (CSS Submit Button (Form Primary)) ships the full recipe including `aria-busy` handling for the loading state — open the code panel to copy.

Q: How do I build a loading button with a state transition?

Model the button as a state machine using `data-state` attribute: `idle → loading → success → reset`. Each state is a CSS rule that shows or hides layered spans inside the button — label, spinner, checkmark. On click, toggle `data-state='loading'` and set `aria-busy='true'`, then after the async work completes swap to `data-state='success'` and `aria-busy='false'`. Common pitfalls: use `aria-disabled='true'` instead of the `disabled` attribute so the button stays focusable during loading (users can tab away), announce the state to screen readers via a polite live region, and add `pointer-events: none` to prevent double-clicks. Demo 06 (Loading Spinner Button) ships the full recipe in 18 lines of JS.

Q: How do I build a segmented button group (radio-like)?

Use real ` ` elements inside a `fieldset` with `role='group'` on a wrapper — this gives you keyboard arrow-key navigation for free, exclusive selection, and screen-reader semantics. Visually hide the radios with a clip-path pattern (not `display: none` which removes them from the tab order), then style the sibling ` ` elements as segments. Use `:has()` on the wrapper to style the group when any radio is checked, with an `@supports not selector(:has(*))` fallback for older browsers. Demo 08 (CSS Button Group Component) ships the pattern with arrow-key nav and dark-mode support.

51 copy-paste CSS buttons for submit forms, primary and secondary CTAs, ghost and outline variants, icon-only with accessible tooltips, gradient CTAs, loading spinners, disabled references, button groups, state machines (add-to-cart, download, play/pause), hover effects, click animations (ripple, glitch, ink spread), and material studies (brass, walnut, aged copper with @property patina). Scoped under .cb-NN, prefers-reduced-motion guarded, framework-agnostic.

41 pure CSS10 light JSPublished May 4, 20268 new designs · Updated on Aug 10, 2026

01 / 51Pure CSSNEW

CSS Submit Button (Form Primary)

The button every form ends with, engineered properly: a two-layer elevation shadow that reads as physical depth, a masked sheen that sweeps once on hover, a real 1px press travel, and a focus ring built from outline plus a soft halo so it survives on any background. Zero JavaScript, four states, one token block.

PublishedAug 10, 2026

02 / 51Pure CSSNEW

CSS Primary and Secondary Button Pair

One shared button recipe, two visual weights, and a container that stacks them on a phone without a media query — hierarchy done the way a design system does it: the variant classes override only three tokens each, so every state, size and focus behaviour is written once.

PublishedAug 10, 2026

03 / 51Pure CSSNEW

CSS Ghost / Outline Button

A ghost button that keeps its 1px silhouette at rest and fills from the bottom edge on hover, with the label colour inverting in the same beat. The fill is one background-size transition on a gradient — no pseudo-element, no overflow clipping, and the border is drawn in currentColor so a single colour change re-skins everything.

PublishedAug 10, 2026

04 / 51Pure CSSNEW

CSS Icon-Only Button with Accessible Tooltip

A three-button icon toolbar where each control carries a real accessible name, a 44px touch target inside a 40px visual square, and a tooltip that appears on hover and keyboard focus. The tooltip animates in with @starting-style and is positioned with CSS anchor positioning, falling back to a plain absolute offset.

PublishedAug 10, 2026

05 / 51Pure CSSNEW

CSS Gradient CTA Button

A conversion-grade CTA with a conic gradient ring that rotates continuously, a soft bloom underneath, and a mesh gradient body that shifts on hover. The rotation is possible at all because @property registers the angle as an <angle> type — plain custom properties cannot be animated.

PublishedAug 10, 2026

06 / 51Light JSNEW

CSS Loading Spinner Button (State Transition)

Idle → pending → success in one button that never changes width, because all three labels are stacked in the same grid cell. The spinner is a conic gradient masked into a ring, the success tick draws itself with stroke-dashoffset, and the state lives in a single data-state attribute mirrored to aria-busy and a live region.

PublishedAug 10, 2026

07 / 51Pure CSSNEW

CSS Disabled Button State (Full State Reference)

Every button state side by side in one row — rest, hover, focus, pressed, truly disabled, and aria-disabled (focusable, explains itself, refuses activation). The hover/focus/pressed cards are frozen with state classes so you can compare all six simultaneously instead of chasing a pointer.

PublishedAug 10, 2026

08 / 51Pure CSSNEW

CSS Button Group Component (Segmented Radio-Like)

A segmented control built on real radio inputs, so arrow-key navigation, roving focus and form serialisation come from the platform rather than from JavaScript. A single sliding thumb tracks the checked segment via :has(), and the active label crosses over the thumb by inverting colour at the same moment.

PublishedAug 10, 2026

09 / 51Light JS

CSS Add to Cart Button

The single most-measured button in e-commerce: press it and a cart glyph arcs into a badge, the badge digit bumps, and the label swaps to "Added" before returning to idle — with the real count announced politely so screen-reader users hear the outcome instead of watching it.