Cool css motion checkbox design

12/02/2022  •  236 views
 
<!DOCTYPE html>
<html lang="en" >

<head>

 <meta charset="UTF-8">
 
 <title>Motion Checkbox</title>
 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
 
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800italic,400);
html, body {
 background-color: #323232;
 font-family: Open sans;
}

h1 {
 font-style: 30px;
 color: white;
 margin-bottom: 30px;
}
h1 a {
 color: white;
 font-weight: bold;
}

.center {
 margin: 50px auto;
 width: 400px;
 text-align: center;
}

input {
 display: none;
}

fieldset {
 position: relative;
 width: 80px;
 margin: 0 auto;
}

label {
 cursor: pointer;
}
label:after {
 left: -20px;
 width: 40px;
 height: 40px;
 -moz-transition: cubic-bezier(0.55, 0, 0.1, 1) 600ms;
 -o-transition: cubic-bezier(0.55, 0, 0.1, 1) 600ms;
 -webkit-transition: cubic-bezier(0.55, 0, 0.1, 1) 600ms;
 transition: cubic-bezier(0.55, 0, 0.1, 1) 600ms;
 display: inline-block;
 z-index: 1;
 border: 6px solid #323232;
 z-index: 10;
 box-shadow: inset 0 0 0px 6px #848484;
 position: absolute;
 border-radius: 30px;
 background-color: #323232;
 content: "";
 -moz-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
label:before {
 background-color: #474747;
 height: 8px;
 width: 80px;
 margin-top: 23px;
 content: "";
 left: 0;
 z-index: 0;
 position: absolute;
 border-radius: 4px;
}

input[type=checkbox]:checked + label:after {
 -moz-transform: translate3d(74px, 0, 0);
 -ms-transform: translate3d(74px, 0, 0);
 -webkit-transform: translate3d(74px, 0, 0);
 transform: translate3d(74px, 0, 0);
 box-shadow: inset 0 0 0px 25px white;
}
</style>

</head>

<body translate="no" >
 <div class="center">
 <h1><a href="https://dribbble.com/marklamb" target="_blank">Mark Lamb's</a> motion checkbox design</h1>
 <fieldset>
 
 <input id="cb" type="checkbox" />
 <label for="cb"></label>

 </fieldset>
 
</div>
 
 
 
 

</body>

</html>
 
 English / Indonesian