Toggle Switches Example
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.
http://www.premiumpixels.com/freebies/sort-switches-toggles-psd/
Views: 766
2018
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> lang="en" <!--<![endif]-->
charset="utf-8"
http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"
Toggle Switches
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
class="container"
class="switch"
type="radio" class="switch-input" name="view" value="week" id="week" checked
for="week" class="switch-label switch-label-off"Week
type="radio" class="switch-input" name="view" value="month" id="month"
for="month" class="switch-label switch-label-on"Month
class="switch-selection"
class="switch switch-blue"
type="radio" class="switch-input" name="view2" value="week2" id="week2" checked
for="week2" class="switch-label switch-label-off"Week
type="radio" class="switch-input" name="view2" value="month2" id="month2"
for="month2" class="switch-label switch-label-on"Month
class="switch-selection"
class="switch switch-yellow"
type="radio" class="switch-input" name="view3" value="week3" id="week3" checked
for="week3" class="switch-label switch-label-off"Week
type="radio" class="switch-input" name="view3" value="month3" id="month3"
for="month3" class="switch-label switch-label-on"Month
class="switch-selection"
/*
* Copyright (c) 2012-2013 Thibaut Courouble
* http://www.cssflow.com
*
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*
* View the Sass/SCSS source at:
* http://www.cssflow.com/snippets/toggle-switches/demo/scss
*
* Original PSD by Orman Clark: http://goo.gl/MNFHK
*/
@import "http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css";
body {
font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
color: #404040;
background: #363a41;
}
.container {
margin: 60px auto;
width: 120px;
}
.switch {
position: relative;
margin: 20px auto;
height: 26px;
width: 120px;
background: rgba(0, 0, 0, 0.25);
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 1, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 1, 255, 0.1);
}
.switch-label {
position: relative;
z-index: 2;
float: left;
width: 58px;
line-height: 26px;
font-size: 11px;
