CSS Project: Crafting a Pure CSS Animated Custom Animated Interactive ‘Like’ Button

Written by

FixTechToday

in

In the digital landscape, user engagement is king. Websites and applications thrive on interactions, and one of the most fundamental interactions is the ‘like’ or ‘favorite’ action. While seemingly simple, a well-designed ‘like’ button can significantly enhance user experience, providing visual feedback and encouraging participation. In this article, we’ll embark on a journey to create a pure CSS animated, custom, and interactive ‘like’ button. This project is perfect for beginners and intermediate CSS enthusiasts looking to sharpen their skills and understand the power of CSS animations and transitions.

Why Build a Custom ‘Like’ Button?

While frameworks and libraries offer pre-built components, crafting your own ‘like’ button offers several advantages:

  • Complete Customization: You have full control over the button’s appearance, animation, and behavior, allowing it to seamlessly integrate with your website’s design.
  • Learning Opportunity: Building from scratch provides invaluable experience in CSS fundamentals, including selectors, properties, transitions, and animations.
  • Performance Optimization: Pure CSS solutions are lightweight and generally render faster than JavaScript-based alternatives, leading to a smoother user experience.
  • Avoiding Dependencies: Eliminating external dependencies reduces the risk of conflicts and improves the overall maintainability of your project.

Project Overview: The Animated ‘Like’ Button

Our goal is to create a ‘like’ button that:

  • Visually changes state when clicked (e.g., from an outline to a filled heart).
  • Features a subtle animation to provide feedback to the user.
  • Responds to hover and click events.
  • Is fully responsive and works well on various screen sizes.

Step-by-Step Guide

1. HTML Structure

Let’s start with the HTML. We’ll use a simple structure:

<button class="like-button">
    <span class="heart"></span>
    <span class="like-count">0</span>
</button>

Here’s a breakdown:

  • <button class="like-button">: The main button element. We use a button for accessibility reasons, as it inherently provides keyboard navigation and semantic meaning.
  • <span class="heart"></span>: This span will hold our heart icon. Initially, it will be an outline heart.
  • <span class="like-count">0</span>: This span displays the number of likes.

2. Basic CSS Styling

Now, let’s add some basic CSS to style the button and its elements. Create a new CSS file (e.g., style.css) and link it to your HTML file.

.like-button {
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 50px;
    padding: 10px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.like-button:hover {
    background-color: #f0f0f0;
}

.heart {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    /*  We'll style the heart icon later using pseudo-elements */
}

.like-count {
    font-family: sans-serif;
    font-size: 14px;
    color: #333;
}

Key points:

  • We set a background color, border, and rounded corners for the button.
  • The cursor: pointer; property indicates that the button is clickable.
  • We use display: flex; and align-items: center; to center the heart icon and the like count horizontally.
  • A simple hover effect changes the background color.
  • We’ve added basic styling to the heart and like-count spans.

3. Creating the Heart Icon with CSS Pseudo-elements

Instead of using an image or an SVG for the heart icon, we’ll create it using CSS pseudo-elements (::before and ::after). This technique is incredibly versatile and allows us to create complex shapes with minimal markup.

.heart {
    position: relative;
}

.heart::before, .heart::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 16px;
    background-color: #ccc;
    border-radius: 5px 5px 0 0;
    transform: rotate(45deg);
    transform-origin: bottom left;
}

.heart::before {
    left: 5px;
    bottom: 0;
}

.heart::after {
    left: 0;
    bottom: 0;
    transform: rotate(-45deg);
}

Let’s break down this code:

  • We set position: relative; on the .heart element to allow the pseudo-elements to be positioned relative to it.
  • ::before and ::after create two pseudo-elements.
  • content: ""; is required for pseudo-elements to render.
  • We set the width, height, background color, and border-radius for each pseudo-element.
  • transform: rotate(45deg); and transform: rotate(-45deg); rotate the pseudo-elements to create the heart shape.
  • transform-origin: bottom left; sets the origin of the rotation.
  • We position the pseudo-elements to create the final heart shape.

4. Adding the ‘Liked’ State

Now, let’s add the functionality to change the heart’s appearance when the button is clicked. We’ll use a class named .liked to indicate the ‘liked’ state.

.like-button.liked {
    background-color: #e74c3c;
    border-color: #c0392b;
}

.like-button.liked .heart::before, .like-button.liked .heart::after {
    background-color: #e74c3c;
}

In this code:

  • When the .like-button has the .liked class, the background and border colors change to a red color.
  • The background color of the heart’s pseudo-elements also changes to red, filling the heart.

5. Implementing the Animation

