Skip to main content
Photography of Alvaro Montoro being a doofus
Alvaro Montoro

HTML Surfer

Toggle: Colorful

An animated toggle switch created with a single HTML element and CSS. No need for images, JavaScript, or bulky libraries.

css showdev webdev

This weekend, I added a new animated toggle switch to the collection: Colorful. It was inspired by Nick Buturishvili's Switch on Dribbble. I really that design, so I tried to mimick it with a single HTML element and CSS.

I added some slight changes for convenience:

  • Replaced the animation between cross and checkmark for a more modest transition (to make it easier to code)
  • Darkened the turquoise colors a little bit so it provided enough contrast with the white from the icon (to make it more accessible)
  • Switched the Off and On sides (so it was more consistent with the other toggle switches I created in the past)

Hopefully, those changes didn't break the beauty of the original design. Judge for yourself. Here is the source code and live demo on CodePen:

Some features:

  • Single HTML element: no need for complex structures.
  • No external images: all drawings and gradients are basic CSS.
  • No JavaScript: the browser handles the component's state.
  • Responsive: the toggle will adapt to the font size.
  • Supports reduced motion: removes animations and transitions.
  • High contrast mode support: adding transparent borders.
  • Added color contrast: between icon and background.
  • Printing styles: just in case :P

The transition includes some properties that are not so efficient to animate, such as background-position or left. But, considering the toggle switch is small, they shouldn't have a negative impact overall.

If you like this toggle, check out a collection of toggle switches I created using only a single HTML element (a checkbox input) and CSS.

Article originally published on