Animating a checkbox with CSS

Animating checkboxes in your forms can greatly enhance the experience your users will have and undeniably increase their desire to fill them out. A more enjoyable form to complete is a form that your users will fill out more often. In this article, let's see how to animate a checkbox with CSS!

Step 1

The HTML code

<label class="checkbox">
      <input class="checkbox_input" type="checkbox">
      <svg class="checkbox_check" width="25" 
    height="25">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
    </label>
    
    <!-- ICON SCRIPT -->
    <script src="https://unpkg.com/feather-icons"></script>
    <script>
      feather.replace();
    </script>

In the previous step, we used two rather original tags: svg and polyline.

The svg tag allows you to create a new SVG shape, which is a mathematical representation of an image.

The polyline tag precisely defines the points of the SVG shape. Once connected, these points create a checkmark shape.

Step 2

Let's style the label and the checkbox.

.checkbox {
      cursor: pointer;
    }
    
    .checkbox:hover .checkbox_check {
      background: #ff4754;
    }
    
    .checkbox_input {
      width: 0;
      height: 0;
      opacity: 0;
    }

In the previous step, we hid the checkbox by the default created by our browser with the input tag.

We want to display our custom checkbox without any part. Thanks to the label tag, once we click on our custom checkbox, the actual checkbox that we just hid will be checked.

Step 3

Let's move on to styling the checkbox when it is checked!

.checkbox_input:checked + .checkbox_check {
      background: #ff4754;
      stroke-dashoffset: 0;
    }

The stroke-dashoffset property allows you to offset the SVG shape we just created. Here, we set it to its initial position: 0. So, we see the shape.

Step 4

Now, let's style the checkbox that we have created from scratch.

.checkbox_check {
      border: 0.2rem solid #ff4754;
      stroke: #f9f9f9;
      stroke-dasharray: 25;
      stroke-dashoffset: 25;
      stroke-linecap: round;
      stroke-width: 0.2em;
      border-radius: 0.2em;
      fill: none;
      transition: background 0.4s, stroke-dashoffset 
    0.6s;
    }

In the previous step, we used several properties that might overwhelm you a bit. However, you will see that everything is very simple, just keep in mind that we are styling our unchecked checkbox.

• stroke: the color of the SVG shape
• stroke-dasharray: the size of the shape (if we simplify a lot)
• stroke-dashoffset: the offset of the SVG shape, here we hide it because it is 25px. So, we offset it by 25px: we don't see it.
• stroke-linecap: the style of the line we created (our SVG shape is just a line, here we ask for it to be rounded on the sides)
• stroke-width: the thickness of the shape's line
• fill: the fill color of the shape