Day # 19: Checkbox animation

Forms are a commonly used functionality for any website. As frontend developers we need to be able to handle their styling. One important element of forms is checkboxes. Styling them is not a particularly easy task, but as with any complex one, if we divide them into small and feasible activities, then we will accomplish our goal.

The first thing we need to do is to include an input type checkbox:

            <input type="checkbox" id="good" class="toggle">

            <label for="good" class="label">

                <div class="ball"></div>

            </label>

            <span>Check!</span>

Then we need to style the label:

.label {

    position: relative;

    background-color: #d0d0d0;

    border-radius: 50px;

    cursor: pointer;

    display: inline-block;

    margin: 0 15px 0;

    width: 80px;

    height: 40px;

}

Next, we need to style the small ball within the input:

.ball {

    background: #fff;

    height: 34px;

    width: 34px;

    border-radius: 50%;

    position: absolute;

    top: 3px;

    left: 3px;

    align-items: center;

    justify-content: center;

    animation: slideOff 0.3s linear forwards;

}

And finally, we need to create animations for when the ball slides in and when it slides out:

.toggle:checked + .label {

    background-color: darkblue;

}

.toggle:checked + .label .ball {

    animation: slideOn 0.3s linear forwards;

}

That animation consists of the following steps:

@keyframes slideOn {

    0% {

        transform: translateX(0) scale(1);

    }

    50% {

        transform: translateX(20px) scale(1.2);

    }

    100% {

        transform: translateX(40px) scale(1);

    }

}

Styling checkboxes for the first time can be daunting, but if we divide the whole process into tiny steps, then we can focus on getting each one of them right so we can accomplish our goal!