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 >
</ 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" >
</ 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 >
|
Output:
Share your thoughts in the comments
Please Login to comment...