To make the button more engaging, we’ll add a simple animation when the button is clicked. We’ll use CSS transitions to smoothly change the heart’s scale and the button’s background color.

.like-button {
    transition: all 0.3s ease;
}

.like-button .heart {
    transition: transform 0.3s ease;
}

.like-button.liked .heart {
    transform: scale(1.2);
}

Here’s how the animation works:

  • We’ve already set transition: all 0.3s ease; on the .like-button for hover effects. Now we add it to the heart element too.
  • When the .liked class is added, the transform: scale(1.2); property slightly enlarges the heart icon.
  • The transition property ensures that the scaling happens smoothly over 0.3 seconds.

6. Adding the Click Functionality with JavaScript

Finally, we need to add JavaScript to toggle the .liked class and update the like count. Add the following JavaScript code to your HTML file, either in a <script> tag within the <body> or in a separate JavaScript file linked to your HTML.


const likeButton = document.querySelector('.like-button');
const likeCount = document.querySelector('.like-count');
let isLiked = false;
let count = 0;

likeButton.addEventListener('click', () => {
    isLiked = !isLiked;
    if (isLiked) {
        count++;
        likeButton.classList.add('liked');
    } else {
        count--;
        likeButton.classList.remove('liked');
    }
    likeCount.textContent = count;
});

Let’s go through the JavaScript code:

  • We select the like button and the like count element using document.querySelector().
  • We initialize a boolean variable isLiked to false and a counter variable count to 0.
  • We add a click event listener to the like button.
  • Inside the event listener:
    • We toggle the isLiked variable.
    • If isLiked is true (the button is liked), we increment the count and add the .liked class to the button.
    • Otherwise, we decrement the count and remove the .liked class.
    • Finally, we update the like count display.

7. Enhancements and Advanced Features

This is a basic implementation, and you can add many more features to enhance the user experience:

  • Animation variations: Experiment with different animation effects, such as a pulse animation, a bounce effect, or a scale-up animation with a slight delay.
  • Accessibility: Ensure the button is accessible to all users by adding ARIA attributes (e.g., aria-label, aria-pressed) and providing proper keyboard navigation.
  • Local Storage: Use local storage to persist the ‘liked’ state across page reloads. This can be achieved by checking if the button was previously liked when the page loads.
  • Server-Side Integration: In a real-world scenario, you would send a request to your server to update the like count in your database. You could use AJAX or fetch API to handle this.
  • Error Handling: Implement error handling to gracefully handle potential issues, such as failed API requests.
  • Loading State: Add a loading state (e.g., a spinner) while the like action is being processed.

8. Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect CSS Selectors: Double-check that your CSS selectors accurately target the HTML elements. Use your browser’s developer tools to inspect the elements and verify the applied styles.
  • Animation Not Working: Ensure that you have the transition property set on the elements you want to animate. Also, make sure that the CSS properties you’re animating are valid.
  • JavaScript Errors: Check the browser’s console for JavaScript errors. Common issues include incorrect variable names, missing semicolons, or typos in the code.
  • Class Name Conflicts: Make sure your CSS class names don’t conflict with any existing styles on your website.
  • Specificity Issues: If your styles aren’t being applied, check the CSS specificity. You might need to adjust your selectors to increase their specificity.

9. Optimizing for Performance

While pure CSS is generally performant, here are a few tips to optimize your code further:

  • Minimize CSS: Use a CSS minifier to reduce the size of your CSS file.
  • Avoid Unnecessary Animations: Keep animations simple and avoid complex effects that might impact performance on low-powered devices.
  • Use Hardware Acceleration: For animations, consider using properties that trigger hardware acceleration (e.g., transform, opacity) to improve rendering performance.
  • Defer Loading: If possible, defer the loading of your CSS file until after the initial page load to improve perceived performance.

Summary / Key Takeaways

We’ve successfully created a fully functional, animated, and interactive ‘like’ button using pure CSS and JavaScript. We’ve learned how to structure the HTML, style the button with CSS, create the heart icon using pseudo-elements, implement animations, and add click functionality with JavaScript. This project provides a solid foundation for understanding CSS animations, transitions, and the power of custom UI components. Remember to experiment with different animations, styles, and features to create a ‘like’ button that perfectly fits your website’s design and enhances user engagement. By following this guide, you’ve not only built a practical component but also deepened your understanding of fundamental web development principles. This project is a testament to the fact that you can achieve impressive results with a little creativity and a solid grasp of CSS and JavaScript fundamentals. This approach promotes a deeper understanding of web technologies, allowing developers to create engaging and performant user interfaces.

More posts