Sliding Toggle switch Using HTML,CSS & JavaScript

Hello there! In this article, you will find 15+ Sliding Toggle switch designs Using HTML,CSS and JavaScript with complete source code so you can copy and paste it into your project.

Sliding Toggle switches are simple components used to enable one of two predefined options. Often used as an on/off button. They are most often used in various forms as it is very easy to use and reduces the time it takes to type all the inputs.

Don’t worry we’ve got you covered. We have Handpicked the best 15+ Sliding Toggle switch designs from the web for you to use in your project.

Let’s see some cool 15+ Sliding Toggle switch designs.

1. Light Bulb Toggle Switch

Code by	Jon Kantner
Demo & download	click here for code
Language used	HTML,CSS
External link / Dependencies	Yes
Responsive	No

Let’s start our list with a custom checkbox that features a light bulb’s on/off state in the fashion of a toggle switch. This is designed by Jon Kantner using pure HTML and CSS.

2. Toggle Buttons

Code by	Vineeth.TR
Demo & download	click here for code
Language used	HTML(Pug),CSS(SCSS)
External link / Dependencies	Yes
Responsive	No

A collection of sliding toggle switches by Vineeth.TR was made using HTML(Pug) and CSS(SCSS).

3. 3D toggle – click it!

Code by	Ana Tudor
Demo & download	click here for code
Language used	HTML,CSS(SCSS)
External link / Dependencies	No
Responsive	No

A 3D sliding toggle switch developed by Ana Tudor using HTML and CSS(SCSS), the ball here turns green in the “on” state.

4. Airplane Mode Toggle Switch ✈️

Code by	Kiarash Zarinmehr
Demo & download	click here for code
Language used	HTML,CSS,JS
External link / Dependencies	Yes
Responsive	No

An animated toggle switch to turn airplane mode on and off! made by Kiarash Zarinmehr using HTML, CSS, and JS.

5. Creating day-night CSS only toggle switch

Code by	Chris Bongers
Demo & download	click here for code
Language used	HTML,CSS
External link / Dependencies	No
Responsive	No

A sliding toggle switch for day-night can also be used as dark to light mode switcher made by Chris Bongers using HTML and CSS.

6. toggle button

Code by	Navigation bar
Demo & download	click here for code
Language used	HTML,CSS
External link / Dependencies	No
Responsive	No

A collection of sliding toggle switches with different designs and animations made by “Navigation bar” (weird name) using HTML and CSS.

50+ HTML, CSS & JavaScript Projects With Source Code

7. Neumorphic-toggle- button

Code by	somali
Demo & download	click here for code
Language used	HTML,CSS
External link / Dependencies	No
Responsive	No

Sliding toggle switches for WiFi, Bluetooth, and location. created by somali using HTML and CSS.

8. Sea Mode

Code by	Faria Begum Riya
Demo & download	click here for code
Language used	HTML,CSS(Less)
External link / Dependencies	No
Responsive	No

We just looked at an airplane mode toggle switch, now let’s see a “sea mode” toggle switch by Faria Begum Riya made using HTML and CSS(Less).

9. Animated CSS Switch Button

Code by	Nitish tyagi
Demo & download	click here for code
Language used	HTML,CSS(SCSS)
External link / Dependencies	No
Responsive	No

A simple animated sliding toggle switch designed by Nitish tyagi using HTML and CSS(SCSS).

Portfolio Website using HTML and CSS (Source Code)

10. Pure CSS Fuel Gauge Toggle

Code by	Ömercan Balandı
Demo & download	click here for code
Language used	HTML,CSS(Sass)
External link / Dependencies	No
Responsive	No

This is a very unique toggle switch, a fuel gauge-themed switch by Ömercan Balandı made using HTML and CSS(Sass)

11. Toggles

Code by	Olivia Ng
Demo & download	click here for code
Language used	HTML(Pug),CSS(SCSS)
External link / Dependencies	Yes
Responsive	No

Do you want your toggle fancy or functional? Yes. A collection of fancy animated sliding toggle switches by Olivia Ng made with HTML(Pug) and CSS(SCSS).

12. CSS Plane Switch

Code by	Aaron Iker
Demo & download	click here for code
Language used	HTML,CSS(SCSS)
External link / Dependencies	No
Responsive	No

Another airplane mode toggle switch. this one was created by Aaron Iker using HTML and CSS(SCSS).

10+ Javascript Projects For Beginners With Source Code

13. CSS Heart Switch

Code by	Aaron Iker
Demo & download	click here for code
Language used	HTML,CSS(SCSS)
External link / Dependencies	No
Responsive	No

A heart sliding toggle switch by Aaron Iker made using HTML and CSS(SCSS).

14. Gender Toggle Pure CSS

Code by	Chintu Yadav Sara
Demo & download	click here for code
Language used	HTML,CSS
External link / Dependencies	No
Responsive	No

A sliding toggle switch for male/female selection, made by Chintu Yadav Sara using HTML and CSS.

15. Pure CSS Bulb Switch

Code by	Grzegorz Witczak
Demo & download	click here for code
Language used	HTML,CSS(Stylus)
External link / Dependencies	No
Responsive	No

An animated light bulb sliding toggle switch made by Grzegorz Witczak using HTML and CSS(Stylus).

Restaurant Website Using HTML and CSS

16. Wobble Toggle

Code by	Adam Kuhn
Demo & download	click here for code
Language used	HTML(Haml),CSS(SCSS)
External link / Dependencies	No
Responsive	No

Let’s end our list with Wobble toggle switch by Adam Kuhn made with HTML(Haml) and CSS(SCSS).

That’s it, folks. In this article, we shared 15+ Sliding Toggle switch with cool and different designs. we have covered a lot in this article from airplane mode to sea mode sliding toggle switches, really fancy animated switches, and also simple & basic ones too!

I hope you liked this article. Share this with your fellow developers. Comment down below your thoughts and suggestions, we would love to hear from you.

See our other articles on codewithrandom and gain knowledge in Front-End Development.

Thank you and keep learning!!

follow us on Instagram: @codewith_random
Written by: @ayushgoel