25 CSS Button Groups
10 / 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 Wallet Connect Button Grid for Web3 Sign-In (MetaMask, WalletConnect, Coinbase)

The Web3 connect-wallet modal, styled properly: a responsive grid of wallet sign-in buttons — MetaMask, WalletConnect, Coinbase, Ledger — each with a logo tile, name, status hint and a recommended badge. The most-wanted 'CSS wallet connect button grid Web3 sign-in' layout for dApps and crypto onboarding, dark-mode native and fully keyboard-operable.

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-10" aria-label="Web3 wallet connect grid demo">
  <div class="btn-10__modal">
    <p class="btn-10__eyebrow">Connect</p>
    <h3 class="btn-10__title">Choose a wallet</h3>
    <p class="btn-10__sub">Sign in to continue. We never store your keys.</p>
    <div class="btn-10__grid">
      <button type="button" class="btn-10__tile btn-10__tile--rec">
        <span class="btn-10__flag">Recommended</span>
        <span class="btn-10__logo" style="--l:linear-gradient(135deg,#f6851b,#e2761b)">M</span>
        <span class="btn-10__name">MetaMask</span>
        <span class="btn-10__hint">Detected in browser</span>
      </button>
      <button type="button" class="btn-10__tile">
        <span class="btn-10__logo" style="--l:linear-gradient(135deg,#3b99fc,#1f6fe5)">W</span>
        <span class="btn-10__name">WalletConnect</span>
        <span class="btn-10__hint">Scan with app</span>
      </button>
      <button type="button" class="btn-10__tile">
        <span class="btn-10__logo" style="--l:linear-gradient(135deg,#2c5ff6,#0a3ecb)">C</span>
        <span class="btn-10__name">Coinbase</span>
        <span class="btn-10__hint">Popular</span>
      </button>
      <button type="button" class="btn-10__tile">
        <span class="btn-10__logo" style="--l:linear-gradient(135deg,#3a3a3a,#141414)">L</span>
        <span class="btn-10__name">Ledger</span>
        <span class="btn-10__hint">Hardware</span>
      </button>
    </div>
  </div>
</section>
.btn-10,
.btn-10 *,
.btn-10 *::before,
.btn-10 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.btn-10 {
  --a1: oklch(0.6 0.22 300);
  --a2: oklch(0.75 0.15 200);
  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% 100% at 50% -10%,#1b1533,#0a0713);
  padding: 44px 20px;
}

.btn-10__modal {
  width: min(460px,100%);
  background: linear-gradient(180deg,rgba(40,30,70,.55),rgba(18,12,34,.85));
  border: 1px solid rgba(150,120,255,.2);
  border-radius: 22px;
  padding: 30px 28px 32px;
  box-shadow: 0 40px 90px -40px rgba(90,40,220,.6);
  backdrop-filter: blur(12px);
}

.btn-10__eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: linear-gradient(90deg,var(--a1),var(--a2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn-10__title {
  font-size: 26px;
  font-weight: 800;
  color: #f2eeff;
  letter-spacing: -.02em;
  margin: 5px 0 6px;
}

.btn-10__sub {
  font-size: 14px;
  color: rgba(220,210,255,.6);
  margin-bottom: 22px;
}

.btn-10__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  gap: 12px;
}

.btn-10__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 18px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  transition: translate .2s,border-color .2s,background .2s;
}

.btn-10__tile:hover {
  translate: 0 -3px;
  border-color: var(--a2);
  background: rgba(255,255,255,.07);
}

.btn-10__tile--rec {
  border-color: transparent;
  background: linear-gradient(rgba(18,12,34,.9),rgba(18,12,34,.9)) padding-box,linear-gradient(135deg,var(--a1),var(--a2)) border-box;
  border: 1.5px solid transparent;
}

.btn-10__flag {
  position: absolute;
  top: -9px;
  right: 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #160a2c;
  background: linear-gradient(90deg,var(--a1),var(--a2));
  padding: 4px 9px;
  border-radius: 999px;
}

.btn-10__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--l);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
}

.btn-10__name {
  font-size: 15.5px;
  font-weight: 750;
  color: #f2eeff;
}

.btn-10__hint {
  font-size: 12px;
  color: rgba(200,190,240,.55);
}

