Skip to content

Instantly share code, notes, and snippets.

@encody

encody/index.html

Created July 24, 2016 04:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save encody/3f7a5198011669bd65787a07b935e515 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save encody/3f7a5198011669bd65787a07b935e515 to your computer and use it in GitHub Desktop.
Download ZIP
Toggle Switches
Raw
index.html
<!--
Video Guide: https://youtu.be/39b_FstkhSM
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Toggle Switches</title>
<link rel="stylesheet" href="toggle-switches.css">
</head>
<body>
<input type="checkbox" class="toggle-switch">
<input type="checkbox" class="toggle-switch" checked>
<br>
<input type="checkbox" class="toggle-switch" checked>
<input type="checkbox" class="toggle-switch">
</body>
</html>
Raw
toggle-switches.css
/*
Video Guide: https://youtu.be/39b_FstkhSM
*/
input[type=checkbox].toggle-switch {
/* Change font-size here to scale the switches */
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 6em;
height: 3em;
border-radius: 3em;
background-color: #ddd;
outline: 0;
cursor: pointer;
transition: background-color 0.09s ease-in-out;
position: relative;
}
input[type=checkbox].toggle-switch:checked {
background-color: #3af;
}
input[type=checkbox].toggle-switch::after {
content: '';
width: 3em;
height: 3em;
background-color: white;
border-radius: 3em;
position: absolute;
transform: scale(0.7);
left: 0;
transition: left 0.09s ease-in-out;
box-shadow: 0 0.1em rgba(0, 0, 0, 0.5);
}
input[type=checkbox].toggle-switch:checked::after {
left: 3em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment