How to Create Custom Checkbox Animation Using HTML and CSS Only.
Tags: html, css, webdev
Published: 2021-07-13 08:46:59

Hello Everyone, In this Post We Will be Seeing How to Create Custom Checkbox Animation Using HTML and CSS only.

Here is The Live Link of Page https://checkbox-animation.netlify.app/

Follow Me on LinkedIn https://www.linkedin.com/in/ajaysharma12799/

Follow Me on Github https://www.github.com/ajaysharma12799/

Steps to Create :-

1. Choose Any Text Editor (VSCode Recommended).
2. Create 2 Files in Current Project Directory, index.html and style.css.
3. Use Below HTML and CSS Code To Build Your Page.
```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Checkbox</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
        integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="one">
            <input type="checkbox" name="option1" id="option1">
            <label for="option1">
                <span class="name">Checkbox 1</span>
                <span class="icon"><i class="fa fa-check" aria-hidden="true"></i></span>
            </label>
        </div>
        <div class="two">
            <input type="checkbox" name="option2" id="option2">
            <label for="option2">
                <span class="name">Checkbox 2</span>
                <span class="icon"><i class="fa fa-check"></i></span>
            </label>
        </div>
        <div class="three">
            <input type="checkbox" name="option3" id="option3">
            <label for="option3">
                <span class="name">Checkbox 3</span>
                <span class="icon"><i class="fa fa-check"></i></span>
            </label>
        </div>
    </div>
</body>

</html>
```
```
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-weight: lighter;
}
.container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
}
input {
    display: none;
}
label {
    position: relative;
    width: 290px;
    height: 50px;
    background-color: #ededed;
    margin: .5rem;
    padding: 0 1.5rem;
    overflow: hidden;
    font-size: 20px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
label::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 320px;
    height: 70px;
    background-color: #4DD637;
    transition: 0.5s ease;
    clip-path: circle(0px at 260px 25px);
}
.name {
    z-index: 1;
    transition: 0.5s;
}
.icon {
    display: block;
    transition: 0.5s;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    font-size: 20px;
    z-index: 1;
    color: #ededed;
    border: 2px solid #dbdbdb;
}
input:checked + label::after {
    clip-path: circle(100%);
}
input:checked + label .name {
    color: #fff;
}
input:checked + label .icon {
    border-color: #fff;
    color: #fff;
}
```