How to make Animated Click Effect using Tailwind CSS & JavaScript ?

Last Updated : 16 Apr, 2024

It refers to the technique of implementing animations that respond to user clicks, utilizing the Tailwind CSS for styling and layout, and JavaScript for adding dynamic behavior to the elements. This enhances user engagement and improves the overall user experience of the websites.

Table of Content

Using Tailwind Classes
Using Anime.js library

Using Tailwind Classes

Animation Class: Added Tailwind CSS utility class animate-bounce to the button element which creates a bouncing effect when clicked.
JavaScript: Utilized JavaScript to add and remove the animation class. The class is added on click, triggering the animation, and removed after 500ms, ensuring the animation only occurs once per click.

Example: The below code uses Tailwind classes with JavaScript to animate the button on click.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>
        How to Make Animated Click Effect using 
        Tailwind CSS and JavaScript
    </title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
</head>

<body class="flex justify-center 
    items-center h-screen bg-gray-100">

    <button id="animatedButton"
        class="bg-blue-500 hover:bg-blue-700 text-white 
            font-bold py-4 px-8 rounded transition-all 
            duration-300 transform hover:scale-105">
        Click Me
    </button>

    <script>
        const button = document.
            getElementById('animatedButton');
        button.addEventListener('click', () => {
            button.classList.add('animate-bounce');
            setTimeout(() => {
                button.classList.
                    remove('animate-bounce');
            }, 500);
        });
    </script>

</body>

</html>

Output:

fosiGIF

Using Anime.js library

JavaScript Animation Library: Included the Anime.js library via CDN to enable advanced animations.
Enhanced Animation: Expanded the animation by incorporating additional properties such as rotate. The button now rotates by 1 turn during the animation sequence.
Anime.js Configuration: Defined multiple scale values to create a more dynamic scaling effect. The button scales up to 1.2 times its original size smoothly over 400ms, then returns to its original size.

Example: The below code uses Anime.js library to animate the button on click.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>
        How to Make Animated Click Effect 
        using Tailwind CSS and JavaScript
    </title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
</head>

<body class="flex justify-center items-center 
    h-screen bg-gray-100">
    <button id="animatedButton"
        class="bg-blue-500 hover:bg-blue-700 text-white 
            font-bold py-4 px-8 rounded transition-all 
            duration-300 transform hover:scale-105">
        Click Me
    </button>

    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js">
    </script>
    <script>
        const button = document.
            getElementById('animatedButton');
        button.addEventListener('click', () => {
            anime({
                targets: button,
                scale: [
                    { 
                        value: 1, duration: 100, 
                        easing: 'easeInOutQuad' 
                    },
                    { 
                        value: 1.2, duration: 400, 
                        easing: 'easeInOutQuad' 
                    },
                    { 
                        value: 1, duration: 100, 
                        easing: 'easeInOutQuad' 
                    }
                ],
                rotate: {
                    value: '1turn',
                    easing: 'easeInOutSine'
                }
            });
        });
    </script>

</body>

</html>