Animated Like Button with Toggle Effect Using HTML and CSS

Adding a “Like” button is one of the most engaging features for any blog, website, or portfolio. In this post, we’ll show you how to create an interactive like toggle button using only HTML and CSS, inspired by modern UI/UX principles.

This stylish heart button includes a click-to-toggle animation, background pattern, and a subtle wiggle effect when activated. All of it is done without any JavaScript — proving just how powerful CSS has become for interaction design.

Features of This Like Button

Toggle Between Liked and Unliked States
Heart Icon with Wiggle Animation
Pure CSS Interaction – No JavaScript Needed
Custom Background with Subtle Dot Pattern
Clean and Responsive Design

How It Works

1. Structure

• A hidden checkbox (input[type="checkbox"]) is used as the toggle mechanism.

• Two heart SVG icons are used:

  • Inactive (white heart)

  • Active (red heart)

• When clicked, the active heart appears with a wiggle animation.

2. Background Styling

• The container uses a dot-grid pattern created with linear-gradient() to give it texture.

• Shadows and rounded borders enhance the modern feel.

3. Toggle Logic

• When the checkbox is unchecked, the white heart (.icon.inactive) is visible.

• When the checkbox is checked, the red heart (.icon.active) is shown, replacing the white one with a CSS animation.

Benefits of Using This Button Design

• No JavaScript Dependencies
  Ideal for performance-focused web apps or portfolios.

• Interactive Without Extra Code
  The toggle is smooth and intuitive for users.

• Fully Customizable
  You can easily change the color scheme, background, or icons.

• Visually Engaging
  The wiggle animation on like action adds personality and feedback.

Where to Use This Button

This like button works great for:

• Blog comment likes

• Product wishlists

• Portfolio or photo appreciation

• Any interactive element requiring positive feedback

Improve User Engagement with Simple Interactions

Small visual interactions, like this heart toggle button, help users feel connected and appreciated on your website. With pure HTML and CSS, you can create professional UI elements that look and feel dynamic.

This button also performs well on mobile and desktop devices, thanks to its clean structure and responsive styling.

Try It On Your Site

To use this effect:

• Copy the HTML and CSS code provided above.

• Customize the icons, colors, or background to match your website theme.

• Place the code in any section where you want users to interact with your content.

Final Thought:
You don’t need complex JavaScript to create great user experiences. With this CSS-only Like button, you can improve your website’s UI while keeping your codebase lean and efficient.