How to display button on hover over div in Tailwind CSS ?

Last Updated : 24 Jul, 2024

Tailwind CSS provides a huge number of CSS utility classes that allow you to quickly apply to style and easily construct custom designs. In this article, we’ll see how to display the button when hovering over the div in TailwindCSS.

Example 1: Create a <div> element and apply group and relative CSS classes to make it a parent element and to position it relative to the webpage. You may use the bg-gray-300, w-60, h-40, and m-3 classes to apply width, height, margin, and background color to it.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com">
    </script>
</head>

<body>
    <h1 class="text-green-800 m-3">
        GeeksforGeeks
    </h1>
    
    <h3 class="text-black-800 m-3">
        Displaying button when hovering 
        over div in TailwindCSS
    </h3>

    <div class="group relative bg-gray-300 w-60 h-40 m-3">
        <button class="invisible group-hover:visible 
            absolute pr-10 pl-10 pt-2 pb-2 mt-24 
            ml-4 bg-blue-500 text-white">
            Button
        </button>
    </div>
</body>

</html>

Output:

Example 2: Applying the transition properties/classes to make it more attractive. The transition transforms translate-y-8 ease-in-out classes will create a transition effect in which the button will go from bottom to top.