25 CSS Button Groups
19 / 25

All 25 in 25 CSS Button Groups

  1. 01CSS Split Button with Anchor-Positioned Popover Menu (Popover API, No JS)
  2. 02CSS Segmented Control with Motion-Path Comet Thumb (offset-path Arc Travel)
  3. 03CSS View Transitions Toggle Button Group with Morphing Thumb (Shared-Element FLIP)
  4. 04CSS Pricing Toggle with Monthly / Yearly Switch (Pure CSS, No JavaScript)
  5. 05CSS Segmented Control with Sliding Thumb Indicator (iOS-Style, Pure CSS)
  6. 06CSS Split Button Dropdown with Native <details> (Primary Action + Menu)
  7. 07CSS Icon Button Group for Toolbar Actions (Accessible Tooltips, Pure CSS)
  8. 08CSS Pill Radio Button Group with Sliding Indicator (Filter Pills, Pure CSS)
  9. 09CSS Toggle Button Group with Radio Inputs (Single-Select Alignment Group)
  10. 10CSS Wallet Connect Button Grid for Web3 Sign-In (MetaMask, WalletConnect, Coinbase)
  11. 11CSS AI Model Selector Button Group with Provider Badges (LLM Model Picker)
  12. 12CSS Segmented Control with Liquid Mercury Thumb (Metallic Stretch Animation)
  13. 13CSS Button Group with Subgrid Underline Beam (Perfectly Aligned Tab Indicator)
  14. 14CSS Multi-Select Chip Buttons with Acid Glow (Toggleable Tag Filters)
  15. 15CSS Split Button with Quantum Chevron Reveal (Animated Menu Materialize)
  16. 16CSS Format Toggle Button Group with Conic Fill (Radial Sweep Select)
  17. 17CSS Pixel Matrix Button Group with LED Segment Glow (Retro Display Buttons)
  18. 18CSS Multi-Action Button Group with Gradient Flow Progress (Animated CTA Bar)
  19. 19CSS Icon Segmented Control with Holographic Sheen (Iridescent View Switcher)
  20. 20CSS Vertical Button Stack with 3D Hover Depth (Tilting Card Buttons)
  21. 21CSS Floating Action Button with Radial Sub-Button Menu (Arc Fan-Out, Pure CSS)
  22. 22CSS Filter Button Group with RGB-Split Glitch Active State (Cyberpunk Toggle)
  23. 23CSS Pill Button Group with Rotating Conic Plasma Border (Animated Gradient Ring)
  24. 24CSS Action Button Row with Radar Shockwave Click Feedback (Ripple Pulse)
  25. 25CSS Date-Range Preset Button Group with Cursor-Following Glow (Spotlight Hover)
Pure CSSMIT licensed

CSS Icon Segmented Control with Holographic Sheen (Iridescent View Switcher)

An icon segmented control whose active thumb shimmers like a holographic foil card — an iridescent sheen that shifts hue as it catches the light. A premium 'CSS icon segmented control holographic sheen' view switcher (grid / list / gallery / map) built on real radios, with an @property hue drift so the foil never sits still.

Live Demo
Plain CSSTailwind v4
Try it

Build UI like this from scratch: Flexbox, Grid, animations & responsive CSS

ZTM · The CSS Bootcamp · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code
Check ZTM Course

The code

<section class="btn-19" aria-label="Holographic icon segmented control demo">
  <div class="btn-19__wrap">
    <p class="btn-19__label">View</p>
    <div class="btn-19__seg" role="radiogroup" aria-label="View mode">
      <input type="radio" name="btn-19" id="btn-19-1" class="btn-19__in" checked>
      <label for="btn-19-1" class="btn-19__opt" aria-label="Grid view"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.1"><rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/></svg></label>
      <input type="radio" name="btn-19" id="btn-19-2" class="btn-19__in">
      <label for="btn-19-2" class="btn-19__opt" aria-label="List view"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.1"><path d="M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01"/></svg></label>
      <input type="radio" name="btn-19" id="btn-19-3" class="btn-19__in">
      <label for="btn-19-3" class="btn-19__opt" aria-label="Gallery view"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.1"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 15l5-4 4 3 3-2 6 5"/><circle cx="9" cy="9" r="1.4"/></svg></label>
      <input type="radio" name="btn-19" id="btn-19-4" class="btn-19__in">
      <label for="btn-19-4" class="btn-19__opt" aria-label="Map view"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.1"><path d="M9 4L3 6v14l6-2 6 2 6-2V4l-6 2-6-2zM9 4v14M15 6v14"/></svg></label>
      <span class="btn-19__thumb" aria-hidden="true"></span>
    </div>
  </div>
