button {
  background-color: #fff;
  position: relative;
  list-style: none;
  width: 60px;
  height: 60px;
  border-radius: 60px;
  cursor: pointer;
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.5s;
  border: none;
}

button:active {
  scale: 1.2;
}

button:hover {
  width: 180px;
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0);
}

button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50px;
  background: linear-gradient(45deg, var(--i), var(--j));
  opacity: 0;
  transition: 0.5s;
}

button:hover::before {
  opacity: 1;
}

button::after {
  content: '';
  position: absolute;
  top: 10px;
  width: 100%;
  height: 100%;
  border-radius: 60px;
  background: linear-gradient(45deg, var(--i), var(--j));
  filter: blur(15px);
  transition: 0.5s;
  z-index: -1;
  opacity: 0;
}

button:hover::after {
  opacity: 0.5;
}

button svg {
  color: #777;
  width: auto;
  height: 30px;
  transition: 0.5s;
  transition-delay: 0.25s;
}

button:hover svg {
  transform: scale(0);
  color: #fff;
  transition-delay: 0s;
}

button span {
  position: absolute;
}

button .title {
  color: #fff;
  font-size: 1.3em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transform: scale(0);
  transition: 0.5s;
  transition-delay: 0s;
  font-weight: 600;
}

button:hover .title {
  transform: scale(1);
  transition-delay: 0.25s;
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Animated Heart Button with Hover Expansion Using HTML & CSS

Creative buttons can add a lot of personality to a website, especially when they combine visual effects with subtle animations. In this tutorial, we’ll explore how to create an animated heart button that expands on hover and reveals a message — all with HTML and CSS.

This stylish button can be used for likes, favorites, or call-to-actions that need a touch of flair.

How This Button Works

The button starts off as a small, circular heart icon. But when you hover over it:

The button expands horizontally.
A smooth gradient glow appears behind it.
The heart icon shrinks and fades, making room for the message.
A bold, uppercase message like “I LOVE IT” fades in with a slick animation.

It’s a minimal yet powerful UI enhancement that makes user interaction feel more dynamic and intentional.

Key Features

Here’s a breakdown of the effects and styling:

1. Gradient Background Animation

Two CSS variables (--i and --j) control the gradient colors. When the button is hovered, a linear gradient background appears through the ::before and ::after pseudo-elements.

::before adds a colorful layer.
::after creates a soft blurred glow effect around the button.

2. Smooth Shape Expansion

Initially, the button is 60px round, centered with a heart icon. On hover:

The width expands to 180px.
The rounded edges remain intact using border-radius.

3. Icon Disappears, Text Appears

The heart icon fades out and scales down smoothly.
The text label “I LOVE IT” scales up into view with a delay.
This transition makes the button feel alive and responsive.

4. Click Feedback

When clicked, the button briefly scales up, giving a nice feedback effect.

Use Cases for This Button

This heart animation button works well in situations like:

Like/Favorite buttons in blogs or e-commerce product listings
Feedback or support sections
Wishlist features
Portfolio sites to mark featured projects

Why This Button Is Effective

Visually Engaging: Combines movement, color, and shape-shifting for a delightful user experience.
Interactive Design: Uses hover and active states effectively.
Accessible Styling: All built with semantic HTML and clean CSS — no JavaScript required.
Customizable: You can easily replace the icon, colors, or message to suit your brand.

Final Thoughts

This heart hover animation button demonstrates how pure CSS can elevate your user interface with minimal code. It blends animation, gradients, and transitions into a polished component you can reuse across different parts of your website.

Whether you’re adding it to a blog, portfolio, or store, this button will catch eyes and encourage clicks — all while keeping your code lightweight and responsive.

Want more effects like this? Keep following for more CSS UI tutorials!

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.