Skip to content

Instantly share code, notes, and snippets.

@frozonfreak
Created July 23, 2013 03:28
Show Gist options
  • Save frozonfreak/6059651 to your computer and use it in GitHub Desktop.
Save frozonfreak/6059651 to your computer and use it in GitHub Desktop.
A CodePen by Billy Crist. Switches - The first 2 are designed with depth and lighting, while the 3rd one is flatly designed with a somewhat "gooey"-ish transition on it.
<div class="wrap">
<input type="checkbox" id="s1" />
<label class="slider-v1" for="s1"></label>
<input type="checkbox" id="s2" checked="" />
<label class="slider-v1" for="s2"></label>
</div><!--/wrap-->
<div class="wrap">
<input type="checkbox" id="s3" />
<label class="slider-v2" for="s3"></label>
<input type="checkbox" id="s4" checked="" />
<label class="slider-v2" for="s4"></label>
</div><!--/wrap-->
<div class="wrap">
<input type="checkbox" id="s5" />
<label class="slider-v3" for="s5"></label>
<input type="checkbox" id="s6" checked="" />
<label class="slider-v3" for="s6"></label>
</div><!--/wrap-->
@import "compass";
html,body { height:100% }
body { background:linear-gradient(#f7f7f7,#e0e0e0); margin:0 }
.wrap { position:relative; width:33.33%; margin:-72px 0; top:50%; float:left }
label { margin:1.5em auto }
input { position:absolute; left:-9999px }
// **** ==== Slider v1: ==== **** //
// ********** Background:
.slider-v1 {
position: relative; display: block;
width: 5.5em; height: 3em;
cursor: pointer;
border-radius: 1.5em;
transition: 350ms;
background: linear-gradient(rgba(#000,0.07),rgba(#fff,0)),#ddd;
box-shadow:
0 0.07em 0.1em -0.1em rgba(#000,.4) inset,
0 0.05em 0.08em -0.01em rgba(#fff,.7);
}
// ********** Switch:
.slider-v1::before {
position: absolute; content:'';
width: 2em; height: 2em;
top: 0.5em; left: 0.5em;
border-radius: 50%;
transition: 250ms ease-in-out;
background: linear-gradient(#f5f5f5 10%,#eee);
box-shadow:
0 0.1em 0.15em -0.05em rgba(#fff,.9
) inset,
0 0.5em 0.3em -0.1em rgba(#000,.25);
}
// ********** Markers:
.slider-v1::after {
position: absolute; content:'';
width: 1em; height: 1em;
top: 1em; left: 6em;
border-radius: 50%;
transition: 250ms ease-in;
background: linear-gradient(rgba(#000,0.07),rgba(#fff,0.1)),#ddd;
box-shadow:
0 0.08em 0.15em -0.1em rgba(#000,.5) inset,
0 0.05em 0.08em -0.01em rgba(#fff,.7),
-7.25em 0 0 -0.25em rgba(#000,.3);
}
input:checked + .slider-v1::after {
background: linear-gradient(rgba(#000,0.07),rgba(#fff,0.1)),#4c6;
box-shadow:
0 0.08em 0.15em -0.1em rgba(#000,.5) inset,
0 0.05em 0.08em -0.01em rgba(#fff,.7),
-7.25em 0 0 -0.25em rgba(#000,.12);
}
input:checked + .slider-v1::before {
left: 3em;
}
// **** ==== Slider v2 ==== **** //
// ********** Background:
.slider-v2 {
position: relative; display: block;
width: 5.5em; height: 3em;
cursor: pointer;
border-radius: 1.5em;
transition: 350ms;
background: linear-gradient(rgba(#000,0.07),rgba(#fff,0)),#ddd;
box-shadow:
0 0.07em 0.1em -0.1em rgba(#000,.4) inset,
0 0.05em 0.08em -0.01em rgba(#fff,.7);
}
// ********** Switch:
.slider-v2::after {
position: absolute; content:'';
width: 2em; height: 2em;
top: 0.5em; left: 0.5em;
border-radius: 50%;
transition: 250ms ease-in-out;
background: linear-gradient(#f5f5f5 10%,#eee);
box-shadow:
0 0.1em 0.15em -0.05em rgba(#fff,.9
) inset,
0 0.2em 0.2em -0.12em rgba(#000,.5);
}
// ********** Channel:
.slider-v2::before {
position: absolute; content:'';
width: 4em; height: 1.5em;
top: 0.75em; left: 0.75em;
border-radius: 0.75em;
transition: 250ms ease-in-out;
background: linear-gradient(rgba(#000,0.07),rgba(#fff,0.1)),#d0d0d0;
box-shadow:
0 0.08em 0.15em -0.1em rgba(#000,.5) inset,
0 0.05em 0.08em -0.01em rgba(#fff,.7),
0 0 0 0 rgba(#4c6,.7) inset;
}
input:checked + .slider-v2::before {
box-shadow:
0 0.08em 0.15em -0.1em rgba(#000,.5) inset,
0 0.05em 0.08em -0.01em rgba(#fff,.7),
3em 0 0 0 rgba(#4c6,.7) inset;
}
input:checked + .slider-v2::after {
left: 3em;
}
// **** ==== Slider v3 ==== **** //
// ********** Background:
.slider-v3 {
position: relative; display: block;
width: 7em; height: 3em;
cursor: pointer;
border-radius: 1.5em;
transition: 350ms;
background: #ddd;
}
// ********** Switch:
.slider-v3::after {
position: absolute; content:'';
width: 2em; height: 2em;
top: 0.5em; left: 0.5em;
border-radius: 1.5em;
transition:
width 200ms ease-out,
height 300ms 50ms ease-in,
top 300ms 50ms ease-in,
left 250ms 50ms ease-in,
box-shadow 300ms ease-in;
background: #4c6;
box-shadow: 0 0 0 1.5em #f2f2f2 inset;
}
input:checked + .slider-v3::after {
width: 4em; height: 3em;
top: 0; left: 3em;
box-shadow: 0 0 0 0 #f2f2f2 inset;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment