How to Create Custom Checkbox Animation Using HTML and CSS Only.

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 :-

Choose Any Text Editor (VSCode Recommended).
Create 2 Files in Current Project Directory, index.html and style.css.
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;
}

Blog

How to Create Custom Checkbox Animation Using HTML and CSS Only.

Ajay Sharma

Join Our Newsletter. No Spam, Only the good stuff.

Related