/* The switch - the box around the slider */
.comment-react {
  margin: 0;
  display: flex;
  justify-content: center;
  padding: 5px;
  background-color: #f1f1f1;
  border-radius: 5px;
  scale: 1.5;
  width: 100px;
}

.comment-react button {
  width: 35px;
  height: 35px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 0;
  outline: none;
}

.comment-react button:after {
  content: "";
  width: 40px;
  height: 40px;
  position: absolute;
  left: -3px;
  top: -3px;
  background: linear-gradient(to bottom right, #3598f5, blue);
  border-radius: 50%;
  z-index: 0;
  transform: scale(0);
  filter: blur(10px);
}

.comment-react button svg {
  position: relative;
  z-index: 9;
}

.comment-react button:hover:after {
  animation: ripple 0.6s ease-in-out infinite;
}

.comment-react button:hover svg {
  animation: ripple2 1s ease-in-out infinite;
  fill: #f5356e;
}

.comment-react button:hover svg path {
  stroke: #f5356e;
  fill: #f5356e;
}

.comment-react hr {
  width: 80%;
  height: 1px;
  background-color: #dfe1e6;
  margin: auto;
  border: 0;
}

.comment-react span {
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  font-size: 20px;
  font-weight: 600;
  color: #707277;
  padding-right: 10px;
  text-align: center;
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }

100% {
    transform: scale(1.3);
    opacity: 0.3;
  }
}

@keyframes ripple2 {
  0% {
    transform: scale(0);
    opacity: 1;
  }

100% {
    transform: scale(1.6);
    opacity: 1;
  }
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Heart React Animation Button Using HTML & CSS

Adding small interactive UI elements can significantly enhance user engagement on websites. In this post, you’ll learn how to create a heart reaction button, similar to those used on social media platforms like Facebook and Instagram. This design includes a ripple hover effect and a like counter, all built with just HTML and CSS — no JavaScript required.

What Does This Component Do?

This button acts as a reaction or like feature. When users hover over the heart icon, a ripple animation plays in the background, and the icon changes color to pink — indicating interaction. Alongside the heart icon, a number (like count) is shown to reflect total reactions.

This is ideal for use in:

Blog post comment sections
Product reviews
Social content platforms
Forums or community websites

How the Heart Reaction Button Works

1. Flexbox Layout and Styling

The entire component is styled using a flex container:

Centers the heart icon and count
Adds padding and a soft gray background
Scales up to make the interaction visually appealing

The .comment-react class wraps both the button and the count, giving it a compact and modern design.

2. SVG Icon with Hover Effects

The heart icon is an SVG graphic. On hover, the following happens:

A blurred ripple animation appears behind the heart
The heart fills with pink (#f5356e)
Both the fill and stroke colors of the SVG path update smoothly

This visual feedback is subtle yet effective in making users feel like their interaction has been registered.

3. CSS-Only Ripple Animation

There are two key animations:

ripple: Creates a background pulse effect that expands outward
ripple2: Slightly enlarges the heart for a soft bounce

These are triggered when the user hovers over the button, giving it a dynamic and modern feel.

Why Use This UI Element?

User-Friendly: Easy to understand and visually attractive
No JavaScript Needed: Lightweight and efficient
Customizable: You can easily change colors, icons, or animation speed
Responsive: Scales well on mobile and desktop

Practice This Effect Live

If you’re using the Learn Code Online Free Of Cost tool on your website, you can:

Edit the HTML and CSS live
Replace the heart SVG with other icons (e.g., thumbs up, star, etc.)
Change the count manually to simulate real feedback
Understand how pseudo-elements and keyframes work together

Conclusion

This heart reaction animation button is a great example of how CSS can be used to build interactive UI components without writing JavaScript. It looks professional, enhances user interaction, and is completely customizable. Whether you’re adding likes to a blog post or reactions to a comment section, this effect fits right in

This code uses HTML and CSS only — no JavaScript included.

MIT License

Permission is freely granted to anyone who obtains a copy of this software and its accompanying documentation files (referred to as “the Software”), allowing them to use, copy, modify, merge, publish, distribute, sublicense, and even sell copies of the Software. Additionally, users are allowed to permit others to use the Software under these same terms.

It is required that the above copyright notices and this permission notice be included in all versions or significant portions of the Software.

Please note, the Software is provided “as is”, without any form of warranty—express or implied. This includes, but is not limited to, warranties of merchantability, fitness for a specific purpose, or non-infringement. Under no circumstances shall the original authors or rights holders be held responsible for any claims, damages, or other liabilities that may arise from the use of the Software, whether through legal action, negligence, or otherwise.

All code on Freeofcosts.com is reviewed before publishing. Each post includes a live code editor with real-time preview, so you can experiment and learn by doing. Most code is open-source and free to use or modify under respective licenses.