Toggle Switches

Published on
Radio, Colors, CSS3 Transitions, Form, Switch, Toggle
No. of comments
Browser compatibility
Firefox 4, Safari 5.1, Chrome 13, Opera 10, IE 9
MIT License
Toggle Switches CSS Code Snippet

A set of fully functional toggle switches in multiple colors. Useful for switching views and toggling settings.

The functionality is achieved through hidden radio inputs and the use of the :checked and +/~ sibling CSS3 selectors.

Enjoy the smooth on/off transition!

Original PSD by Orman Clark.


Kinderheim said

Hello !
Great job ! I will definitly use this.
One question : how would it work with 3 positions ?

Thibaut said

Hi Kenderheim
You'd have to adjust the width of the switch to $labelWidth * 3, and add a new declaration .switch-input:checked + .your-new-label ~ .switch-selection { left: $labelWidth * 2 + 2px; } for your third position. There'd also be some padding adjustments to make.

oomskaap said

Bonjour Thibaut,

I was wondering if an href link can automatically fire when you change a switch? For example, I would like to have a swtich "Oldest" and "Newest", and have them switching between these two links:

<a href="<?php echo add_query_arg( array('v_sortby' => 'date', 'v_orderby' => 'desc') ) ?>" rel="nofollow" class="lowest">Newest</a>

<a href="<?php echo add_query_arg( array('v_sortby' => 'date', 'v_orderby' => 'asc') ?>" rel="nofollow" class="lowest">Newest</a>

Thibaut said

You'd have to use JavaScript to detect the change, and then replace the content dynamically.
Or you could simply replace the label/input pairs with normal links.

Mike Starov said

Very cool. Thanks for putting out there. We'll try to integrate it in our new design. I love the fact that it does not rely on JS.

Chris Moody said

I have integrated the toggle switch onto my website, is there a way I can make sure the switch remains 'off' or 'on' (Whichever has been selected by the user) when the page has been left and then returned to?

Many thanks

Siddesh said

Great article actually i have used it, but one thing was expecting, can we toggle both side, irrespective of where you click.

like Example.

Pepe Lepew said

This is amazing and works like a dream, but how can get this to work with 3 or 4 items? I have searched and can't find anything remotely as nice.

Max said

Hi Great Job :)
how can i do that when i switch it to week for example that he will link me to a hyperlink?

Ravikumar said

hi, nice stuff. is it possible to make this toggle with 3 options ? maybe day, week and month...

Graham said

Merci, exactly what I was looking for. You saved me a few hours of work :)

Michel said

I was easily able to add a 3rd element.
Thanks for this great example !

<div class="switch">
<input type="radio" class="switch-input" name="view" value="week" id="week" checked>
<label for="week" class="switch-label switch-label-off">Event</label>
<input type="radio" class="switch-input" name="view" value="month" id="month">
<label for="month" class="switch-label switch-label-on">Resource</label>
<input type="radio" class="switch-input" name="view" value="connect" id="connect">
<label for="connect" class="switch-label switch-label-r">Connect</label>
<span class="switch-selection"></span>

.switch-input:checked + .switch-label-on ~ .switch-selection {
left: 100px;
/* Note: left: 50% doesn't transition in WebKit */
.switch-input:checked + .switch-label-r ~ .switch-selection {
left: 200px;
/* Note: left: 50% doesn't transition in WebKit */
.switch-selection { width: 98px;

.switch { width: 300px;

.switch-label { width: 98px;

Leave a comment

Comments are disabled.