Collection of free jQuery toggle switch code examples from Codepen, Github and other resources. Update of March 2021 collection. 3 new items.
Related Articles:
Links
Made with
- HTML / CSS / JS
About a code
Switch, Checkbox, Radio Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Mute/Unmute Button
This example hold a mute/unmute micro interactions and uses GSAP timeline and drawSVG plugins for the animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Animated CheckBox with Sound Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Gravity UI - Toggle Button with Ripple
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
GSAP - Cat Toggle Button
He likes to sleep during the day time and play at night.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Elastic Volume Toggle
Sound on/off animated toggle switch in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js, tweenmax.js, timelinemax.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
3D Switch Animation #2
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js, three.js, tweenmax.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
3D Switch Animation
Cool 3d switch animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js, three.js, tweenmax.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Toggle
Draggable skeuomorph switch - toggle.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js, anime.js
Links
Made with
- HTML / CSS / JS
About a code
SVG Radio Button
Animated SVG radio button.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js, tweenmax.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
CSS Toggle with jQuery
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: tachyons.css
Links
Made with
- HTML / CSS (Less) / JS
About a code
Button On/Off
Button on/off - sliding button.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js
Links
Made with
- HTML / CSS / JS
About a code
Batman/Superman Toggle Button
Select your favourite superhero: Batman or Superman.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Smiley Switch Animation
Simple switches with animation in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js
Links
Made with
- HTML / CSS / JS
About a code
Gender Toggle Button
Gender (male/female) toggle button for data input form.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: ionicons.min.css
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Switch Loading Animation
Switch with a very simple loading animation for an ajax call or something like that.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS
About a code
Toggle Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js
Links
Made with
- HTML / CSS / JS
About a code
Simple Checkbox Switcher
Checkboxes and labels with little jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
SVG Toggle Animation
A full CSS/SVG ang jQuery checkbox button.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js
Links
Made with
- HTML / CSS / JS
About a code
Brightness and Gamma Switch
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
SVG Checkbox Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: tweenmax.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Jquery Toggle Button
iOS style toggle switch button using jQuery and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Day & Night Toggle Switch
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -