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;
}
Top comments (0)