25 CSS Button Groups
23 / 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 Pill Button Group with Rotating Conic Plasma Border (Animated Gradient Ring)

Pill buttons wrapped in a living plasma ring — a conic-gradient border that rotates continuously around each pill, glowing hotter on the active one. The mesmerizing 'CSS rotating conic plasma border button group' powered by an @property angle, using the border-box gradient trick so the animated ring never bleeds into the label.

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-23" aria-label="Rotating conic plasma pill group demo">
  <div class="btn-23__wrap">
    <p class="btn-23__label">Energy plan</p>
    <div class="btn-23__pills" role="radiogroup" aria-label="Energy plan">
      <input type="radio" name="btn-23" id="btn-23-1" class="btn-23__in" checked>
      <label for="btn-23-1" class="btn-23__pill">Solar</label>
      <input type="radio" name="btn-23" id="btn-23-2" class="btn-23__in">
      <label for="btn-23-2" class="btn-23__pill">Fusion</label>
      <input type="radio" name="btn-23" id="btn-23-3" class="btn-23__in">
      <label for="btn-23-3" class="btn-23__pill">Hybrid</label>
    </div>
  </div>
</section>
@property --btn-23-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

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

.btn-23 {
  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%,#160b1e,#08040c);
  padding: 44px 20px;
}

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

.btn-23__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #d59bff;
  margin: 0 0 16px 2px;
}

.btn-23__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

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

.btn-23__pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 30px;
  font-size: 15px;
  font-weight: 750;
  color: #b9a8cf;
  cursor: pointer;
  border-radius: 999px;
  border: 2px solid transparent;
  background: linear-gradient(#160c1f,#160c1f) padding-box,conic-gradient(from var(--btn-23-a),#5b3a8a,#8a5bd6,#3a5b8a,#5b3a8a) border-box;
  animation: btn-23-spin 7s linear infinite;
  transition: color .25s;
}

@keyframes btn-23-spin {
  to {
    --btn-23-a: 360deg;
  }
}

.btn-23__pill:hover {
  color: #e6d6ff;
}

.btn-23__in:checked + .btn-23__pill {
  color: #fff;
  background: linear-gradient(#1a0e12,#1a0e12) padding-box,conic-gradient(from var(--btn-23-a),#ff7a18,#ff2bd0,#ffd24c,#ff7a18) border-box;
  animation: btn-23-spin 3s linear infinite;
  text-shadow: 0 0 10px rgba(255,120,60,.6);
}

.btn-23__in:checked + .btn-23__pill::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  background: conic-gradient(from var(--btn-23-a),#ff7a18,#ff2bd0,#ffd24c,#ff7a18);
  filter: blur(11px);
  opacity: .55;
  z-index: -1;
  animation: btn-23-spin 3s linear infinite;
}

.btn-23__in:focus-visible + .btn-23__pill {
  outline: 3px solid #ffd24c;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-23__pill,
    .btn-23__in:checked + .btn-23__pill,
    .btn-23__in:checked + .btn-23__pill::before {
    animation: none;
  }
}
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 Pill Button Group with Rotating Conic Plasma Border (Animated Gradient Ring)
Source: https://codefronts.com/components/css-button-groups/plasma-pill/

Pill buttons wrapped in a living plasma ring — a conic-gradient border that rotates continuously around each pill, glowing hotter on the active one. The mesmerizing 'CSS rotating conic plasma border button group' powered by an @property angle, using the border-box gradient trick so the animated ring never bleeds into the label.
## HTML
```html
<section class="btn-23" aria-label="Rotating conic plasma pill group demo">
  <div class="btn-23__wrap">
    <p class="btn-23__label">Energy plan</p>
    <div class="btn-23__pills" role="radiogroup" aria-label="Energy plan">
      <input type="radio" name="btn-23" id="btn-23-1" class="btn-23__in" checked>
      <label for="btn-23-1" class="btn-23__pill">Solar</label>
      <input type="radio" name="btn-23" id="btn-23-2" class="btn-23__in">
      <label for="btn-23-2" class="btn-23__pill">Fusion</label>
      <input type="radio" name="btn-23" id="btn-23-3" class="btn-23__in">
      <label for="btn-23-3" class="btn-23__pill">Hybrid</label>
    </div>
  </div>
</section>
```
## CSS
```css
@property --btn-23-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

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

.btn-23 {
  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%,#160b1e,#08040c);
  padding: 44px 20px;
}

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

.btn-23__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #d59bff;
  margin: 0 0 16px 2px;
}

.btn-23__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

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

.btn-23__pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 30px;
  font-size: 15px;
  font-weight: 750;
  color: #b9a8cf;
  cursor: pointer;
  border-radius: 999px;
  border: 2px solid transparent;
  background: linear-gradient(#160c1f,#160c1f) padding-box,conic-gradient(from var(--btn-23-a),#5b3a8a,#8a5bd6,#3a5b8a,#5b3a8a) border-box;
  animation: btn-23-spin 7s linear infinite;
  transition: color .25s;
}

@keyframes btn-23-spin {
  to {
    --btn-23-a: 360deg;
  }
}

.btn-23__pill:hover {
  color: #e6d6ff;
}

.btn-23__in:checked + .btn-23__pill {
  color: #fff;
  background: linear-gradient(#1a0e12,#1a0e12) padding-box,conic-gradient(from var(--btn-23-a),#ff7a18,#ff2bd0,#ffd24c,#ff7a18) border-box;
  animation: btn-23-spin 3s linear infinite;
  text-shadow: 0 0 10px rgba(255,120,60,.6);
}

.btn-23__in:checked + .btn-23__pill::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  background: conic-gradient(from var(--btn-23-a),#ff7a18,#ff2bd0,#ffd24c,#ff7a18);
  filter: blur(11px);
  opacity: .55;
  z-index: -1;
  animation: btn-23-spin 3s linear infinite;
}

.btn-23__in:focus-visible + .btn-23__pill {
  outline: 3px solid #ffd24c;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-23__pill,
    .btn-23__in:checked + .btn-23__pill,
    .btn-23__in:checked + .btn-23__pill::before {
    animation: none;
  }
}
```

How this works

Each pill uses the double-background border trick: a solid padding-box layer for the pill face plus a border-box conic-gradient that shows only through the transparent border. An @property-registered <angle> animates 0→360°, spinning the conic gradient so the plasma ring rotates around the pill edge.

Inactive pills spin a cool, dim plasma; the :checked pill switches to a hot palette, speeds up and adds a blurred glow duplicate beneath — so selection reads as "powered up". Because only the border layer animates, the text stays perfectly crisp and legible.

@property --btn-23-a{ syntax:'<angle>'; inherits:false; initial-value:0deg }
background:linear-gradient(#111,#111) padding-box, conic-gradient(from var(--btn-23-a), …) border-box;

Techniques used: @property-animated conic angle · padding-box/border-box double-background border ring · per-state plasma palette + speed-up · blurred glow duplicate on active · crisp label over animated border · reduced-motion static ring

Make it yours

  • Plasma palette = the conic-gradient hue stops; hot for active, cool for idle.
  • Spin speed = the --btn-23-a animation duration (active spins faster).
  • Ring thickness = the transparent border width.
  • Radios for single-select, or checkboxes for a multi-active plasma set.

Gotchas — read before shipping

  • The border must be transparent and set to a real width, or the conic border-box layer has nothing to show through.
  • Register --btn-23-a with @property — a plain custom prop won't spin.
  • Continuous rotation is motion; pause it under prefers-reduced-motion and keep a static gradient ring.
  • Keep the face opaque so the moving ring never reduces text contrast.

Browser support

ChromeSafariFirefoxEdge
85+16.4+128+85+

@property Baseline 2024; the border trick is universal. Without @property the ring is a static conic gradient — still a distinctive look.

Techniques used in this demo

@propertyMDN ↗conic-gradient()MDN ↗filterMDN ↗clip-pathMDN ↗role="" (ARIA)MDN ↗radial-gradient()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →