20 CSS Toggle Switches - csshint

Collection of hand-picked free HTML and CSS toggle switch code examples.

1.CSS grid toggle

See the Pen <a href='https://codepen.io/liamj/pen/QYyBzz/'>CSS grid toggle (animates in Firefox Nightly only)</a> by Liam (<a href='https://codepen.io/liamj'>@liamj</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Liam

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

2.Toggle Radial Effect

Author

Florin Pop

Made with

HTML / CSS

demo and code Get Hosting

3.Gender Toggle Pure CSS

See the Pen <a href='https://codepen.io/chintuyadav/pen/yGPGVP/'>Gender Toggle Pure CSS</a> by Chintu Yadav Sara (<a href='https://codepen.io/chintuyadav'>@chintuyadav</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Chintu Yadav Sara

Made with

HTML / CSS

demo and code Get Hosting

4.Checkbox Rocker Toggle Switch

See the Pen <a href='https://codepen.io/marcusconnor/pen/QJNvMa/'>Checkbox Rocker Toggle Switch</a> by Marcus Connor (<a href='https://codepen.io/marcusconnor'>@marcusconnor</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Marcus Connor

Made with

HTML / CSS

demo and code Get Hosting

5.Pure CSS Bulb Switch

See the Pen <a href='https://codepen.io/Wujek_Greg/pen/Bqvzbp/'>Pure CSS Bulb Switch</a> by Grzegorz Witczak (<a href='https://codepen.io/Wujek_Greg'>@Wujek_Greg</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Grzegorz Witczak

Made with

HTML / CSS(stylus)

demo and code Get Hosting

6.Subscribe Buttons (CSS)

See the Pen <a href='https://codepen.io/Stockin/pen/qJqVYy/'>Subscribe Buttons (CSS)</a> by Stockin (<a href='https://codepen.io/Stockin'>@Stockin</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Stockin

Made with

HTML / CSS

demo and code Get Hosting

7.ON-OFF Switches

See the Pen <a href='https://codepen.io/himalayasingh/pen/EdVzNL/'>Pure CSS Toggle Buttons | ON-OFF Switches</a> by Himalaya Singh (<a href='https://codepen.io/himalayasingh'>@himalayasingh</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Himalaya Singh

Made with

HTML / CSS

demo and code Get Hosting

8.Switchers (Checkboxes)

See the Pen <a href='https://codepen.io/z-/pen/XPQyMo/'>Switchers (Checkboxes)</a> by Zed Dash (<a href='https://codepen.io/z-'>@z-</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Zed Dash

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

9.Wobble Toggle

See the Pen <a href='https://codepen.io/cobra_winfrey/pen/PBEVvq/'>Wobble Toggle</a> by Adam Kuhn (<a href='https://codepen.io/cobra_winfrey'>@cobra_winfrey</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Adam Kuhn

Made with

HTML(Haml) / CSS(SCSS)

demo and code Get Hosting

10.CSS Bear Toggle

See the Pen <a href='https://codepen.io/agoodwin/pen/gKpKqw/'>CSS Bear Toggle</a> by Anastasia Goodwin (<a href='https://codepen.io/agoodwin'>@agoodwin</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Anastasia Goodwin

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

11.Toggle

See the Pen <a href='https://codepen.io/kathykato/pen/jzOxgv/'>Toggle</a> by Katherine Kato (<a href='https://codepen.io/kathykato'>@kathykato</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Katherine Kato

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

12.Another Toggle

See the Pen <a href='https://codepen.io/valaxin/pen/BjepPG/'>Another Toggle</a> by MacKenzie Bobbitt (<a href='https://codepen.io/valaxin'>@valaxin</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

MacKenzie Bobbitt

Made with

HTML / CSS

demo and code Get Hosting

13.Pure Css “day and night” toggle

See the Pen <a href='https://codepen.io/bnthor/pen/WQBNxO/'>Pure Css "day and night" toggle</a> by Benjamin Réthoré (<a href='https://codepen.io/bnthor'>@bnthor</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Benjamin Réthoré

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

14.Simple Toggle

See the Pen <a href='https://codepen.io/magnificode/pen/ojYJJP/'>Simple Toggle</a> by magnificode (<a href='https://codepen.io/magnificode'>@magnificode</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

magnificode

Made with

HTML / CSS(SCSS)

demo and code Get Hosting

15.Flat Toggle Switch

See the Pen <a href='https://codepen.io/dervondenbergen/pen/BjJbx/'>Flat Toggle Switch</a> by Felix De Montis (<a href='https://codepen.io/dervondenbergen'>@dervondenbergen</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Felix De Montis

Made with

HTML(Haml) / CSS

demo and code Get Hosting

16.SVG Switches

See the Pen <a href='https://codepen.io/MaxStalker/pen/yyMbQx/'>SVG Switches – Design by Tomasz Zagórski</a> by Maksim Daunarovich (<a href='https://codepen.io/MaxStalker'>@MaxStalker</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Maksim Daunarovich

Made with

HTML/ CSS

demo and code Get Hosting

17.Skew Switch!

See the Pen <a href='https://codepen.io/XDBoy018/pen/PwNrYr/'>Skew Switch!</a> by Abhijit Hota (<a href='https://codepen.io/XDBoy018'>@XDBoy018</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Abhijit Hota

Made with

HTML(Haml)/ CSS(SCSS)

demo and code Get Hosting

18.Toggle Button

See the Pen <a href='https://codepen.io/ravid7000/pen/ZeKLqL/'>Toggle Button</a> by Ravi Dhiman (<a href='https://codepen.io/ravid7000'>@ravid7000</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Ravi Dhiman

Made with

HTML(Pug)/ CSS (SCSS)

demo and code Get Hosting

19.Responsive Toggle Switch

See the Pen <a href='https://codepen.io/dsenneff/pen/ZoLVZW/'>Responsive Toggle Switch</a> by Darin (<a href='https://codepen.io/dsenneff'>@dsenneff</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Darin

Made with

HTML / CSS (SCSS)

demo and code Get Hosting

20.Implementation of Liquid button

See the Pen <a href='https://codepen.io/AlexJedi/pen/rwwvXw/'>Implementation of Liquid button</a> by Alex (<a href='https://codepen.io/AlexJedi'>@AlexJedi</a>) on <a href='https://codepen.io/'>CodePen</a>.

Author

Alex

Made with

HTML (pug) / CSS (SCSS)

demo and code Get Hosting

1.CSS grid toggle

Author

Made with

2.Toggle Radial Effect

Author

Made with

3.Gender Toggle Pure CSS

Author

Made with

4.Checkbox Rocker Toggle Switch

Author

Made with

5.Pure CSS Bulb Switch

Author

Made with

6.Subscribe Buttons (CSS)

Author

Made with

7.ON-OFF Switches

Author

Made with

8.Switchers (Checkboxes)

Author

Made with

9.Wobble Toggle

Author

Made with

10.CSS Bear Toggle

Author

Made with

11.Toggle

Author

Made with

12.Another Toggle

Author

Made with

13.Pure Css “day and night” toggle

Author

Made with

14.Simple Toggle

Author

Made with

15.Flat Toggle Switch

Author

Made with

16.SVG Switches

Author

Made with

17.Skew Switch!

Author

Made with

18.Toggle Button

Author

Made with

19.Responsive Toggle Switch

Author

Made with

20.Implementation of Liquid button

Author

Made with

You may also like