Animated Heart Checkbox Using HTML and CSS (Free Source Code)
Your website gets an exciting twist when you use Animated Heart Checkbox through HTML and CSS to replace regular checkboxes with heart-shaped icons.
The provided code implements best programming standards to enable easy implementation by beginners and professionals alike. Web designers seeking playful memorable aspects for their projects should choose this interactive feature for their UI elements and web components and Open-Source UI elements.
The checkbox with animated hearts serves as an excellent tool for both trainees who want to experience CSS animations through practical work and junior developers who wish to learn CSS animations with hands-on projects.
GitHub Source: Animated Heart Checkbox
Features of Animated Heart Checkbox
- Easy Customization: Colors, sizes, and animation speeds can be changed to match your brand’s look.
- Heart Icon Transformation: The heart transitions from an outline to a filled shape with a simple click.
- Celebration Effect: A quick burst animation appears when the checkbox is checked, adding extra flair.
- Lightweight Code: Built with only HTML and CSS, ensuring minimal impact on page load times.
Technologies Used
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
Recommended for You
- Stylish Lock Icon Checkbox
- Interactive Burger Menu Checkbox
- Multi-Ring Circular Loader
- Animated Pencil Loader
- 12-Dot Circular Loader
Steps to Build Website Checkbox
Implement this feature by inserting the HTML code to your webpage as well as the CSS code to your stylesheet. After selection you may customize either the heart’s color or the animation timing according to your preferred settings. The quick integration of heart check boxes for your design becomes possible through this method which does not necessitate additional libraries or complicated setup.
HTML
Here is the HTML code for your index.html file:
<!DOCTYPE html>
<!-- Developed by Shokat Javed available at www.jvcodes.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Heart Checkbox - JV Codes</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="heart-container" title="Like">
<input type="checkbox" class="checkbox" id="Give-It-An-Id">
<div class="svg-container">
<svg viewBox="0 0 24 24" class="svg-outline" xmlns="http://www.w3.org/2000/svg">
<path d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Zm-3.585,18.4a2.973,2.973,0,0,1-3.83,0C4.947,16.006,2,11.87,2,8.967a4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,11,8.967a1,1,0,0,0,2,0,4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,22,8.967C22,11.87,19.053,16.006,13.915,20.313Z">
</path>
</svg>
<svg viewBox="0 0 24 24" class="svg-filled" xmlns="http://www.w3.org/2000/svg">
<path d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Z">
</path>
</svg>
<svg class="svg-celebrate" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<polygon points="10,10 20,20"></polygon>
<polygon points="10,50 20,50"></polygon>
<polygon points="20,80 30,70"></polygon>
<polygon points="90,10 80,20"></polygon>
<polygon points="90,50 80,50"></polygon>
<polygon points="80,80 70,70"></polygon>
</svg>
</div>
</div>
</body>
</html>
CSS
Here is the complete code for style.css file to style the checkbox:
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #383838;
}
.heart-container {
--heart-color: rgb(255, 91, 137);
position: relative;
width: 50px;
height: 50px;
transition: .3s;
}
.heart-container .checkbox {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
z-index: 20;
cursor: pointer;
}
.heart-container .svg-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.heart-container .svg-outline,
.heart-container .svg-filled {
fill: var(--heart-color);
position: absolute;
}
.heart-container .svg-filled {
animation: keyframes-svg-filled 1s;
display: none;
}
.heart-container .svg-celebrate {
position: absolute;
animation: keyframes-svg-celebrate .5s;
animation-fill-mode: forwards;
display: none;
stroke: var(--heart-color);
fill: var(--heart-color);
stroke-width: 2px;
}
.heart-container .checkbox:checked~.svg-container .svg-filled {
display: block
}
.heart-container .checkbox:checked~.svg-container .svg-celebrate {
display: block
}
@keyframes keyframes-svg-filled {
0% {
transform: scale(0);
}
25% {
transform: scale(1.2);
}
50% {
transform: scale(1);
filter: brightness(1.5);
}
}
@keyframes keyframes-svg-celebrate {
0% {
transform: scale(0);
}
50% {
opacity: 1;
filter: brightness(1.5);
}
100% {
transform: scale(1.4);
opacity: 0;
display: none;
}
}
Download Source Code
Download this free source code from the button which appears below. The code is available without copyright rules which allows full use and modification for personal or commercial applications.
Conclusion
Insert this code into your websites to deliver exceptional interface features that exceed typical form elements. Your creative addition of interactive components together with this code raises the quality of your portfolio presentation.
Please acknowledge JV Source Codes by adding links and subscribe to our channel and examine the other elements including UI, forms, cards, galleries, menus, footer and hero section. I will resolve all your inquiries about the code through comments so feel free to contact me.
