25+ jQuery Toggle Switches - Free Code + Demos
Collection of 25+ jQuery Toggle Switches. All items are 100% free and open-source.
1. Elastic Volume Toggle - JQuery
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shot
Created on: October 18, 2019
Made with: HTML, SCSS, JS
Tags: volume, toggle, switch, greensock, tween
2. 3D Switch Animation 2
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shot
Created on: September 1, 2019
Made with: HTML, SCSS, JS
Tags: switch, animation, toggle, 3d, threejs
3. 3D Switch Animation
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shot
Created on: August 28, 2019
Made with: HTML, SCSS, JS
Tags: switch, toggle, 3d, threejs, webgl
4. Plus / Minus Toggle CSS
Author: Adam Kuhn (cobra_winfrey)
Created on: July 30, 2018
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
5. Animated SVG Radio Button
Author: Abhisek Dutta (0xfa1l)
Links: Source Code / Demo
Created on: December 20, 2018
Made with: HTML, CSS, JS
6. Button On/Off - Sliding Button
Button On/Off - Sliding Button
Author: Diego Cadena (dcadev)
Links: Source Code / Demo
Created on: November 4, 2018
Made with: HTML, Less, JS
Tags: button sliding, on, off, sliding, button
7. Batman | Superman Toggle Button
Select your favourite superhero: Batman or Superman. I am going with Batman :) Toggle buttons. Got inspiration from this Dribbble shot: https://dribbble.com/shots/4917998-Radio-buttons-interaction, but I have used my own concept of button toggling in this pen.
Author: Himalaya Singh (himalayasingh)
Links: Source Code / Demo, Dribbble.com
Created on: October 12, 2018
Made with: HTML, CSS, JS
Tags: toggle-buttons, switchers, on-off switches, micro-interactions, radio-buttons
8. Smiley Switch Animation
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shot
Created on: September 22, 2018
Made with: HTML, SCSS, JS
Tags: smiley, switch, animation, check, form
9. Switch Loading Animation
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shot
Created on: July 1, 2018
Made with: HTML, SCSS, JS
Tags: switch, animation, checkbox, input, loader
10. Toggle Button
Author: Ravi Dhiman (ravid7000)
Links: Source Code / Demo
Created on: March 11, 2017
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css-button, css toggle button, button toggle
11. SVG / CSS Animation - Checkbox
Having fun with some SVG animations path
Author: Timothee Guignard (TimGuignard)
Links: Source Code / Demo
Created on: February 5, 2017
Made with: HTML, SCSS, JS
Tags: svg, animation, checkbox, path, css
12. Jquery Toggle Button
Author: hataman (hataman)
Links: Source Code / Demo
Created on: July 16, 2019
Made with: HTML, CSS, JS
Tags: css, jquery, toggle-button, ios button, button
13. On/Off Switch W/ Jquery And CSS Animations
Author: martin (mpennock)
Links: Source Code / Demo
Created on: March 13, 2016
Made with: HTML, CSS, JS
14. UI 004: Pricing Component
Author: thecalicoder (thecalicoder)
Links: Source Code / Demo
Created on: December 17, 2019
Made with: Pug, SCSS, Babel
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: pricing component, css, basscss, sass, toggle-switch
15. Day And Night Toggle Button
This pen is made as part of weekly coding challenge. Inspired from: https://dribbble.com/shots/4419357-Day-Night-Mode-Switcher?utm_source=Clipboard_Shot&utm_campaign=Mikhail-Gribkov&utm_content=Day%2FNight%20Mode%20Switcher&utm_medium=Social_Share
Author: Raunaq Chawhan (_Raunaq_)
Links: Source Code / Demo
Created on: May 31, 2019
Made with: HTML, CSS, JS
Tags: html, javascript, weekly-coding-challenge, toggle-switch, css
16. Simple Toggle Button
Toggle between day and night using scss
Author: Divakar (Divakar_101)
Links: Source Code / Demo
Created on: May 20, 2019
Made with: HTML, SCSS, JS
Tags: toggle-switch
17. Sleek Toggle Switch
A sleek toggle switch. You can find the tutorial here: https://www.youtube.com/watch?v=Qw325O6El5Y
Author: Kent Hefley (Kryan74)
Links: Source Code / Demo
Created on: May 9, 2019
Made with: HTML, CSS, JS
Tags: toggle-switch, css-transitions, pseudo-classes
18. Toggle Switch
you can change the options by clicking the sliding button. you can use it every where you want especially in form i hope you enjoy it : )
Author: elyasmotazedy (elyasmotazedy)
Links: Source Code / Demo
Created on: March 25, 2019
Made with: HTML, CSS, JS
Tags: slider button, animated-button, form select, animated-form, toggle-switch
19. Toggle Switch With Section Display Block And None
Toggle Switch with section display block and none
Author: venkatesh pataballa (venkateshpataballa)
Links: Source Code / Demo
Created on: January 28, 2019
Made with: HTML, CSS, JS
Tags: toggle-switch, switch, tabs with taoggle
20. Toggle Switch With Drag
Simple toggle switch with draggable/touch switch. (Doesn't works yet in Firefox)
Author: Hidde Eertman (HiddeDeRidder)
Links: Source Code / Demo
Created on: January 10, 2019
Made with: HTML, SCSS, JS
Tags: toggle-switch, toggle, switch, drag, touch
21. Toggle Open Dyslexic
A toggle switch for the user to change a page's font to Open Dyslexic
Author: Bridgette Rue (cornetespoir)
Links: Source Code / Demo
Created on: January 23, 2018
Made with: HTML, CSS, JS
Tags: accessibility, toggle-switch, toggle, web accessibility
22. 🚦toggle Animation With CSS & State Machines!
State machines for a toggle? You bet! David Khourshid & Stephen Shaw recreate this perfect example of a state machine powered animation using CSS & JavaScript. 💡 Inspiration: https://dribbble.com/shots/9841408-Loading-switch-interaction 📺 Video: https://youtu.be/0Wx9QbRQYuI 💻 Code: h...Read More
Author: @keyframers (keyframers)
Links: Source Code / Demo
Created on: February 3, 2020
Made with: HTML, SCSS, JS
Tags: keyframers, animation, toggle, checkbox, state machines
More Awesome Lists:
Share: