Tailwindmarkup~15 mins

Hover variant in Tailwind - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Create a Button with Hover Color Change Using Tailwind CSS

📖 Scenario: You are building a simple webpage with a button. You want the button to change its background color when someone moves their mouse over it. This makes the button feel interactive and friendly.

🎯 Goal: Create a button that has a blue background normally and changes to green when hovered over using Tailwind CSS hover variant.

📋 What You'll Learn

Use a <button> element with Tailwind CSS classes

Set the button's normal background color to blue using Tailwind

Use the Tailwind hover: variant to change the background color to green on mouse hover

Include accessible text inside the button

Use semantic HTML and ensure the button is keyboard accessible

💡 Why This Matters

🌍 Real World

Buttons that change color on hover are common on websites to show interactivity and improve user experience.

💼 Career

Knowing how to use Tailwind CSS hover variants helps you build modern, accessible, and visually appealing user interfaces quickly.

Progress0 / 4 steps

Create the basic HTML button

Write a <button> element with the text Click me inside the <body> of an HTML5 document. Include the basic HTML skeleton with <!DOCTYPE html>, <html lang="en">, <head> with charset and viewport meta tags, and an empty <body> where you place the button.

Tailwind




  
  
  Button Hover

Need a hint?

Start by writing the full HTML5 page structure and add a button inside the body with the text 'Click me'.

Add Tailwind CSS link

Add the Tailwind CSS CDN link inside the <head> section to enable Tailwind styles. Use the official Tailwind CDN link: <script src="https://cdn.tailwindcss.com"></script>.

Tailwind




  
  
  Button Hover
  


  Click me

Need a hint?

Paste the Tailwind CDN script tag inside the head section to load Tailwind styles.

Add normal and hover background colors using Tailwind classes

Add Tailwind CSS classes to the <button> to set its normal background color to blue using bg-blue-500 and change the background color to green on hover using hover:bg-green-500. Also add text-white for white text and px-4 py-2 rounded for padding and rounded corners.

Tailwind




  
  
  Button Hover
  


  
  Click me

Need a hint?

Use the exact Tailwind classes: bg-blue-500 hover:bg-green-500 text-white px-4 py-2 rounded on the button.

Add accessible focus outline and center the button

Add the Tailwind class focus:outline-none focus:ring-2 focus:ring-green-400 to the button for a visible focus ring when using keyboard navigation. Also wrap the button in a <main> element with Tailwind classes flex justify-center items-center min-h-screen to center it vertically and horizontally on the page.

Tailwind




  
  
  Button Hover
  


  
  
    Click me

Need a hint?

Wrap the button inside a <main> with flex and centering classes. Add focus ring classes to the button for accessibility.