checkbox micro-animation

In this example below you will see how to do a checkbox micro-animation with some HTML / CSS and Javascript

This awesome code was written by knyttneve, you can see more from this user in the personal repository.
You can find the original code on
Copyright knyttneve ©


  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>checkbox micro-animation</title>
    <link rel="stylesheet" href="">

      <link rel="stylesheet" href="css/style.css">



  <input type="checkbox" class="checkbox-input" id="checkbox">
<label for="checkbox" class="checkbox"></label>



/*Downloaded from */
.checkbox {
  margin: 100px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: red;
  display: inline-block;
  box-sizing: border-box;
  transition: .3s;
  background: red;
  position: relative;
.checkbox:hover {
  border-width: 8px;
.checkbox:after {
  width: 3px;
  height: 10px;
  background: #fff;
  content: "";
  position: absolute;
  top: 6px;
  left: 4px;
  transform: rotate(-40deg);
  box-shadow: 0 2px 4px black;
.checkbox:before {
  width: 3px;
  height: 24px;
  background: #fff;
  content: "";
  position: absolute;
  top: -6px;
  left: 14px;
  transform: rotate(40deg);
  box-shadow: 0 2px 4px black;

.checkbox-input {
  display: none;
.checkbox-input:checked ~ .checkbox {
  border-width: 15px;