47 CSS Toggles & Switches
40 / 47

All 47 in 47 CSS Toggles & Switches

  1. 01Minimal iOS-Style Toggle Switch
  2. 02Dark Mode Sun / Moon Theme Switcher
  3. 033D Neumorphic Pill Toggle
  4. 04Gooey Liquid Morphing Switch
  5. 05Bouncy Elastic Physics Toggle
  6. 06Inner Text ON / OFF Switch
  7. 07SaaS Pricing Segmented Pill Toggle
  8. 08Haptic Mechanical Keycap Toggles
  9. 09Waveform Mute Toggle
  10. 10Timed Auto-Off Toggle
  11. 11Biometric Hold-to-Confirm Scan Toggle
  12. 12Split-Flap Departure Board Toggle
  13. 13Permission Stack with Live Status
  14. 14Material Design 3 Switch
  15. 15Skeuomorphic Wall Light Switch
  16. 16Neon Cyberpunk Toggle
  17. 17Brutalist Snap Toggle
  18. 18Day / Night Landscape Scene Switch
  19. 193D Flip Card Toggle
  20. 20Sliding Pill with Traveling Label
  21. 21Glassmorphism Frosted Toggle
  22. 22Skeuomorphic Rotary Knob Toggle
  23. 23iOS Light Mode Settings List
  24. 24Outline Minimal currentColor Toggle
  25. 25Bouncy Pebble Organic Toggle
  26. 26Industrial Rocker I/O Switch
  27. 27Accessible ARIA role=switch Toggle
  28. 28Haptic Keys
  29. 29Waveform Toggle
  30. 30Timed Toggle
  31. 31Biometric Scan
  32. 32Split-Flap Board
  33. 33Permission Stack
  34. 34iOS
  35. 35Material Design
  36. 36Skeuomorphic Light Switch
  37. 37Neon Cyber
  38. 38Brutalist
  39. 39Day / Night
  40. 40Flip Card
  41. 41Sliding Pill with Label
  42. 42Glassmorphism
  43. 43Skeuomorphic Knob
  44. 44iOS Light Mode
  45. 45Outline
  46. 46Bouncy Pebble
  47. 47Industrial Rocker
Pure CSSMIT licensed

Flip Card

A 3D flip toggle — front face shows OFF, back face shows ON. Rotates around the Y axis on toggle. Showcases transform-style: preserve-3d.

Live Demo
Try it

Build interactive UI like this from scratch: 20 HTML, CSS & JavaScript projects

ZTM · JavaScript Web Projects · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code
Check ZTM Course

The code

<label class="tgl-40">
  <input class="tgl-40__input" type="checkbox" checked>
  <span class="tgl-40__card" aria-hidden="true">
    <span class="tgl-40__face tgl-40__on">ON</span>
    <span class="tgl-40__face tgl-40__off">OFF</span>
  </span>
  <span class="tgl-40__label">Auto-save</span>
</label>
.tgl-40 {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  color: #f0eeff;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 48px 20px;
  background: #14141e;
  box-sizing: border-box;
}

.tgl-40__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.tgl-40__card {
  position: relative;
  width: 56px;
  height: 30px;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.tgl-40__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 6px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.tgl-40__on {
  background: linear-gradient(135deg, #2eb88a 0%, #1d9c70 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}

.tgl-40__off {
  background: linear-gradient(135deg, #4a4a52 0%, #2a2a30 100%);
  color: #b8b6d4;
  transform: rotateY(180deg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.tgl-40__input:not(:checked) ~ .tgl-40__card {
  transform: rotateY(180deg);
}

.tgl-40__input:focus-visible ~ .tgl-40__card {
  outline: 2px solid #7c6cff;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .tgl-40__card {
    transition: none;
  }
}
/* No JavaScript — a preserve-3d card rotates rotateY(180°) between two backface-hidden ON/OFF faces. */
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 Toggles & Switche 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: Flip Card
Source: https://codefronts.com/components/css-toggles-switches/flip-card/

A 3D flip toggle — front face shows OFF, back face shows ON. Rotates around the Y axis on toggle. Showcases transform-style: preserve-3d.
## HTML
```html
<label class="tgl-40">
  <input class="tgl-40__input" type="checkbox" checked>
  <span class="tgl-40__card" aria-hidden="true">
    <span class="tgl-40__face tgl-40__on">ON</span>
    <span class="tgl-40__face tgl-40__off">OFF</span>
  </span>
  <span class="tgl-40__label">Auto-save</span>
</label>
```
## CSS
```css
.tgl-40 {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  color: #f0eeff;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 48px 20px;
  background: #14141e;
  box-sizing: border-box;
}

.tgl-40__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.tgl-40__card {
  position: relative;
  width: 56px;
  height: 30px;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.tgl-40__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 6px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.tgl-40__on {
  background: linear-gradient(135deg, #2eb88a 0%, #1d9c70 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}

.tgl-40__off {
  background: linear-gradient(135deg, #4a4a52 0%, #2a2a30 100%);
  color: #b8b6d4;
  transform: rotateY(180deg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.tgl-40__input:not(:checked) ~ .tgl-40__card {
  transform: rotateY(180deg);
}

.tgl-40__input:focus-visible ~ .tgl-40__card {
  outline: 2px solid #7c6cff;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .tgl-40__card {
    transition: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — a preserve-3d card rotates rotateY(180°) between two backface-hidden ON/OFF faces. */
```

How this works

A 56×30 card with two absolutely-stacked faces — green ON and graphite OFF, both backface-visibility:hidden, the OFF face pre-rotated 180°. The card wrapper carries transform-style:preserve-3d and rotates rotateY(180deg) when unchecked, so exactly one face shows at any moment; perspective:400px on the label gives the turn its depth.

State text is baked into each face (ON/OFF), so mid-flip ambiguity lasts only the 0.45s turn and the landed state is always spelled out. This is the minimum-DOM flip-card: one input, one card, two faces.

Make it yours

  • Flip on rotateX instead for a flashcard feel.
  • Put icons on the faces (✓/✕ as SVGs) alongside the text.
  • Raise perspective to 800px+ for a subtler, flatter turn.
  • Grow it into a full info card — see demo 19 for faces with body copy.

Gotchas — read before shipping

  • preserve-3d on the card and backface-visibility:hidden on BOTH faces are all required — miss one and faces ghost through each other.
  • Perspective must sit on an ancestor (the label here), not the rotating card.
  • Keep face content mirrored in importance — users see whichever lands, so neither face can be an afterthought.

Browser support

ChromeSafariFirefoxEdge
36+9+16+36+

Classic 3D flip stack; universal in modern browsers.

Techniques used in this demo

3D transforms (perspective + preserve-3d)MDN ↗:focus-visibleMDN ↗box-shadowMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →