Skip to content

Instantly share code, notes, and snippets.

@AlyoshaS

AlyoshaS/checkbox.css

Created June 1, 2018 06:56
Show Gist options
  • Save AlyoshaS/54c293942974f61ef7028a59d605e6bc to your computer and use it in GitHub Desktop.
Save AlyoshaS/54c293942974f61ef7028a59d605e6bc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
checkbox.css
body {
margin: 0;
padding: 0;
background: #ddd;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
input[type="checkbox"] {
position: relative;
width: 80px;
height: 40px;
-webkit-appearance: none;
background: #c6c6c6;
outline: none;
border-radius: 20px;
box-shadow: inset 0 0 5px rgba(0,0,0,.2);
transition: .5s;
}
input:checked[type="checkbox"] {
background: #03a9f4;
/* background: #007bff; */
}
input[type="checkbox"]:before {
content: '';
position: absolute;
width: 40px;
height: 40px;
border-radius: 20px;
top: 0;
left: 0;
background: #fff;
transform: scale(1.1);
box-shadow:0 2px 5px rgba(0,0,0,.2);
transition: .5s;
}
input:checked[type="checkbox"]:before {
left: 40px;
}
Raw
checkbox.html
<body>
<div class="center">
<input type="checkbox">
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment