Top 38 CSS Toggle Switches to Try in 2025

CSS toggle switches are custom-designed toggles created with CSS to replace standard checkboxes. They offer smooth animations and stylish designs, making interactions easier to use and more visually appealing, while boosting user engagement and improving the overall UI/UX.

What Are CSS Toggle Switches?

CSS toggle switches are visual components built using HTML and CSS that act like on/off switches. They function like a checkbox but are styled to look like modern toggle buttons. You can use them to control things like dark mode, notifications, or yes/no choices.

Unlike regular checkboxes, toggle switches can be fully customized in terms of size, color, and animation to match your website’s style. There are no strict rules on how they should look or behave, so they’re flexible and can be used in both simple and complex web interfaces.

CSS Toggle Switch Examples

Here are some CSS Toggle Switch examples you can explore and even use directly in your own projects.

1. The Checkbox Toggle Switch

A checkbox toggle switch looks like a sliding switch but behaves like a checkbox. It has two states: checked and unchecked, which usually mean on and off. Visually, it gives a modern feel, but underneath, it functions the same as a standard checkbox.

See the Pen
Untitled by Harish Rajora (@harishrajora)
on CodePen.

2. Cat Toggle Switch

A cat CSS toggle switch changes its look to show a cat that reflects either a daytime or nighttime theme. This CSS toggle switch uses animations and styling to make the on/off change visually interesting.

See the Pen
Toggle Switch 2 by Harish Rajora (@harishrajora)
on CodePen.

3. Physical Button Type Toggle Switch

A physical button type CSS toggle mimics a clickable button that changes appearance when toggled. This style uses CSS to create the effect of pressing or releasing a button, giving a tactile feel on screen. It’s useful for making toggle controls look more familiar and easy to understand for users who expect a button-like interaction.

See the Pen
Toggle Switch 3 by Harish Rajora (@harishrajora)
on CodePen.

4. Rolling Ball Toggle Switch

A rolling ball CSS toggle switch is a type of switch where a small ball or circle slides back and forth to show on and off states. When you toggle it, the ball rolls smoothly from one side to the other, giving a clear visual cue about the switch’s position.

See the Pen
Toggle Switch 4 by Harish Rajora (@harishrajora)
on CodePen.

5. Gender Symbol Toggle Switch

A gender symbol CSS toggle switch represents two states, typically for gender selection. Instead of using plain text or shapes, it shows the respective symbols on each side of the switch. When the switch is toggled, it slides from one symbol to the other, indicating the selected option.

See the Pen
Untitled by Harish Rajora (@harishrajora)
on CodePen.

6. Accept Cookies Toggle Switch

An accept cookies CSS toggle switch is used to let users choose whether they want to allow cookies or not. It usually has two positions: accept and decline, or just on and off, depending on how it’s set up. It is often styled like a modern switch, with smooth transitions to show the state change.

See the Pen
Toggle Switch 5 by Harish Rajora (@harishrajora)
on CodePen.

7. Tick-Cross Toggle Switch

A tick-cross CSS toggle switch uses a checkmark and a cross to show the two states of the switch. When it’s active, you see a tick; when it’s inactive, you see a cross. This makes it clear whether something is accepted or rejected, enabled or disabled.

See the Pen
Tick Cross by Harish Rajora (@harishrajora)
on CodePen.

8. Subscribe With Image And Text Toggle Switch

A subscribe with image and text CSS toggle shows subscription status. One side might display an image like a bell or envelope with the word “Subscribe,” while the other side changes to something like “Unsubscribed” with a different icon. When toggled, the switch slides or fades between the two states.

See the Pen
Subscribe Codepen by Harish Rajora (@harishrajora)
on CodePen.

9. Pentagon CSS Toggle Switch

A pentagon CSS toggle switch uses a pentagon shape instead of the usual round or rectangular shapes. The switch can change color, rotate, or shift position when toggled to show the on and off states.

See the Pen
Toggle Switch 8 by Harish Rajora (@harishrajora)
on CodePen.

10. Slider CSS Toggle Switch

A slider CSS toggle switch is a common switch style where the toggle knob slides horizontally between two positions. One side usually represents “on” and the other “off.” When the user clicks it, the knob smoothly moves from one end to the other, showing a clear change in state.

See the Pen
Slider Toggle by Harish Rajora (@harishrajora)
on CodePen.

11. Ice and Fire CSS Toggle Switch

An ice and fire CSS toggle switch uses visual themes to represent two opposite states, cold and hot. One side shows icy colors like blue or white with snowflake icons, while the other side uses warm colors like red or orange with fire symbols.

When toggled, the switch transitions between these two themes using animations and color changes.

See the Pen
Toggle Switch 10 by Harish Rajora (@harishrajora)
on CodePen.

12. Tick-Cross CSS Toggle Switch

A tick-cross CSS toggle switch uses two clear buttons, one with a tick and the other with a cross, to represent the two states. Instead of a sliding switch, the user clicks directly on the tick or the cross to choose the desired option.

See the Pen
Toggle Switch 11 by Harish Rajora (@harishrajora)
on CodePen.

13. Overlapping Circles CSS Toggle Switch

An overlapping circles CSS toggle switch uses two circular shapes that partially overlap each other to show two states. When toggled, the active circle comes to the front or shifts position to indicate the selected state.

See the Pen
Toggle Switch 12 by Harish Rajora (@harishrajora)
on CodePen.

14. Simple Subscribe Toggle Switch

A simple subscribe toggle switch lets users turn the subscription on or off. It usually looks like a small slider or button that moves between two states, often labeled “Subscribe” and “Unsubscribe” or just “On” and “Off”.

See the Pen
Subscribe Toggle by Harish Rajora (@harishrajora)
on CodePen.

15. Indicator CSS Toggle Switch

An indicator CSS toggle switch shows the current state using a small marker or highlight that moves between two positions. Instead of changing the whole switch, just the indicator moves to show if it’s on or off.

See the Pen
Toggle Switch 13 by Harish Rajora (@harishrajora)
on CodePen.

16. Single Yes-No Toggle

A single yes-no toggle is a switch that lets users choose between two clear options: yes or no. It usually has two labels or sides, one saying “Yes” and the other “No,” and a slider or button moves to show which is selected.

See the Pen
Background Switcher by Harish Rajora (@harishrajora)
on CodePen.

17. Folding CSS Toggle Switch

A folding CSS toggle switch uses a folding animation to change between on and off states. When toggled, part of the switch appears to fold or flip, revealing the new state on the other side.

See the Pen
Folding Toggle by Harish Rajora (@harishrajora)
on CodePen.

18. Sliding Bar CSS Toggle

A sliding bar CSS toggle switch features a horizontal bar with a knob that slides from one side to the other to indicate on or off. When toggled, the knob moves smoothly along the bar, often accompanied by a color change to show the active state.

See the Pen
Toggle Switch 15 by Harish Rajora (@harishrajora)
on CodePen.

19. Pancake Toggle

A pancake toggle is a type of CSS toggle switch that looks like stacked, rounded layers, similar to a stack of pancakes. When toggled, one layer slides or shifts to show the on or off state.

See the Pen
Pancake Toggle by Harish Rajora (@harishrajora)
on CodePen.

20. Fireball Toggle

A fireball toggle is a CSS toggle switch where the moving part is styled like a fireball. When toggled, the fireball slides from one side to the other, often leaving behind a glowing trail or a burst effect.

See the Pen
Fireball Toggle by Harish Rajora (@harishrajora)
on CodePen.

21. BB-8 (Beebee-Ate) Toggle

A BB-8 toggle switch is styled after the Star Wars droid BB-8, turning a simple toggle into a themed interaction. The ball-shaped body of BB-8 moves or rolls across the track when the toggle is switched, creating a playful, character-based animation.

See the Pen
BB-8 (Beebee-Ate) Toggle by Harish Rajora (@harishrajora)
on CodePen.

