Toggle switches are useful for controlling the on/off (active/inactive) states of certain features of the page.

How it looks

“On” state

image of toggle switch example

“Off” state

Image of toggle switch in off position

The code

HTML

<div class="toggle-switch">
<input type="checkbox" id="calendar-activity" class="channel-activity-feed" name="visible" value="true" />
<label class="expand-collapse" for="calendar-activity">
<div class="marker"></div>
</label>
</div>

CSS

.toggle-switch {
position: relative;
}

.toggle-switch label {
display: block;
background: #bbc3c7;
width: 96px;
height: 20px;
padding: 0 8px;
border-radius: 19px;
color: #000;
transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
cursor: pointer;
font-weight: 200;
margin-top: 10px;
font-size: 12px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

}
.toggle-switch label:before, .toggle-switch label:after {
display: inline-block;
position: relative;
transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
top: 2px;
}
.toggle-switch label:before {
float: left;
opacity: 0;
visibility: hidden;
}
.toggle-switch label:after {
float: right;
opacity: 1;
visibility: visible;
}
.toggle-switch label.yes-no:before {
content: 'Yes';
}
.toggle-switch label.yes-no:after {
content: 'No';
}
.toggle-switch label.yes-no .marker {
margin-left: 28px;
}
.toggle-switch label.visibility {
width: 164px;
}
.toggle-switch label.visibility:before {
content: 'Visible';
}
.toggle-switch label.visibility:after {
content: 'Invisible';
}
.toggle-switch label.visibility .marker {
margin-left: 28px;
}
.toggle-switch label.expand-collapse {
width: 160px;
}
.toggle-switch label.expand-collapse:before {
content: 'Expand';
}
.toggle-switch label.expand-collapse:after {
content: 'Collapse';
}
.toggle-switch label.expand-collapse .marker {
margin-left: 24px;
}
.toggle-switch label .marker {
display: inline-block;
width: 12px;
height: 12px;
margin: 5px 0 1px 2px;
border-radius: 12px;
border: 1px solid #000;
margin-left: 39px;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
}
.toggle-switch input[type="checkbox"] {
opacity: 0;
position: absolute;
top: 0;
left: 0;
}

.toggle-switch input[type="checkbox"]:focus ~ label .marker,
.toggle-switch input[type="checkbox"]:hover ~ label .marker {
background: #000000;
}

.toggle-switch input[type="checkbox"]:checked ~ label {
background: #1bbd8b;
}
.toggle-switch input[type="checkbox"]:checked ~ label:after {
opacity: 0;
visibility: hidden;
}
.toggle-switch input[type="checkbox"]:checked ~ label:before {
opacity: 1;
visibility: visible;
}
.toggle-switch input[type="checkbox"]:checked ~ label .marker {
margin-left: 4px;
}

An <input> of type="checkbox" is used here to provide an accessible communication of state. That is, screen readers will identify the control as a checkbox, then announce “checked” (on) or “not checked” (off). The focused control can have its state changed by pressing the Space key. CSS is used to provide a compelling visual design.