15 CSS Toggles

August 16, 2019 No comments CSS Code Examples CSS HTML Toggle

Toggle element is a kind of switch that allows us to choose one of two values. Toggles are mainly used to switch between the dark and light version of the website, as checkboxes on forms, to turn on and off parameters in configurations and many more. In this collection, we showcase the best free CSS toggles for various purposes.

Another Toggle

Rolling toggle
Demo Image: Another Toggle
Made by MacKenzie Bobbitt on February 19, 2016
demo and code


Switch toggle
Demo Image: Switch-Toggle
Made by Hanan Al-Mashhadani on January 24, 2016
demo and code

Gooey toggle switch

Gooey toggle switch
Demo Image: Gooey toggle switch
Made by Vincent Durand on September 14, 2015
demo and code

Jquery Toggle Button

Jquery toggle button
Demo Image: Jquery Toggle Button
Made by Nikhil Krishnan on July 01, 2015
demo and code

Switch Button

Pizza pasta switch button
Demo Image: Switch Button
Made by Nicolas Lanthemann on September 07, 2015
demo and code

Play With My Pure CSS Toggle

Play with my pure css toggle
Demo Image: Play With My Pure CSS Toggle
Made by Parveen Kaushik on February 14, 2017
demo and code

CSS toggle checkboxes

Pure css toggle checkboxes
Demo Image: CSS toggle checkboxes
Made by Vincent Ramos on August 13, 2014
demo and code

iOS Like CSS Toggle Switch

Ios like css toggle switch
Demo Image: iOS Like CSS Toggle Switch
Made by ajimix on August 29, 2012
demo and code

CSS Toggle Switch

Css toggle switch
Demo Image: CSS Toggle Switch
Made by Ketan Mistry on July 16, 2017
demo and code

CSS Toggles

Css toggles
Demo Image: CSS Toggles
Made by Robert Price on July 29, 2015
demo and code

Springy Switchbox

Springy shitchbox
Demo Image: Springy Switchbox
Made by @keyframers on April 02, 2019
demo and code

Toggle Radial Effect

Toggle radial effect
Demo Image: Toggle Radial Effect
Made by Florin Pop on March 20, 2019
demo and code

CSS grid toggle (animates in Firefox Nightly only)

Css grid toggle
Demo Image: CSS grid toggle (animates in Firefox Nightly only)
Made by Liam on January 26, 2019
demo and code

Simple Knobby Toggles

Simple knobby toggles
Demo Image: Simple Knobby Toggles
Made by Daryn St. Pierre on January 08, 2019
demo and code

Gender Toggle Pure CSS

Gender toggle pure css
Demo Image: Gender Toggle Pure CSS
Made by Chintu Yadav Sara on January 01, 2019
demo and code
{{ message }}

{{ 'Comments are closed.' | trans }}