22. Sun-Moon Toggle

A sun-moon toggle switch uses symbols of the sun and moon to represent two states for light and dark modes. When toggled, the icon shifts from a sun to a moon or vice versa, often with background color changes to match the theme.

See the Pen
Sun Moon Toggle by Harish Rajora (@harishrajora)
on CodePen.

23. Background Switcher Toggle

A background switcher toggle is used to change the background of a page or component between two different styles or themes. When the toggle is activated, the background might shift in color, pattern, or image.

See the Pen
Background Switcher by Harish Rajora (@harishrajora)
on CodePen.

24. Liquid CSS Toggle

A liquid CSS toggle button creates a fluid-like animation effect when switching between states. When toggled, the button seems to melt, stretch, or ripple as it shifts from off to on or vice versa.

See the Pen
Liquid Toggle by Harish Rajora (@harishrajora)
on CodePen.

25. Eye Toggle Switch

An eye toggle is a switch to show or hide content, typically passwords or sensitive text. The toggle uses an eye icon that changes appearance when clicked, open for visible, closed or crossed-out for hidden.

See the Pen
Eye Toggle by Harish Rajora (@harishrajora)
on CodePen.

26. Star Wars Toggle Switch

A Star Wars toggle is a CSS switch that takes inspiration from the Star Wars universe. It can feature lightsabers, starships, or character icons that move or change when toggled.

See the Pen
Star Wars Toggle by Harish Rajora (@harishrajora)
on CodePen.

27. Totoro Toggle Switch

A Totoro toggle is a CSS switch inspired by the popular figure from Studio Ghibli. The toggle often features Totoro’s face or shape as the moving part, which shifts from one side to another when activated.

See the Pen
Untitled by Harish Rajora (@harishrajora)
on CodePen.

28. Three-State CSS Toggle Switch

A three-state CSS toggle switch allows you to cycle through three different options instead of just two. Each state is different, often using different colors, icons, or labels to show what’s currently selected. When the user clicks or taps the toggle, it shifts to the next state in the sequence.

See the Pen
Three-State Toggle Switch by Harish Rajora (@harishrajora)
on CodePen.

29. Joystick Toggle Switch

A joystick toggle switch mimics the look and movement of a joystick. The switch handle stands upright and can be tilted or nudged to one side to activate a different state. When toggled, the handle shifts position, and the base changes color or lights up to reflect the selected state.

See the Pen
Skeuomorphic Toggle Switch (vol. 4) by Nicolas Jesenberger (@nicolasjesenberger)
on CodePen.

30. Bear Toggle Switch

A bear toggle switch features a bear-themed design where the toggle knob or icon looks like a bear or bear face. When toggled, the bear element moves from one side to the other, often changing expression or color to indicate on and off states.

See the Pen
Bear Toggle Switch by Harish Rajora (@harishrajora)
on CodePen.

31. Smiling Emoji Toggle

A smiling emoji toggle uses a smiling face emoji as the toggle indicator to show different states, such as on and off. When toggled, the emoji may change expressions slightly, move across the track, or switch between smiling and neutral faces.

See the Pen
Smiling Emoji Toggle by Harish Rajora (@harishrajora)
on CodePen.

32. 3D Button Toggle Switch

A 3D button toggle switch uses shading, shadows, and highlights to create a three-dimensional look on the toggle button. When toggled, the button appears to press down or pop out, giving a sense of depth and physical interaction.

See the Pen
3D Button Toggle by Harish Rajora (@harishrajora)
on CodePen.

33. On/Off Toggle Switch

An on/off toggle switch is the basic form of a toggle used to represent two opposite states, usually labeled clearly as “On” and “Off.” The toggle knob slides or snaps between the two ends, and color changes often help indicate which state is active.

See the Pen
On/Off Toggle Switch by Harish Rajora (@harishrajora)
on CodePen.

34. Rolling Ball Toggle Switch

