Collection
Post cover

Top 20 Awesome jQuery Toggle Switches

Collection of free jQuery toggle switch code examples.

Mute/Unmute Button

Author: Akshaya Venky

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Gravity UI - Toggle Button with Ripple

Author: Akshaya Venky

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

GSAP - Cat Toggle Button

Author: Shunya Koide

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

He likes to sleep during the day time and play at night.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js

Elastic Volume Toggle

Author: Aaron Iker

Links: demo and code, dribbble shot

Made with: HTML / CSS (SCSS) / JS

Sound on/off animated toggle switch in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js, tweenmax.js, timelinemax.js

3D Switch Animation #2

Author: Aaron Iker

Links: demo and code, dribbble shot

Made with: HTML / CSS (SCSS) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js, three.js, tweenmax.js

3D Switch Animation

Author: Aaron Iker

Links: demo and code, dribbble shot

Made with: HTML / CSS (SCSS) / JS

Cool 3d switch animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js, three.js, tweenmax.js

Toggle

Author: Valery Alikin

Links: demo and code, dribbble shot

Made with: HTML / CSS (SCSS) / JS

Draggable skeuomorph switch - toggle.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js, anime.js

SVG Radio Button

Author: Abhisek Dutta; December 20, 2018

Links: demo and code

Made with: HTML / CSS / JS

Animated SVG radio button.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js, tweenmax.js

CSS Toggle with jQuery

Author: Russ Pate

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: tachyons.css

Button On/Off

Author: Diego Cadena

Links: demo and code

Made with: HTML / CSS (Less) / JS

Button on/off - sliding button.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Batman/Superman Toggle Button

Author: Himalaya Singh

Links: demo and code

Made with: HTML / CSS / JS

Select your favourite superhero: Batman or Superman.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Smiley Switch Animation

Author: Aaron Iker

Links: demo and code, dribbble shot

Made with: HTML / CSS (SCSS) / JS

Simple switches with animation in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Switch Loading Animation

Author: Aaron Iker

Links: demo and code, dribbble shot

Made with: HTML / CSS (SCSS) / JS

Switch with a very simple loading animation for an ajax call or something like that.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Toggle Button

Author: Ravi Dhiman

Links: demo and code

Made with: HTML (Pug) / CSS (SCSS) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Simple Checkbox Switcher

Author: Artyom

Links: demo and code

Made with: HTML / CSS / JS

Checkboxes and labels with little jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

SVG Toggle Animation

Author: Timothee Guignard

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

A full CSS/SVG ang jQuery checkbox button.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Brightness and Gamma Switch

Author: Joseph Shenton

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

SVG Checkbox Animation

Author: Jonas Badalic

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: tweenmax.js

Jquery Toggle Button

Author: Nikhil Krishnan

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

iOS style toggle switch button using jQuery and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Day & Night Toggle Switch

Author: Lionel T

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Did you like the post? Share it with your friends!

Follow us on social networks

Feedback