Create an Animated Heart Shape Toggle Switch with HTML and CSS

3 min readJun 9, 2024

Step-by-Step Guide to Creating a Heart Toggle Switch with HTML and CSS

Introduction

Creating visually appealing and interactive web elements is a key skill for modern web developers. One such element is an animated heart shape toggle switch, perfect for adding a touch of creativity to your projects. In this guide, we will walk you through the process of creating this toggle switch using HTML and CSS.

Step 1: Setting Up the HTML Structure

First, let’s start with the HTML structure. This structure includes the necessary elements for our heart shape toggle switch.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Animated Heart Shape Toggle Switch</title>
</head>
<body>
    <div class="love">
        <input id="switch" type="checkbox">
        <label class="love-heart" for="switch">
            <i class="left"></i>
            <i class="right"></i>
            <i class="bottom"></i>
            <div class="round"></div>
        </label>
    </div>
</body>
</html>

This code creates a basic HTML structure with a checkbox input and a label that will form our heart shape.

Step 2: Styling the Body

Next, let’s style the body to center our toggle switch and give it a nice background.

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}

This CSS code ensures that our toggle switch is centered both vertically and horizontally on the page.

Step 3: Customizing the Scrollbar

For a polished look, let’s customize the scrollbar.

::-webkit-scrollbar {
    width: 1.2px;
}

::-webkit-scrollbar-track {
    background: hsl(346, 66%, 91%);
}

::-webkit-scrollbar-thumb {
    background: hsl(347, 95%, 85%);
    border-radius: 50px;
}

::-webkit-scrollbar-thumb:hover {
    background: hsl(347, 80%, 65%);
}

These styles customize the scrollbar to match the aesthetic of our toggle switch.

Step 4: Creating the Heart Shape

Now, we will style the heart shape using the label and its pseudo-elements.

.love-heart,
.love-heart::after {
    border-color: hsl(231deg 28% 86%);
    border: 1px solid;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    width: 10px;
    height: 8px;
    border-bottom: 0;
}

This CSS creates the basic heart shape using border properties and pseudo-elements.

Step 5: Adding the Round Element

The round element adds animation to our heart toggle.

.round {
    position: absolute;
    z-index: 1;
    width: 8px;
    height: 8px;
    background: hsl(0deg 0% 100%);
    box-shadow: rgb(0 0 0 / 24%) 0px 0px 4px 0px;
    border-radius: 100%;
    left: 0px;
    bottom: -1px;
    transition: all .5s ease;
    animation: check-animation2 .5s forwards;
}

This element is styled to be round and to have an animation effect.

Step 6: Adding Keyframe Animations

We need keyframe animations to make the toggle switch interactive.

@keyframes check-animation {
    0% { transform: translate(0px, 0px); }
    50% { transform: translate(0px, 7px); }
    100% { transform: translate(7px, 7px); }
}

@keyframes check-animation2 {
    0% { transform: translate(7px, 7px); }
    50% { transform: translate(0px, 7px); }
    100% { transform: translate(0px, 0px); }
}

These animations will be triggered when the checkbox is toggled.

Step 7: Final Touches

Finally, we need to apply some finishing touches to complete the toggle switch.

.love-heart {
    box-sizing: border-box;
    position: relative;
    transform: rotate(-45deg) translate(-50%, -33px) scale(4);
    display: block;
    border-color: hsl(231deg 28% 86%);
    cursor: pointer;
}

input:checked+.love-heart,
input:checked+.love-heart::after,
input:checked+.love-heart .bottom {
    border-color: hsl(347deg 81% 61%);
    box-shadow: inset 6px -5px 0px 2px hsl(347deg 99% 72%);
}

These styles ensure that the heart shape changes color and adds a shadow when checked.

Conclusion

Creating an animated heart shape toggle switch is a fun and engaging way to enhance your web projects. By following these steps, you can create a unique and interactive element that adds a touch of creativity to your website. Don’t forget to download the full source code from the link provided and contact me if you have any questions!

Download the full source code here: Download Source Code

Contact me: Contact