CSS Showcase · Live Demo

Buttons that reshape.

One button system that becomes an inline action row on desktop, a segmented toolbar on iPad, and full-width stacked or sticky bars on mobile — with hover, active, loading, and disabled states.

Featured demo

mobile · stacked-full

mobile design patterns

button-stacked-full.css
/* Full-width stacked */
.btn-stack {
  display: grid;
  gap: 0.5rem;
}

.btn-stack .btn {
  width: 100%;
  min-height: 44px;
}

CSS features used

  • • Hover/active transitions
  • • aria-pressed segmented state
  • • Sticky positioning
  • • backdrop-filter blur
  • • CSS custom properties
  • • Semantic tokens