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

Last Updated : 10 Mar, 2023

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.

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="transition transform  
            translate-y-8 ease-in-out invisible  
            absolute group-hover:visible pr-10  
            pl-10 pt-2 pb-2 mt-24 ml-4 bg-blue-500  
            text-white group-hover:translate-y-0"> 
            Button 
        </button> 
    </div> 
</body> 
  
</html>