Summarize this article with:
The default checkbox looks terrible. Everyone knows it.
That’s why CSS toggle switch examples have become one of the most searched UI patterns among frontend developers.
These sliding on-off switches transform clunky form inputs into sleek, touch-friendly controls. No JavaScript required for the basics.
This guide covers everything you need to build custom toggle switches from scratch. You’ll learn the HTML structure, core CSS properties, accessibility requirements, and solutions to common problems.
We’ve included working code snippets you can copy directly into your projects.
Whether you’re building a dark mode toggle, settings panel, or accessible forms, you’ll find a switch style that fits.
What is a CSS Toggle Switch
A CSS toggle switch is a UI component that lets users flip between two states. On or off. Enabled or disabled.
These switches replace the default checkbox input with a slider appearance built entirely with HTML and CSS.
You’ll find them everywhere. Settings panels, preference forms, dark mode toggles, notification controls.
Three core elements make up every toggle switch:
- A container element (usually a label)
- A slider track (the background bar)
- A moveable thumb indicator (the sliding circle)
The visual state changes through CSS transitions when users click or tap.
No JavaScript required for basic functionality.
CSS Toggle Switch Examles To Check Out
Toggle Radial Effect
See the Pen
#028 – Toggle Radial Effect by Florin Pop (@FlorinPop17)
on CodePen.
Project Management Triangle
Dark Mode Toggle Switch
CSS Pancake
Jellyfish UI Kit
Gender Toggle Pure CSS
CSS Toggle Switch With Text
Kitty Toggle
Creative CSS Toggles
Pure CSS Bulb Switch
CSS Toggle Switch button
Custom Toggle Switch
Egg Toggle
BB-8 Toggle Switch|Pure CSS
iOs toggle switch CSS
Emo Toggle
Flight Toggle
Funny toggle switch
Toggle Switch with Rolling Label
Springy Switchbox
Eye Switch
Subscribe Buttons (CSS)
Accessible Toggle Switch with check
Single-element Toggle Switch
Awesome Toggle Button
Totoro Toggle
Sun And Moon Toggle Switch
Flat Toggle Switch
Oldschool Toggeler in CSS3
Day/night toggle switch animated
Huge Toggle Switch
Skew Switch
Funky CSS3 Toggle Buttons
Realistic Toggle Button
Faction Toggle
Google CSS Only Toggle Switch
Weekday Toggle Switch with Checkbox and CSS3
Pure CSS Dark Mode Toggle
Antsy Toggles
Checkbox Rocker Toggle Switch
Press the Button
How CSS Toggle Switches Work
The magic happens with the :checked pseudo-class.
When a user clicks the switch, the hidden checkbox toggles between checked and unchecked states. CSS selectors detect this change and apply different styles to the visible slider element.
Here’s the basic structure:
- An
<input type="checkbox">element stays visually hidden - A
<label>element wraps the visible switch components - The sibling selector (
+or~) connects checkbox state to slider styling
The checkbox does the functional work. The label and span elements handle the visuals.
Clicking anywhere on the label triggers the checkbox state change. This maintains web accessibility while hiding the default browser checkbox appearance.
Types of CSS Toggle Switches
Five main toggle switch styles dominate modern user interface design.
Each serves different aesthetic and functional purposes.
Rounded Pill Switches
Fully circular ends with a circular thumb indicator. The most common style in mobile apps and responsive design layouts.
Border-radius set to 50% of the element height creates the pill shape.
Flat Rectangular Switches
Sharp corners with a square or rectangular thumb. Pairs well with minimalist design systems and geometric layouts.
Zero border-radius keeps everything angular.
iOS-Style Switches
Replicates Apple’s toggle design. White thumb, subtle box-shadow effects, green active state (#34C759).
The thumb slightly overlaps the track edges for that authentic iOS feel.
Material Design Switches
Follows Google’s design guidelines. Includes elevation shadows, CSS ripple effects on interaction, and specific color transitions.
The thumb sits on top of a thinner track rather than inside it.
Animated Gradient Switches
Displays color transitions or moving gradients when toggled. Works well for creative portfolios and entertainment sites.
Uses CSS keyframes for the gradient animation effect.
CSS Properties for Toggle Switches
Twelve CSS properties control toggle switch appearance and behavior.
Transform Property
The transform property moves the thumb between positions. translateX() shifts it horizontally when the switch changes state.
Typical value: transform: translateX(26px) for the checked state.
Transition Property
Creates smooth CSS animation between states. Values between 0.2s and 0.4s feel natural.
Apply to both background-color and transform for synchronized movement.
Border-Radius Property
Controls corner roundness. A value of 50% or half the element height produces fully rounded pill shapes.
Use the CSS Border Radius Generator for quick value calculations.
Box-Shadow Property
Adds depth to the thumb indicator. Creates that lifted, tactile appearance users expect from toggle switches.
Try the CSS Box Shadow Generator for custom shadow values.
Additional Properties
- width/height – defines track and thumb dimensions
- background-color – sets active and inactive state colors
- position: absolute – positions thumb inside track
- opacity – hides the native checkbox
- cursor: pointer – indicates clickability
- appearance: none – removes default browser styling
- outline – manages focus visibility
How to Create a CSS Toggle Switch
Building a custom toggle switch takes four steps.
HTML Structure
Start with an input checkbox wrapped in a label element. Add a span for the slider track and another for the thumb.
“ <label class="switch"> <input type="checkbox"> <span class="slider"></span> </label> `
Hiding the Default Checkbox
Remove the native checkbox appearance without breaking functionality.
` .switch input { opacity: 0; width: 0; height: 0; position: absolute; } `
Styling the Track
The slider span becomes your visible track. Set dimensions, background color, and border-radius.
` .slider { width: 60px; height: 34px; background-color: #ccc; border-radius: 34px; position: relative; cursor: pointer; transition: background-color 0.3s; } `
Styling the Thumb
Use the ::before pseudo-element for the sliding thumb indicator.
` .slider::before { content: ""; position: absolute; width: 26px; height: 26px; left: 4px; bottom: 4px; background-color: white; border-radius: 50%; transition: transform 0.3s; }
input:checked + .slider { background-color: #2196F3; }
input:checked + .slider::before { transform: translateX(26px); } `
The sibling selector (+) targets the slider when the checkbox is checked, triggering both the background color change and thumb movement.
Accessibility for CSS Toggle Switches
Accessible toggle switches meet five requirements.
Skip any of these and you’ll exclude users who rely on keyboards or screen readers.
Visible Focus States
The :focus-visible pseudo-class adds focus indicators for keyboard users without affecting mouse interactions.
` input:focus-visible + .slider { outline: 2px solid #2196F3; outline-offset: 2px; } `
Color Contrast Requirements
WCAG 2.1 requires a minimum color contrast ratio of 3:1 for UI components.
Test your active and inactive states against their backgrounds using browser DevTools or the Lighthouse audit tool.
Keyboard Operability
Users must activate the switch using Space or Enter keys. Native checkbox inputs handle this automatically when properly labeled.
Never use div or span elements as the interactive base.
ARIA Labels and Attributes
ARIA attributes communicate state to assistive technologies.
` <input type="checkbox" role="switch" aria-checked="false" aria-label="Enable dark mode"> `
The role=”switch” attribute tells screen readers this is a toggle, not a standard checkbox.
Screen Reader Compatibility
Test with NVDA, VoiceOver, or JAWS screen readers. The switch state (on/off) should announce clearly when toggled.
Include descriptive label text that explains what the switch controls.
Browser Support for CSS Toggle Switches
CSS toggle switches work in all modern browsers.
The :checked pseudo-class has 98.7% global support according to Can I Use data.
Supported Browsers
- Chrome 89+ (full support)
- Firefox 85+ (full support)
- Safari 14+ (full support)
- Microsoft Edge 89+ (full support)
Cross-Browser Considerations
Vendor prefixes handle older browser versions. Use -webkit-appearance: none for Safari and older Chrome.
The -moz-appearance property covers Firefox compatibility.
Cross-browser compatibility testing catches rendering differences in thumb positioning and transition smoothness.
Mobile Browser Support
iOS Safari and Android Chrome render toggle switches identically to their desktop counterparts.
Touch targets should be at least 44×44 pixels for mobile-first design compliance.
Common CSS Toggle Switch Problems
Four issues trip up developers most often.
Inconsistent Sizing Across Browsers
Different browsers apply different default styles to form elements.
Reset with appearance: none, -webkit-appearance: none, and explicit width/height values. Use media queries to adjust sizing for different viewport widths.
Focus State Accessibility Failures
Removing default outlines without adding custom focus indicators violates WCAG guidelines.
Always pair outline: none with a visible alternative like box-shadow or border changes on :focus-visible.
Transition Performance Issues
Animating properties other than transform and opacity triggers layout recalculations.
Stick to GPU-accelerated properties. Avoid animating width, height, or margin.
Label Click Area Problems
Small click targets frustrate users, especially on mobile devices.
Wrap the entire switch in a
Z-Index Layering Conflicts
The thumb indicator disappearing behind other elements signals z-index issues.
Set position: relative on the container and explicit z-index values on the thumb pseudo-element.
Transition Timing Mismatches
Background color changing before or after thumb movement looks janky.
Apply identical transition duration values to both the slider background and the ::before thumb element for synchronized animation.
FAQ on CSS Toggle Switches
How do I create a toggle switch with only CSS?
Use a hidden checkbox input paired with a label element. Style the label’s ::before pseudo-element as the thumb indicator. The :checked pseudo-class triggers style changes when users click the switch.
Can toggle switches work without JavaScript?
Yes. Pure CSS toggle switches use native checkbox functionality. The browser handles state changes automatically. JavaScript only becomes necessary for advanced features like saving preferences or triggering Ajax requests.
How do I make a toggle switch accessible?
Include proper label text, maintain usability with keyboard navigation, and add role=”switch” with aria-checked attributes. Test with screen readers like NVDA or VoiceOver to verify announcements.
What size should a toggle switch be?
Minimum touch target is 44×44 pixels per WCAG guidelines. Common track dimensions are 50-60px wide and 26-34px tall. The thumb should be slightly smaller than track height with 3-4px padding.
How do I change toggle switch colors?
Target the background-color property on both states. Style the unchecked state on the slider class, then override with input:checked + .slider selector for the active color.
Why isn’t my toggle switch animating smoothly?
Add transition properties to both the slider background and ::before thumb element. Use identical duration values like transition: 0.3s ease. Animate only transform and opacity for best performance.
How do I add icons to a toggle switch?
Use the ::before and ::after pseudo-elements on the slider. Add icon content via the content property with Unicode characters or SVG backgrounds. Position icons on opposite ends of the track.
Can I use toggle switches in Bootstrap projects?
Yes. Bootstrap 5 includes native form switch classes, or use the Bootstrap toggle switch component. Custom CSS switches also work alongside Bootstrap’s grid and utility classes without conflicts.
How do I style a toggle switch for dark mode?
Use CSS custom properties for colors. Define light and dark values, then swap them with prefers-color-scheme media query. This approach lets one toggle switch adapt to system preferences automatically.
What’s the difference between a toggle switch and checkbox?
Functionally identical. Both store boolean values. Toggle switches provide immediate visual feedback and imply instant action. CSS checkboxes traditionally indicate selections that require form submission to apply.
Conclusion
These CSS toggle switch examples give you everything needed to replace default checkboxes with modern, interactive controls.
The core technique stays the same across all styles. Hidden input, visible label, pseudo-elements for the sliding thumb.
Focus on accessibility from the start. Keyboard navigation, proper accessible typography for labels, and screen reader support aren’t optional extras.
Test your switches across Chrome, Firefox, Safari, and Edge. Small rendering differences can break the user experience on certain browsers.
Start with the simple rounded pill switch. Master that foundation before adding CSS hover effects, gradient animations, or icon states.
Copy the code snippets, tweak the colors to match your design system, and ship.