.btn-10__tile:focus-visible {
  outline: 3px solid var(--a2);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-10__tile {
    transition: 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 Wallet Connect Button Grid for Web3 Sign-In (MetaMask, WalletConnect, Coinbase)
Source: https://codefronts.com/components/css-button-groups/css-wallet-connect-button-grid-for-web3-sign-in-metamask-walletconnect-coinbase/

The Web3 connect-wallet modal, styled properly: a responsive grid of wallet sign-in buttons — MetaMask, WalletConnect, Coinbase, Ledger — each with a logo tile, name, status hint and a recommended badge. The most-wanted 'CSS wallet connect button grid Web3 sign-in' layout for dApps and crypto onboarding, dark-mode native and fully keyboard-operable.
## HTML
```html
<section class="btn-10" aria-label="Web3 wallet connect grid demo">
  <div class="btn-10__modal">
    <p class="btn-10__eyebrow">Connect</p>
    <h3 class="btn-10__title">Choose a wallet</h3>
    <p class="btn-10__sub">Sign in to continue. We never store your keys.</p>
    <div class="btn-10__grid">
      <button type="button" class="btn-10__tile btn-10__tile--rec">
        <span class="btn-10__flag">Recommended</span>
        <span class="btn-10__logo" style="--l:linear-gradient(135deg,#f6851b,#e2761b)">M</span>
        <span class="btn-10__name">MetaMask</span>
        <span class="btn-10__hint">Detected in browser</span>
      </button>
      <button type="button" class="btn-10__tile">
        <span class="btn-10__logo" style="--l:linear-gradient(135deg,#3b99fc,#1f6fe5)">W</span>
        <span class="btn-10__name">WalletConnect</span>
        <span class="btn-10__hint">Scan with app</span>
      </button>
      <button type="button" class="btn-10__tile">
        <span class="btn-10__logo" style="--l:linear-gradient(135deg,#2c5ff6,#0a3ecb)">C</span>
        <span class="btn-10__name">Coinbase</span>
        <span class="btn-10__hint">Popular</span>
      </button>
      <button type="button" class="btn-10__tile">
        <span class="btn-10__logo" style="--l:linear-gradient(135deg,#3a3a3a,#141414)">L</span>
        <span class="btn-10__name">Ledger</span>
        <span class="btn-10__hint">Hardware</span>
      </button>
    </div>
  </div>
</section>
```
## CSS
```css
.btn-10,
.btn-10 *,
.btn-10 *::before,
.btn-10 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.btn-10 {
  --a1: oklch(0.6 0.22 300);
  --a2: oklch(0.75 0.15 200);
  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% 100% at 50% -10%,#1b1533,#0a0713);
  padding: 44px 20px;
}

.btn-10__modal {
  width: min(460px,100%);
  background: linear-gradient(180deg,rgba(40,30,70,.55),rgba(18,12,34,.85));
  border: 1px solid rgba(150,120,255,.2);
  border-radius: 22px;
  padding: 30px 28px 32px;
  box-shadow: 0 40px 90px -40px rgba(90,40,220,.6);
  backdrop-filter: blur(12px);
}

.btn-10__eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: linear-gradient(90deg,var(--a1),var(--a2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn-10__title {
  font-size: 26px;
  font-weight: 800;
  color: #f2eeff;
  letter-spacing: -.02em;
  margin: 5px 0 6px;
}

.btn-10__sub {
  font-size: 14px;
  color: rgba(220,210,255,.6);
  margin-bottom: 22px;
}

.btn-10__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  gap: 12px;
}

.btn-10__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 18px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  transition: translate .2s,border-color .2s,background .2s;
}

.btn-10__tile:hover {
  translate: 0 -3px;
  border-color: var(--a2);
  background: rgba(255,255,255,.07);
}

.btn-10__tile--rec {
  border-color: transparent;
  background: linear-gradient(rgba(18,12,34,.9),rgba(18,12,34,.9)) padding-box,linear-gradient(135deg,var(--a1),var(--a2)) border-box;
  border: 1.5px solid transparent;
}

.btn-10__flag {
  position: absolute;
  top: -9px;
  right: 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #160a2c;
  background: linear-gradient(90deg,var(--a1),var(--a2));
  padding: 4px 9px;
  border-radius: 999px;
}

.btn-10__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--l);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
}

.btn-10__name {
  font-size: 15.5px;
  font-weight: 750;
  color: #f2eeff;
}

.btn-10__hint {
  font-size: 12px;
  color: rgba(200,190,240,.55);
}

.btn-10__tile:focus-visible {
  outline: 3px solid var(--a2);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-10__tile {
    transition: none;
  }
}
```

How this works

The grid is a display:grid with grid-template-columns: repeat(auto-fit,minmax(150px,1fr)), so wallet tiles reflow from two-up to one-up without media queries. Each tile is a real <button> containing a logo placeholder tile, the wallet name and a small state hint ("Detected", "Popular"). A gradient hairline border on hover reads as an interactive glow without a heavy shadow.

The "recommended" wallet gets a corner badge and a persistent accent ring. Focus rings, hover lift and an installed/uninstalled hint keep the whole thing usable by keyboard and clear to first-time crypto users, who are the hardest audience to onboard.

.grid{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) }
.tile:hover{ translate:0 -3px; border-color:var(--a2) }

Techniques used: auto-fit minmax responsive grid (no media queries) · gradient hairline border via border-image · logo placeholder tiles · corner "recommended" badge · hover lift + focus-visible ring · dark-first palette

Make it yours

  • Two-color scheme lives in --a1/--a2 — a violet→cyan Web3 gradient here.
  • Drop real wallet SVG logos into the .tile__logo tiles.
  • Change minmax(150px,1fr) to tune how many wallets sit per row.
  • Show connection status by toggling a data-state attribute and styling [data-state=detected].

Gotchas — read before shipping

  • Each wallet button needs a clear accessible name; don't rely on the logo image alone.
  • Show whether a wallet extension is installed — hiding that state is the top Web3 onboarding complaint.
  • Keep tap targets ≥44px and the grid usable one-handed on mobile.
  • Never auto-trigger a wallet connection on focus/hover — connection must be an explicit click.

Browser support

ChromeSafariFirefoxEdge
111+15.4+113+111+

Floor set by oklch(), backdrop-filter as this demo is written. The core technique itself goes back further — Chrome all.

auto-fit/minmax grid and border-image are universally supported. Pure layout + CSS — the wallet SDK wiring is your app's concern.

Techniques used in this demo

background-clip: textMDN ↗backdrop-filterMDN ↗radial-gradient()MDN ↗grid-templateMDN ↗:focus-visibleMDN ↗box-shadowMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →