A pretty sweet and pure CSS3 iOS 7 UISwitch.
A Pen by Christian Petersen on CodePen.
<div class="wrapper"> | |
<h1>CSS3 UISwitch Example</h1> | |
<section id="fields" class="fields section"> | |
<div class="fields__item"> | |
<input type="checkbox" class="uiswitch"> | |
<h6>Off (unchecked)</h6> | |
</div> | |
<div class="fields__item"> | |
<input type="checkbox" class="uiswitch" checked> | |
<h6>On (checked)</h6> | |
</div> | |
<div class="fields__item"> | |
<input type="checkbox" class="uiswitch" disabled> | |
<h6>Disabled Off</h6> | |
</div> | |
<div class="fields__item"> | |
<input type="checkbox" class="uiswitch" checked disabled> | |
<h6>Disabled On</h6> | |
</div> | |
<div class="fields__item"> | |
<input type="checkbox" class="uiswitch custom"> | |
<h6>Custom</h6> | |
</div> | |
<div class="fields__item"> | |
<input type="checkbox" class="uiswitch my-switch"> | |
<h6>Custom</h6> | |
</div> | |
</section> | |
<section id="usage" class="section"> | |
<p>It's a one liner!</p> | |
<pre><code><input type="checkbox" class="uiswitch"></code></pre> | |
<p>Or just use SCSS and customize it too!</p> | |
<pre><code>import 'uiswitch'; | |
$uiswitch-thumb-tint: #ffffff; | |
$uiswitch-on-tint: red;</code></pre> | |
</section> | |
</div> |
// Read more @ https://github.com/fnky/css3-uiswitch |
@import "bourbon"; | |
// UISwitch | |
// A pretty sweet and pure CSS3 iOS 7 UISwitch. | |
// | |
// @author Christian Petersen <chrs@cbp.io> | |
$uiswitch-thumb-tint: #ffffff !default; | |
$uiswitch-on-tint: #4CD964 !default; | |
$uiswitch-active-tint: #e5e5e5 !default; | |
$uiswitch-on-tint-start: $uiswitch-on-tint !default; | |
$uiswitch-on-tint-end: desaturate($uiswitch-on-tint-start, 1) !default; | |
$uiswitch-off-tint: #ffffff !default; | |
%uiswitch { | |
@include box-sizing(border-box); | |
@include appearance(none); | |
@include size(51px 31px); | |
position: relative; | |
border-radius: 16px; | |
cursor: pointer; | |
outline: 0; | |
z-index: 0; | |
margin: 0; | |
padding: 0; | |
border: none; | |
background-color: $uiswitch-active-tint; | |
@include transition-duration(600ms); | |
@include transition-timing-function(ease-in-out); | |
-webkit-touch-callout: none; | |
-webkit-text-size-adjust: none; | |
-webkit-tap-highlight-color: rgba(0,0,0,0); | |
-webkit-user-select: none; | |
// Background | |
&::before { | |
@include box-sizing(border-box); | |
@include size(47px 27px); | |
content: ' '; | |
position: absolute; | |
left: 2px; | |
top: 2px; | |
background-color: $uiswitch-off-tint; | |
border-radius: 16px; | |
z-index: 1; | |
@include transition-duration(300ms); | |
@include transform(scale(1)); | |
} | |
// Thumb | |
&::after { | |
@include box-sizing(border-box); | |
@include size(27px); | |
content: ' '; | |
position: absolute; | |
border-radius: 27px; | |
background: $uiswitch-thumb-tint; | |
z-index: 2; | |
top: 2px; | |
left: 2px; | |
box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.25), | |
0px 4px 11px 0px rgba(0,0,0,0.08), | |
-1px 3px 3px 0px rgba(0,0,0,0.14); | |
@include transition(transform 300ms, width 280ms); | |
@include transform(translate3d(0, 0, 0)); | |
@include transition-timing-function(cubic-bezier(0.42, 0.800, 0.58, 1.2)); | |
} | |
// Background tint for ON state | |
&:checked { | |
@include linear-gradient(-180deg, $uiswitch-on-tint-start 0%, $uiswitch-on-tint-end 100%); | |
} | |
// Thumb for ON state | |
&:checked::after { | |
@include transform(translate3d(16px, 0, 0)); | |
right: 18px; | |
left: inherit; | |
} | |
// Thumb for active state | |
&:active::after { | |
width: 35px; | |
} | |
&:checked::before, | |
&:active::before { | |
@include transform(scale(0)); | |
} | |
// Disabled | |
&:disabled { | |
opacity: 0.5; | |
cursor: default; | |
@include transition(none); | |
&:active::before, | |
&:active::after, | |
&:checked:active::before, | |
&:checked::before { | |
width: 27px; | |
@include transition(none); | |
} | |
&:active::before { | |
@include size(41px 27px); | |
@include transform(translate3d(6px, 0, 0)); | |
} | |
&:checked:active::before { | |
@include size(27px); | |
@include transform(scale(0)); | |
} | |
} | |
} | |
@mixin uiswitch($on-tint: $uiswitch-on-tint, | |
$thumb-tint: $uiswitch-thumb-tint, | |
$off-tint: $uiswitch-off-tint, | |
$active-tint: $uiswitch-active-tint) { | |
@extend %uiswitch; | |
background-color: $active-tint; | |
$on-tint-start: $on-tint; | |
$on-tint-end: desaturate($on-tint-start, 1); | |
&::before { | |
background-color: $off-tint; | |
} | |
&::after { | |
background: $thumb-tint; | |
} | |
&:checked { | |
@include linear-gradient(-180deg, $on-tint-start 0%, | |
$on-tint-end 100%); | |
} | |
} | |
// Make .uiswitch class available out of the box | |
.uiswitch { | |
@include uiswitch(); | |
} | |
// DEMO STUFF | |
body { | |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
background-color: #ffffff; | |
} | |
p { | |
font-size: 18px; | |
font-weight: 300; | |
} | |
pre, code { | |
font-family: Monaco, Menlo, "Courier New", Courier, monospace; | |
font-size: 13px; | |
} | |
pre { | |
text-align: left; | |
} | |
pre { | |
background-color: #fbfbfb; | |
border: 1px solid #eee; | |
padding: .6em; | |
display: inline-block; | |
border-radius: 3px; | |
} | |
.wrapper { | |
width: 90%; | |
margin: 0 auto; | |
text-align: center; | |
} | |
h1 { | |
font-weight: 200; | |
text-align: center; | |
margin: 2em; | |
} | |
.fields {} | |
.fields__item { | |
display: inline-block; | |
margin-right: 1.875em; | |
text-align: center; | |
} | |
h6 { | |
font-size: 12px; | |
font-weight: 500; | |
text-transform: uppercase; | |
letter-spacing: .5px; | |
color: #aaa; | |
margin: 1em; | |
} | |
.section { | |
margin: 2em auto; | |
} | |
.custom { background-color: #eadcbc; } | |
.custom::before { background-color: #f7f2e5; } | |
.custom::after { background: #fff3a6; } | |
.custom:checked { | |
background-color: #ffca3f; background-image: -webkit-linear-gradient(-90deg, #ffca3f 0%, #feca40 100%); | |
background-image: linear-gradient(-180deg,#ffca3f 0%, #feca40 100%); | |
} | |
.my-switch { | |
border-radius: 4px; } | |
.my-switch::before { | |
border-radius: 2px; } | |
.my-switch::after { | |
border-radius: 1px; } | |
.my-switch:checked { | |
background: hotpink; } | |
.my-switch:checked::after { | |
background-color: #333; } |
A pretty sweet and pure CSS3 iOS 7 UISwitch.
A Pen by Christian Petersen on CodePen.