How to create animated checkbox with a custom tick icon

navya , Credit to  volkotech-solutions Jun 19
Animated Checkbox with a custom tick icon Banner Image

Learn how to create and animate a browser-compatible custom checkbox with a customized tick icon along with a hover effect using pure CSS and HTML.

We can create custom checkboxes and radio buttons in many methods. Click here to get one of the simple methods to create.

HTML structure

The base of any web-projects is the proper HTML structure and here is mine for the current task.

<!DOCTYPE html>
<html lang="en">
    <title>Creating animated checkbox</title>
    <link rel="stylesheet" href="./stylea.css" />
    <div class="animated-checkbox">
      <h1>Favorite Game</h1>
      <input type="checkbox" id="basket-ball" />
      <label for="basket-ball">
        <span class="name">Basket Ball</span>
        <span class="icon"></span>
      <input type="checkbox" id="cricket" />
      <label for="cricket">
        <span class="name">Cricket</span>
        <span class="icon"></span>
      <input type="checkbox" id="hide-and-seek" />
      <label for="hide-and-seek">
        <span class="name">Hide And Seek</span>
        <span class="icon"></span>
      <input type="checkbox" id="shuttle" />
      <label for="shuttle">
        <span class="name">Shuttle</span>
        <span class="icon"></span>

Let us check for the results with plain HTML, here is the screenshot for your reference.
Result of Checkboxes with plain HTML

Required CSS

Now we will create the custom checkbox along with the required animation effect.


* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
.animated-checkbox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
.animated-checkbox input {
  display: none;
.animated-checkbox label {
  position: relative;
  width: 290px;
  height: 50px;
  background: #ededed;
  margin: 16px 0;
  border-radius: 3px;
  font-family: "Poppins sans-serif";
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.3rem;
  overflow: hidden;
  cursor: pointer;
.animated-checkbox label::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  height: 70px;
  background: #29c4f3;
  transition: 0.4s ease;
  clip-path: circle(0px at 2px 2px);
.name {
  z-index: 1;
  transition: 0.5s ease-in-out;
  font-size: 20px;
.icon::after {
  content: "";
  position: absolute;
  left: auto;
  top: 25px;
  right: 36px;
  background: white;
  width: 3px;
  height: 4px;
  box-shadow: 2px 0 0 rgb(255, 255, 255), 4px 0 0 rgb(255, 255, 255),
    4px -2px 0 rgb(250, 242, 242), 4px -4px 0 white,
    4px -6px 0 rgb(247, 243, 243), 4px -8px 0 rgb(253, 246, 246);
  transform: rotate(45deg);
  border: 0;
.icon {
  display: block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  font-size: 16px;
  color: #ededed;
  border: 2px solid #dbdbdb;
  z-index: 1;
  display: grid;
  place-items: center;
.animated-checkbox input:checked + label::after {
  clip-path: circle(100%);
.animated-checkbox input:checked + label .name {
  color: #fff;
.animated-checkbox input:checked + label .icon {
  border-color: #fff;
  color: #fff;

After applying the above CSS, the checkboxes will appear like this. Here is the screenshot for your reference.

Result of Checkboxes after applying CSS

Final Results

Now to check the animation effect select any one of the checkboxes and observe it. The result will appear as shown below.

Result GIF of Animated Checkbox with customized tick icon

If we need to change the direction of animation, then simply change the clip-path function values. To know about all the available CSS functions, you can grab here(functions blog)


Hope we have achieved the goal of this article which is to create an animated checkbox with a custom tick mark icon by providing sufficient details. If not please raise your questions in the comments, we will reach you soon.




Read Next