Feb. 24, 2024, 7:53 a.m. | Alvaro Montoro

DEV Community dev.to

A new toggle switch added to the collection: colorful.




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.



The design was inspired by Nick Buturishvili's Switch on Dribbble: https://dribbble.com/shots/2272690-Switch

adapt animations basic browser collection contrast css element features html images javascript responsive showdev state support the browser transitions webdev will

AI Engineer Intern, Agents

@ Occam AI | US

AI Research Scientist

@ Vara | Berlin, Germany and Remote

Data Architect

@ University of Texas at Austin | Austin, TX

Data ETL Engineer

@ University of Texas at Austin | Austin, TX

Lead GNSS Data Scientist

@ Lurra Systems | Melbourne

Lead Data Modeler

@ Sherwin-Williams | Cleveland, OH, United States