A rolling ball CSS toggle button uses a round element that rolls from one side to the other when toggled. The movement mimics an actual ball rolling, with rotation or shifting animations applied using CSS to enhance the effect.

See the Pen
Rolling Ball Toggle by Harish Rajora (@harishrajora)
on CodePen.

35. Restless Toggle Switch

A restless toggle switch is designed to look like it’s always in slight motion, even when not being interacted with. The switch element might wiggle, pulse, or shift subtly to draw attention. When toggled, it snaps to the new state with a more defined movement.

See the Pen
Restless Toggle by Harish Rajora (@harishrajora)
on CodePen.

36. Rocker Switch Toggle Switch

A rocker switch toggle mimics the design of physical rocker switches found on hardware devices. It has a pivoting switch body that rocks from one end to the other when toggled, pressing down one side while lifting the other. The change in state is often paired with a color shift or label to show what’s active.

See the Pen
Rocker Switch Toggle by Harish Rajora (@harishrajora)
on CodePen.

37. Glass Switch Toggle Switch

A glass switch toggle features a design that mimics the look of glass, with translucent surfaces, soft reflections, and subtle highlights. When toggled, the switch can light up or shift in opacity to show its state, often paired with a glowing effect to enhance the glass-like appearance.

See the Pen
Glass Switch Toggle by Harish Rajora (@harishrajora)
on CodePen.

38. Emoji-Based CSS Toggle Switch

An emoji-based CSS toggle button uses emojis to visually represent the toggle states, such as a thumbs up for on and a thumbs down for off. When you interact with the switch, the emoji changes instantly or transitions with a small animation.

See the Pen
Emoji Based Toggle by Harish Rajora (@harishrajora)
on CodePen.

How To Create A Basic CSS Toggle Switch?

Knowing the key elements of web design that go into making a CSS toggle switch and how to combine them is essential to building one effectively.At its core, a toggle switch is simply a checkbox element given a stylish makeover.

Following the rules of a checkbox, toggle switches are ideal for binary choices like “Buy or Sell,” “Yes or No,” “Left or Right,” “Day or Night,” and similar options.

Below is the source code for constructing a checkbox:

You must hide the checkbox from the display because people don’t need to see it on the front-end, even though you still need to track its current state for toggling.

Now, you have an empty web page displayed and a checkbox in the code. Next, you need to design the toggle switch and link it to your checkbox.

The following code will help you get a head start:

The output of the code looks as follows:

You can design this label in any shape and color you want. Now that you have the toggle boundaries set on your webpage, you’ll want to add a beautiful button that moves from one end to the other.

To create this movable element, you need to understand pseudo-elements. If you want to refresh your knowledge about pseudo-elements and how they work, check out resources like CSS selectors cheat sheets.

The following CSS creates a colored shape inside the label:

The output would look as follows:

You can mix CSS animation to let the browser know we intend to move this smaller element inside to the other end.

Performing Responsiveness Tests on CSS Toggle Switches

Developers can select and use CSS toggle switches that fit their website’s design and functionality needs. However, when developing these switches, it’s important to ensure they work as expected across various screen sizes, including smartphones, tablets, desktops, and laptops. To achieve a responsive design with toggle switches, running mobile-friendly tests is essential.

To perform responsive testing, you can use tools like LT Browser. It offers a streamlined way to test and debug your CSS toggle switches across 53+ pre-installed device viewports.

It also supports features like custom resolutions, network throttling, hot reloading, built-in Google Lighthouse performance reports, and more.

Subscribe to the LambdaTest YouTube channel for videos on responsive testing.

Conclusion

The above examples demonstrate how adaptable, helpful, and creative toggle switches can be. A CSS toggle switch can make an excellent first impression while also providing users with a useful feature. Leaving aside the styling part, the skeleton is quite simple and is explained in the first section of this post.

After going through these 38 toggle buttons using CSS, they seem simple and easy to construct without involving any JS. If you share similar interests and would like to contribute to this list, please let us know through the comments or on Codepen.