75+ Free CSS Toggle Switches (Code Included)

Lotta people use JS for the text changes but you don't need to.

A new take on the CSS toggle, using CSS grid animations. See code for explanations :)

Simple Power switch animation

A subscribe toggle button featuring "Smudge, The Confused Cat" From Famous "Woman Yelling At Cat" Meme.

From https://dribbble.com/shots/2326459-Adobe-Toggle-Switch

Checkbox CSS Toggle - Day / Night Mode

Toggles that have a bit of anxiety...

What a toggle switch may look like if on a Little Tikes product, considering the plastic look. The handle is to resemble a dual colored ball. Based on this Dribbble shot. Update 8/28/19: Changed divs to spans

A Confusing Toggle Button / Toggle Switch Using HTML And CSS

An HTML checkbox form element styled as a rocker toggle switch.

Low fidelity mobile phone mockup done with css and a nice tab switch animation.

Collection of toggle buttons / on-off switches which can be practically used in a website. Designed using CSS without any JavaScript :) Which one is your fav?

Day night toggle button, elastic toggle button or on-off switches. Code representation of the Dribbble shot: https://dribbble.com/shots/4298041-Daily-UI-015-On-Off-Switch

one of my fave characters + one of my fave checkbox hack formats, together at last for this week's CodePen challenge

Probably a toggle switch concept that no one has tried before. This one is for temperature—options being cold or hot. The idea is to portray the handle as an ice cube for cold and a flame for hot. For hot, the cube moves right and melts at the same time, and a rising flame moves along with...

Read More

A beary cute toggle.

Saw this dribbble shot by Rappora, loved it, wanted to see it alive. See https://dribbble.com/shots/2360260-AM-PM-Toggle

Toggle with just CSS. Enjoy it!

A simple checkbox toggle improved by being made into a cat.

CSS/HTML only recreation of the iOS 7 toggle buttons. I love the little bounce that the slide has.

Simple toggle button.

Getting fun with some animations & transitions :)

Day night toggle button, elastic toggle button or on-off switches. Code representation of the Dribbble shot: https://dribbble.com/shots/4298041-Daily-UI-015-On-Off-Switch

Original design can be found here: https://dribbble.com/shots/1095343-Switches

A Day/Night Toggle, inspired by a dribbble from Bojan Mesar. see link to original GIF

A pure CSS based toggle switch no Jquery needed.

Collection of four toggle switches made with html and css without a single line of javascript. Two of the switches are made with the help of svg also.

Working on a client project that will be using Bootstrap, and needed to build a toggle/switch that came in a couple different sizes. I wasn't seeing that as a built-in option within Bootstrap, and I didn't really like the ones already out there that I found from a quick search (I didn't wa...

Read More

Custom Toggles for BS4 only come in one size. Large and Extra Large sizes would be nice. Simply adding the scss and the size classes will make them much better.

From Sander: This is a pure-css clean two-way toggle switch with two states. Enjoy. Share.

This is a toggle that overrides a native checkbox input element. The sizes are based on a couple of CSS variables at the top level of the widget. The toggle is hidden from accessibility tools, such as screen readers, which will use the default native HTML checkbox. Keyboard users can tab ...

Read More

style two radio buttons to not look so awful

bb-8 toggle switch that changes background color

CSS only toggle switch changes the colors of the Google logo. Based on a dribble - https://dribbble.com/shots/2544386-Google

Based on this Dribbble: https://dribbble.com/shots/6266357-Checkboxswitcher

A CSS only transformation of a checkbox into a toggle switch. Supports checked, focus, disabled, indeterminate, hover and active states. Features an animated transition on change. I've used a [toggle] property but you could just use a class. Based on https://codepen.io/andreasstorm/pen/j...

Read More