</section>
@property --btn-19-h {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

.btn-19,
.btn-19 *,
.btn-19 *::before,
.btn-19 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.btn-19 {
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 120% at 50% 0%,#191426,#0a0710);
  padding: 44px 20px;
}

.btn-19__wrap {
  width: min(420px,100%);
}

.btn-19__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #c9b8ff;
  margin: 0 0 14px 4px;
}

.btn-19__seg {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  padding: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  backdrop-filter: blur(6px);
}

.btn-19__in {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.btn-19__opt {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  color: rgba(230,224,255,.55);
  cursor: pointer;
  transition: color .3s;
}

.btn-19__thumb {
  position: absolute;
  z-index: 1;
  top: 6px;
  left: 6px;
  width: calc((100% - 12px)/4);
  height: calc(100% - 12px);
  border-radius: 11px;
  overflow: hidden;
  background: repeating-linear-gradient(68deg,hsl(var(--btn-19-h) 92% 66%) 0 14px,hsl(calc(var(--btn-19-h) + 60) 92% 66%) 14px 28px,hsl(calc(var(--btn-19-h) + 130) 92% 66%) 28px 42px,hsl(calc(var(--btn-19-h) + 200) 92% 66%) 42px 56px);
  animation: btn-19-drift 6s linear infinite;
  transition: translate .42s cubic-bezier(.34,1.35,.5,1);
  box-shadow: 0 6px 20px -6px hsl(var(--btn-19-h) 90% 60% / .8);
}

.btn-19__thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-58deg,rgba(255,255,255,.5) 0 4px,transparent 4px 16px);
  mix-blend-mode: color-dodge;
  opacity: .55;
}

.btn-19__thumb::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(110deg,transparent 40%,rgba(255,255,255,.9) 50%,transparent 60%);
  translate: -60% 0;
  animation: btn-19-glare 6s ease-in-out infinite;
}

@keyframes btn-19-drift {
  to {
    --btn-19-h: 360deg;
  }
}

@keyframes btn-19-glare {
  0%,
    55% {
    translate: -80% 0;
  }

  80%,
    100% {
    translate: 80% 0;
  }
}

.btn-19__seg:has(#btn-19-2:checked) .btn-19__thumb {
  translate: 100% 0;
}

.btn-19__seg:has(#btn-19-3:checked) .btn-19__thumb {
  translate: 200% 0;
}

.btn-19__seg:has(#btn-19-4:checked) .btn-19__thumb {
  translate: 300% 0;
}

.btn-19__in:checked + .btn-19__opt {
  color: #1a0d2e;
  mix-blend-mode: hard-light;
}

.btn-19__in:focus-visible + .btn-19__opt {
  outline: 3px solid #fff;
  outline-offset: 3px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-19__thumb,
    .btn-19__thumb::after {
    animation: none;
  }

  .btn-19__thumb {
    transition: translate .3s;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Button Group from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: CSS Icon Segmented Control with Holographic Sheen (Iridescent View Switcher)
Source: https://codefronts.com/components/css-button-groups/holographic-dial/

An icon segmented control whose active thumb shimmers like a holographic foil card — an iridescent sheen that shifts hue as it catches the light. A premium 'CSS icon segmented control holographic sheen' view switcher (grid / list / gallery / map) built on real radios, with an @property hue drift so the foil never sits still.
## HTML
```html
<section class="btn-19" aria-label="Holographic icon segmented control demo">
  <div class="btn-19__wrap">
    <p class="btn-19__label">View</p>
    <div class="btn-19__seg" role="radiogroup" aria-label="View mode">
      <input type="radio" name="btn-19" id="btn-19-1" class="btn-19__in" checked>
      <label for="btn-19-1" class="btn-19__opt" aria-label="Grid view"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.1"><rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/></svg></label>
      <input type="radio" name="btn-19" id="btn-19-2" class="btn-19__in">
      <label for="btn-19-2" class="btn-19__opt" aria-label="List view"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.1"><path d="M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01"/></svg></label>
      <input type="radio" name="btn-19" id="btn-19-3" class="btn-19__in">
      <label for="btn-19-3" class="btn-19__opt" aria-label="Gallery view"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.1"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 15l5-4 4 3 3-2 6 5"/><circle cx="9" cy="9" r="1.4"/></svg></label>
      <input type="radio" name="btn-19" id="btn-19-4" class="btn-19__in">
      <label for="btn-19-4" class="btn-19__opt" aria-label="Map view"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.1"><path d="M9 4L3 6v14l6-2 6 2 6-2V4l-6 2-6-2zM9 4v14M15 6v14"/></svg></label>
      <span class="btn-19__thumb" aria-hidden="true"></span>
    </div>
  </div>
</section>
```
## CSS
```css
@property --btn-19-h {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

.btn-19,
.btn-19 *,
.btn-19 *::before,
.btn-19 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.btn-19 {
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 120% at 50% 0%,#191426,#0a0710);
  padding: 44px 20px;
}

.btn-19__wrap {
  width: min(420px,100%);
}

.btn-19__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #c9b8ff;
  margin: 0 0 14px 4px;
}

.btn-19__seg {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  padding: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  backdrop-filter: blur(6px);
}

.btn-19__in {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.btn-19__opt {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  color: rgba(230,224,255,.55);
  cursor: pointer;
  transition: color .3s;
}

.btn-19__thumb {
  position: absolute;
  z-index: 1;
  top: 6px;
  left: 6px;
  width: calc((100% - 12px)/4);
  height: calc(100% - 12px);
  border-radius: 11px;
  overflow: hidden;
  background: repeating-linear-gradient(68deg,hsl(var(--btn-19-h) 92% 66%) 0 14px,hsl(calc(var(--btn-19-h) + 60) 92% 66%) 14px 28px,hsl(calc(var(--btn-19-h) + 130) 92% 66%) 28px 42px,hsl(calc(var(--btn-19-h) + 200) 92% 66%) 42px 56px);
  animation: btn-19-drift 6s linear infinite;
  transition: translate .42s cubic-bezier(.34,1.35,.5,1);
  box-shadow: 0 6px 20px -6px hsl(var(--btn-19-h) 90% 60% / .8);
}

.btn-19__thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-58deg,rgba(255,255,255,.5) 0 4px,transparent 4px 16px);
  mix-blend-mode: color-dodge;
  opacity: .55;
}

.btn-19__thumb::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(110deg,transparent 40%,rgba(255,255,255,.9) 50%,transparent 60%);
  translate: -60% 0;
  animation: btn-19-glare 6s ease-in-out infinite;
}

@keyframes btn-19-drift {
  to {
    --btn-19-h: 360deg;
  }
}

@keyframes btn-19-glare {
  0%,
    55% {
    translate: -80% 0;
  }

  80%,
    100% {
    translate: 80% 0;
  }
}

.btn-19__seg:has(#btn-19-2:checked) .btn-19__thumb {
  translate: 100% 0;
}

.btn-19__seg:has(#btn-19-3:checked) .btn-19__thumb {
  translate: 200% 0;
}

.btn-19__seg:has(#btn-19-4:checked) .btn-19__thumb {
  translate: 300% 0;
}

.btn-19__in:checked + .btn-19__opt {
  color: #1a0d2e;
  mix-blend-mode: hard-light;
}

.btn-19__in:focus-visible + .btn-19__opt {
  outline: 3px solid #fff;
  outline-offset: 3px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-19__thumb,
    .btn-19__thumb::after {
    animation: none;
  }

  .btn-19__thumb {
    transition: translate .3s;
  }
}
```

How this works

The base is the accessible icon segmented control from demos 02/04. The thumb wears a holographic foil made of stacked gradients: a repeating rainbow linear-gradient at a shallow angle, a second offset copy in mix-blend-mode:color-dodge, and a moving diagonal glare. An @property-registered hue drifts continuously so the iridescence breathes.

Because the foil lives on the thumb and the thumb translates by index via :has(), the holographic effect follows the selection. Icons above use mix-blend-mode so they read on any foil hue. It's all GPU compositing — no repaints beyond the gradient shift.

@property --btn-19-h{ syntax:'<angle>'; inherits:true; initial-value:0deg }
.thumb{ background:repeating-linear-gradient(70deg, hsl(var(--btn-19-h) 90% 65%) …) }

Techniques used: @property hue drift on holographic foil · stacked gradients with mix-blend-mode:color-dodge · moving diagonal glare · :has() index thumb translate · blend-mode icons for any-hue legibility · reduced-motion static foil

Make it yours

  • Foil palette = the repeating-gradient stops; tune saturation/lightness for subtle vs candy.
  • Drift speed = the --btn-19-h animation duration.
  • Glare angle/width = the diagonal highlight gradient.
  • Fewer/more views: adjust grid columns and the thumb width calc.

Gotchas — read before shipping

  • Iridescent foils can wreck icon contrast — use mix-blend-mode or a solid icon chip so glyphs stay legible on every hue.
  • Register the hue with @property or it won't animate.
  • Keep the effect on the thumb, not the whole control, so unselected icons stay calm and readable.
  • Respect prefers-reduced-motion: freeze the drift and glare.

Browser support

ChromeSafariFirefoxEdge
105+16.4+128+105+

Floor set by :has(), backdrop-filter, @property as this demo is written. The core technique itself goes back further — Chrome 85+.

@property Baseline 2024; mix-blend-mode is universal. Without @property the foil is a static iridescent gradient — still attractive.

Techniques used in this demo

mix-blend-modeMDN ↗@propertyMDN ↗backdrop-filterMDN ↗clip-pathMDN ↗:has()MDN ↗role="" (ARIA)MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →