<!-- A variety of CSS toggle button effects, from varying sources fo inspiration.
No JS, all CSS and HTML.
Tested in IE10, Chrome, Firefox, Safari
-->
<h1>A bunch of funky CSS3 Toggle Buttons <a href="https://twitter.com/AshNolan_" target="blank">created by @AshNolan_</a></h1>
<!-- Inspiration – https://dribbble.com/shots/1909289-Day-Night-Toggle-Button-GIF?list=searches&tag=toggle&offset=8
Also see this pen, which beat me to it for an alternative implementation!
https://codepen.io/jsndks/pen/qEXzOQ
-->
<h2 class="headingOuter">Day/Night Toggle</h2>
<div class="toggle toggle--daynight">
<input type="checkbox" id="toggle--daynight" class="toggle--checkbox">
<label class="toggle--btn" for="toggle--daynight"><span class="toggle--feature"></span></label>
</div>
<!-- Inspiration – https://dribbble.com/shots/1836048-Emojis-Pt-1?list=searches&offset=3 -->
<h2 class="headingOuter">Like Toggle</h2>
<div class="toggle toggle--like">
<input type="checkbox" id="toggle--like" class="toggle--checkbox">
<label class="toggle--btn" for="toggle--like"><span class="toggle--feature"></span></label>
</div>
<!-- Inspiration – https://dribbble.com/shots/408190-Quick-Setting-Toggles?list=searches&tag=toggle_button&offset=0 -->
<h2 class="headingOuter">Shadow Effect Toggle</h2>
<div class="toggle toggle--text">
<input type="checkbox" id="toggle--text" class="toggle--checkbox">
<label class="toggle--btn" for="toggle--text" data-label-on="on" data-label-off="off"></label>
</div>
<!-- Inspiration – https://dribbble.com/shots/712038-Button?list=searches&tag=toggle_buttons&offset=23 -->
<h2 class="headingOuter">3d Power button toggles</h2>
<div class="toggle toggle--push">
<input type="checkbox" id="toggle--push" class="toggle--checkbox">
<label class="toggle--btn" for="toggle--push" data-label-on="on" data-label-off="off"></label>
</div>
<div class="toggle toggle--push toggle--push--glow">
<input type="checkbox" id="toggle--push--glow" class="toggle--checkbox">
<label class="toggle--btn" for="toggle--push--glow" data-label-on="on" data-label-off="off"></label>
</div>
<!-- Inspiration – https://dribbble.com/shots/525358-Buttons-Lights-Shadows?list=searches&tag=toggle_button&offset=10 -->
<h2 class="headingOuter">Physical Toggle Switch</h2>
<div class="toggle toggle--knob">
<input type="checkbox" id="toggle--knob" class="toggle--checkbox">
<label class="toggle--btn" for="toggle--knob"><span class="toggle--feature" data-label-on="on" data-label-off="off"></span></label>
</div>
<!-- Inspiration – https://dribbble.com/shots/96984-MIT-Sloan-iPad-App-High-Resolution?list=searches&tag=toggle&offset=11 -->
<h2 class="headingOuter">Sliding Switch Toggle</h2>
<div class="toggle toggle--switch">
<input type="checkbox" id="toggle--switch" class="toggle--checkbox">
<label class="toggle--btn" for="toggle--switch"><span class="toggle--feature" data-label-on="on" data-label-off="off"></span></label>
</div>
<!-- Inspiration – https://codepen.io/NobodyRocks/pen/qzfoc -->
<h2 class="headingOuter">Neon Text toggle</h2>
<div class="toggle toggle--neon">
<input type="checkbox" id="toggle--neon" class="toggle--checkbox">
<label class="toggle--btn" for="toggle--neon" data-label-on="on" data-label-off="off"></label>
</div>// Define the fonts used in the Pen
@import url(https://fonts.googleapis.com/css?family=Francois+One);
@import url(https://fonts.googleapis.com/css?family=PT+Sans);
@font-face {
font-family: 'Audiowide';
font-style: normal;
font-weight: 400;
src: local('Audiowide'), local('Audiowide-Regular'), url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
$color-bg: #fff; //background for the demo
body {
font-size: 62.5%;
background-color: $color-bg;
margin: 10px;
border: 1px solid #333;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
h1, h2, h3 {
font-family: 'PT Sans', sans-serif;
text-transform: uppercase;
}
h1 {
font-size: 2.4em;
background-color: rgba(41, 41, 41, 1);
text-align: center;
padding: 20px;
margin: 0;
color: #fff;
a {
display: block;
margin-top: 10px;
text-transform: none;
color: #aaa;
font-size: 16px;
text-decoration: none;
}
}
.headingOuter {
background: #f1f1f1;
text-align: center;
margin-top: 50px;
margin-bottom: 0;
padding: 10px;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
font-size: 1.6em;
&:first-child {
margin-top: 0;
}
h1 + & {
margin-top: 0;
}
}
/* =====================================================
Some defaults across all toggle demos
===================================================== */
.toggle {
display: block;
text-align: center;
margin-top: 40px;
user-select: none;
}
.toggle--checkbox {
display: none;
}
.toggle--btn {
display: block;
margin: 0 auto;
font-size: 1.4em;
transition: all 350ms ease-in;
&:hover {
cursor: pointer;
}
}
.toggle--btn,
.toggle--checkbox,
.toggle--feature {
&,
&:before,
&:after {
transition: all 250ms ease-in;
}
&:before,
&:after {
content: '';
display: block;
}
}
/* ===================================================
Day/Night and Gender toggle buttons
=================================================== */
$toggleHeight: 70px;
$toggleWidth: 125px;
$borderWidth: 5px;
$toggleBtnRadius: $toggleHeight - 14px;
$bgColor--night: #3c4145;
$borderColor--night: #1c1c1c;
$toggleBtn-bgColor--night: #fff;
$toggleBtn-borderColor--night: #e3e3c7;
$bgColor--day: #9ee3fb;
$borderColor--day: #86c3d7;
$toggleBtn-bgColor--day: #ffdf6d;
$toggleBtn-borderColor--day: #e1c348;
$cloud-borderColor: #d3d3d3;
$cloud-bgColor: #fff;
.toggle--daynight,
.toggle--like {
.toggle--btn {
position: relative;
height: $toggleHeight;
width: $toggleWidth;
border-radius: $toggleHeight;
//toggle button
&:before {
position: absolute;
top: 2px;
left: 4px;
width: $toggleBtnRadius;
height: $toggleBtnRadius;
border-radius: 50%;
}
}
}
.toggle--daynight {
.toggle--btn {
border: $borderWidth solid $borderColor--night;
background-color: $bgColor--night;
//toggle button
&:before {
background-color: $toggleBtn-bgColor--night;
border: $borderWidth solid $toggleBtn-borderColor--night;
}
&:after {
position: absolute;
top: 62%;
left: $toggleWidth - ($toggleBtnRadius) - ($borderWidth * 2) - 20px;
z-index: 10;
width: $toggleBtnRadius / 5;
height: $toggleBtnRadius / 5;
opacity: 0;
background-color: $cloud-bgColor;
border-radius: 50%;
//crazy ass box-shadow to make the cloud
box-shadow: $cloud-bgColor 0 0,
$cloud-bgColor 3px 0,
$cloud-bgColor 6px 0,
$cloud-bgColor 9px 0,
$cloud-bgColor 11px 0,
$cloud-bgColor 14px 0,
$cloud-bgColor 16px 0,
$cloud-bgColor 21px -1px 0 1px,
$cloud-bgColor 16px -7px 0 -2px,
$cloud-bgColor 7px -7px 0 1px,
$cloud-borderColor 0 0 0 4px,
$cloud-borderColor 6px 0 0 4px,
$cloud-borderColor 11px 0 0 4px,
$cloud-borderColor 16px 0 0 4px,
$cloud-borderColor 21px -1px 0 5px,
$cloud-borderColor 16px -7px 0 1px,
$cloud-borderColor 7px -7px 0 5px;
transition: opacity 100ms ease-in;
}
}
@keyframes starry_star {
50% {
background-color: rgba(255,255,255,0.1);
box-shadow: #fff 30px -3px 0 0,
#fff 12px 10px 0 -1px,
rgba(255,255,255,0.1) 38px 18px 0 1px,
#fff 32px 34px 0 0,
rgba(255,255,255,0.1) 20px 24px 0 -1.5px,
#fff 5px 38px 0 1px;
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 100;
transform: scale(1.1);
}
55% {
transform: scale(1.1);
}
75% {
transform: scale(.9);
}
100% {
opacity: 100;
transform: scale(1);
}
}
//stars
.toggle--feature {
display: block;
position: absolute;
top: 9px;
left: 52.5%;
z-index: 20;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #fff;
box-shadow: rgba(255,255,255,0.1) 30px -3px 0 0,
rgba(255,255,255,0.1) 12px 10px 0 -1px,
#fff 38px 18px 0 1px,
rgba(255,255,255,0.1) 32px 34px 0 0,
#fff 20px 24px 0 -1.5px,
rgba(255,255,255,0.1) 5px 38px 0 1px;
animation: starry_star 5s ease-in-out infinite;
&:before {
position: absolute;
top: -2px;
left: -25px;
width: 18px;
height: 18px;
background-color: $toggleBtn-bgColor--night;
border-radius: 50%;
border: 5px solid $toggleBtn-borderColor--night;
box-shadow: $toggleBtn-borderColor--night -28px 0 0 -3px,
$toggleBtn-borderColor--night -8px 24px 0 -2px;
transform-origin: -6px 130%;
}
}
//what happens once checkbox is checked
.toggle--checkbox:checked {
& + .toggle--btn {
background-color: $bgColor--day;
border: $borderWidth solid $borderColor--day;
&:before {
left: $toggleWidth - ($toggleBtnRadius) - ($borderWidth * 2) - 4px;
background-color: $toggleBtn-bgColor--day;
border: $borderWidth solid $toggleBtn-borderColor--day;
}
&:after {
opacity: 100;
animation-name: bounceIn;
animation-duration: 0.60s;
animation-delay: 0.10s;
animation-fill-mode: backwards;
animation-timing-function: ease-in-out;
}
> .toggle--feature {
opacity: 0;
box-shadow: rgba(255,255,255,0.1) 30px -3px 0 -4px,
rgba(255,255,255,0.1) 12px 10px 0 -5px,
#fff 38px 18px 0 -3px,
rgba(255,255,255,0.1) 32px 34px 0 -4px,
#fff 20px 24px 0 -5.5px,
rgba(255,255,255,0.1) 5px 38px 0 -3px;
animation: none;
&:before {
left: 25px;
transform: rotate(70deg);
}
}
}
}
}
/* ==================================================
Like specific styling
================================================== */
$bgColor--sad: #3498db;
$borderColor--sad: #0865B0;
$bgColor--happy: #e25d5d;
$borderColor--happy: #AD1000;
$emojiWidth: 36px;
$emojiBgColor: #f2dd68;
$emojiBorderColor: #e5ce5e;
$emojiColor: #995710;
$emojiColorAlt: #d8aa2b;
$toggleFeaturePosition--sad: ($toggleBtnRadius/2) - 14;
$toggleFeaturePosition--happy: 53px;
.toggle--like {
position: relative;
.toggle--btn {
border: $borderWidth solid $borderColor--sad;
background-color: $bgColor--sad;
//toggle button
&:before {
background-color: $emojiBgColor;
border: $borderWidth solid $emojiBorderColor;
}
}
.toggle--feature {
position: absolute;
left: 14px;
top: 32%;
width: 7px;
height: 7px;
border-radius: 50%;
background-color: $emojiColor;
box-shadow: ($emojiWidth - 8) 0 0 0 $emojiColor;
&:before {
position: absolute;
left: 0;
top: 11px;
width: $emojiWidth;
height: 17px;
background-color: $emojiColor;
border-radius: $emojiWidth $emojiWidth 0 0;
}
&:after {
position: absolute;
left: 9px;
top: 21px;
width: 17px;
height: 7px;
background-color: $emojiColorAlt;
border-radius: 17px 17px 0 0;
}
}
//what happens once checkbox is checked
.toggle--checkbox:checked {
& + .toggle--btn {
background-color: $bgColor--happy;
border: $borderWidth solid $borderColor--happy;
//toggle button
&:before {
transform: translate($toggleWidth - ($toggleBtnRadius) - ($borderWidth * 2) - 8px, 0);
}
& .toggle--feature {
transform: translate($toggleFeaturePosition--happy, 0);
&:before {
border-radius: 0 0 $emojiWidth $emojiWidth;
top: 11px;
}
&:after {
top: 21px;
border-radius: 50%/50%;
}
}
}
}
}
/* ====================================================
Text toggle button
==================================================== */
$toggleHeight: 70px;
$toggleWidth: 180px;
$toggle-borderColor: #8c8c8c;
$toggle-shadowColor: #999;
$activeTextColor: #db4c00;
$inactiveTextColor: #999;
.toggle--text {
.toggle--btn {
position: relative;
width: $toggleWidth;
height: $toggleHeight;
font-family: 'PT Sans', Sans Serif;
text-transform: uppercase;
font-weight: bold;
border-radius: 40px;
border: 1px solid $toggle-borderColor;
border-right: 2px solid $toggle-borderColor;
box-shadow: inset ($toggleWidth/2) 0 10px rgba(255, 255, 255, 0.6),
inset -3px 3px 18px -2px $toggle-borderColor,
0 0 15px #ccc,
0px -5px 16px 1px #ddd,
-5px -5px 16px 1px #ddd,
5px -5px 16px 1px #ddd,
-5px -5px 16px 1px #ddd,
5px -5px 16px 1px #ddd,
17px 9px 0 -5px rgba(255, 255, 255, 0.6),
-3px 6px 12px -7px #000,
//outlines
0 0 0 14px #fff,
0 0 0 15px $toggle-shadowColor;
&:before,
&:after {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
&:before {
content: attr(data-label-on);
left: 15%;
color: $inactiveTextColor;
}
&:after {
content: attr(data-label-off);
right: 15%;
color: $activeTextColor;
}
}
.toggle--checkbox:checked {
& + .toggle--btn {
border-left: 2px solid $toggle-borderColor;
border-right: 1px solid $toggle-borderColor;
box-shadow: inset ($toggleWidth/2) 0 10px rgba(255, 255, 255, 0),
inset 3px 3px 18px -2px $toggle-borderColor,
0 0 15px #ccc,
0px -5px 16px 1px #ddd,
-5px -5px 16px 1px #ddd,
5px -5px 16px 1px #ddd,
-5px -5px 16px 1px #ddd,
5px -5px 16px 1px #ddd,
-17px 9px 0 -5px rgba(255, 255, 255, 0.6),
3px 6px 12px -7px #000,
//outlines
0 0 0 14px #fff,
0 0 0 15px $toggle-shadowColor;
&:before {
color: $activeTextColor;
}
&:after {
color: $inactiveTextColor;
}
}
}
}
/* =====================================================
Toggle - knob button style
===================================================== */
$toggleHeight: 40px;
$toggleWidth: 120px;
$toggleBtnRadius: 48px;
$toggleBtnColor: #f1f1f1;
$toggle-bgColor--inactive: #a2a2a2;
$toggle-bgColor--active: #a4bf4d;
$toggle-textColor: #fff;
.toggle--knob {
& .toggle--btn {
position: relative;
width: $toggleWidth;
height: $toggleHeight;
font-family: 'PT Sans', Sans Serif;
text-transform: uppercase;
color: $toggle-textColor;
background: $toggle-bgColor--active;
box-shadow: inset 0 20px 40px -10px #7b9d25;
border-radius: 40px;
//contains the actual knob part of the button and the 'on' text
&:before {
display: block;
position: absolute;
top: 50%;
left: 60%;
transform: translateY(-50%);
width: $toggleBtnRadius;
height: $toggleBtnRadius;
border-radius: 50%;
background: $toggleBtnColor;
box-shadow: 0 4px 10px 0 #999,
inset 0 10px 10px 8px rgba($toggleBtnColor, 0.6),
inset 0 0 8px 0px #333,
inset 0 0 0 13px #ccc,
inset 0 0 0 14px $toggleBtnColor;
text-indent: -100%;
}
}
& .toggle--feature {
position: relative;
display: block;
overflow: hidden;
height: $toggleHeight;
text-shadow: 0 1px 2px #666;
&:before,
&:after {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
&:before {
content: attr(data-label-on);
left: 20%;
}
&:after {
content: attr(data-label-off);
right: -60%;
}
}
& .toggle--checkbox {
&:checked {
& + .toggle--btn {
background: $toggle-bgColor--inactive;
box-shadow: inset 0 20px 40px -10px #7e7e7e;
&:before { left: 0; }
& .toggle--feature {
&:before { left: -60%; }
&:after { right: 20%; }
}
}
}
}
}
/* =====================================================
Toggle - switch stylee
===================================================== */
$toggleHeight: 44px;
$toggleWidth: 120px;
$toggleBtnWidth: 52px;
$toggleBtnColor: #2b2e3a;
$toggle-bgColor--inactive: #ca5046;
$toggle-bgColor--active: #a4bf4d;
$toggle-textColor: #fff;
.toggle--switch {
& .toggle--btn {
position: relative;
width: $toggleWidth;
height: $toggleHeight;
font-family: 'PT Sans', Sans Serif;
text-transform: uppercase;
color: $toggle-textColor;
// background: $toggle-bgColor--inactive;
background: linear-gradient(90deg, $toggle-bgColor--active 0%, $toggle-bgColor--active 50%, $toggle-bgColor--inactive 50%, $toggle-bgColor--inactive 200%);
background-position: -80px 0;
background-size: 200% 100%;
box-shadow: inset 0 0px 22px -8px #111;
&,
&:before {
border-radius: 4px;
}
//contains the actual knob part of the button and the 'on' text
&:before {
display: block;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: $toggleBtnWidth;
height: $toggleHeight;
border: 2px solid #202027;
background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.15) 100%);
background-color: $toggleBtnColor;
background-size: 5px 5px;
text-indent: -100%;
}
}
& .toggle--feature {
position: relative;
display: block;
overflow: hidden;
height: $toggleHeight;
text-shadow: 0 1px 2px #666;
&:before,
&:after {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
&:before {
content: attr(data-label-on);
left: -60%;
}
&:after {
content: attr(data-label-off);
right: 16%;
}
}
& .toggle--checkbox {
&:checked {
& + .toggle--btn {
// background: $toggle-bgColor--active;
background-position: 0 0;
&:before { left: calc(100% - #{$toggleBtnWidth}); }
& .toggle--feature {
&:before { left: 20%; }
&:after { right: -60%; }
}
}
}
}
}
/* ======================================================
Push button toggle
====================================================== */
$toggleBtnRadius: 50px;
$toggleBtnColor: #f9f8f6;
$toggleShadowColor: #333;
$toggleActiveColor: #FF9900;
$toggleInactiveColor: #ccc;
.toggle--push {
& .toggle--btn {
position: relative;
width: $toggleBtnRadius;
height: $toggleBtnRadius;
background-color: $toggleBtnColor;
border-radius: 50%;
box-shadow: 0 5px 10px 0px $toggleShadowColor,
0 15px 20px 0px lighten($toggleShadowColor, 60%);
&,
&:before,
&:after {
transition-duration: 150ms;
}
&:before {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: $toggleBtnRadius / 2.2;
height: $toggleBtnRadius / 2.2;
border-radius: 50%;
background-color: $toggleActiveColor;
box-shadow: inset 0 0 0 5px $toggleInactiveColor,
inset 0 0 0 14px $toggleBtnColor;
}
&:after {
position: absolute;
left: 50%;
top: 35%;
transform: translate(-50%, -50%);
width: 4px;
height: 12px;
background-color: $toggleInactiveColor;
box-shadow: 0 0 0 2.5px $toggleBtnColor;
}
&:hover {
&:before {
box-shadow: inset 0 0 0 5px darken($toggleInactiveColor, 10%),
inset 0 0 0 14px $toggleBtnColor;
}
&:after {
background-color: darken($toggleInactiveColor, 10%);
}
}
}
& .toggle--checkbox {
&:checked {
& + .toggle--btn {
box-shadow: 0 2px 5px 0px lighten($toggleShadowColor, 30%),
0 15px 20px 0px transparent;
&:before {
box-shadow: inset 0 0 0 5px $toggleActiveColor,
inset 0 0 0 14px $toggleBtnColor;
}
&:after {
background-color: $toggleActiveColor;
}
}
}
}
}
$toggleBgColor: #111;
$toggleBtnColor: #dfdfdf;
$toggleActiveColor: #0094e0;
$toggleInactiveColor: #aaa;
.toggle--push--glow {
background: $toggleBgColor;
padding: 50px 0;
margin-bottom: -50px;
& .toggle--btn {
background-color: $toggleBtnColor;
box-shadow: 0 5px 10px 0px $toggleShadowColor,
0 0 0 3px lighten($toggleBgColor, 20%),
0 0 8px 2px transparent,
0 0 0 6px lighten($toggleBgColor, 50%);
&:before {
box-shadow: inset 0 0 0 5px $toggleInactiveColor,
inset 0 0 0 14px $toggleBtnColor;
}
&:after {
background-color: $toggleInactiveColor;
box-shadow: 0 0 0 2.5px $toggleBtnColor;
}
&:hover {
&:before {
box-shadow: inset 0 0 0 5px darken($toggleInactiveColor, 20%),
inset 0 0 0 14px $toggleBtnColor;
}
&:after {
background-color: darken($toggleInactiveColor, 20%);
}
}
}
& .toggle--checkbox {
&:checked {
& + .toggle--btn {
box-shadow: 0 0px 8px 0 darken($toggleActiveColor, 10%),
0 0 0 3px $toggleActiveColor,
0 0 30px 0 $toggleActiveColor,
0 0 0 6px lighten($toggleBgColor, 40%);
&:before {
box-shadow: inset 0 0 0 5px $toggleActiveColor,
inset 0 0 0 14px $toggleBtnColor;
}
&:after {
background-color: $toggleActiveColor;
}
}
}
}
}
/* ======================================================
Neon toggle
====================================================== */
@keyframes neon {
0% {
text-shadow: 0 0 10px #fff,
0 0 15px #fff,
0 0 25px #fff,
0 0 40px #FF9900,
0 0 70px #FF9900,
0 0 90px #FF9900,
0 0 90px #FF9900;
}
100% {
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #FF9900,
0 0 35px #FF9900,
0 0 40px #FF9900,
0 0 50px #FF9900;
}
}
$textColor--active: #f1f1f1;
$textColor--inactive: #333;
.toggle--neon {
background-color: #222;
margin-top: 0;
padding: 50px 0;
& .toggle--btn {
font-family: Audiowide;
text-transform: uppercase;
font-size: 6.2em;
color: $textColor--inactive;
// text-shadow: -1px -1px 1px #111, 1px 1px 1px #444;
text-shadow: 0 0 10px transparent,
0 0 15px transparent,
0 0 25px transparent,
0 0 40px transparent,
0 0 70px transparent,
0 0 90px transparent,
0 0 90px transparent;
&:before,
&:after {
display: inline-block;
margin: 0 20px;
transition: all 220ms ease-in-out;
}
&:before {
content: attr(data-label-off);
animation: neon 1.5s ease-in-out infinite alternate;
animation-delay: 90ms;
color: $textColor--active;
}
&:after {
content: attr(data-label-on);
}
}
& .toggle--checkbox {
&:checked {
& + .toggle--btn {
&:before {
animation: none;
color: $textColor--inactive;
}
&:after {
animation: neon 1.5s ease-in-out infinite alternate;
animation-delay: 90ms;
color: $textColor--active;
}
}
}
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.