39
<input type="checkbox"> I Like It
*,*::before,*::after{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
background:#eee;
font-size: 2rem;
font-family: sans-sarif;
}
input {
position: relative;
margin: 0 10px;
width: 100px;
height: 50px;
border-radius: 25px;
background: #999;
outline: 0;
-webkit-appearance: none;
cursor: pointer;
}
input::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
display: block;
width: calc((100% - 4px) / 2);
height: calc(100% - 4px);
border-radius: 50%;
background: #eee;
transition: all .1s linear;
}
input:checked {
background: #5b5;
}
input:checked::after {
transform: translateX(100%);
}
CSS hover effects allow elements to load quickly. Most web designers prefer CSS animations as they are easy to employ.