Duration and timing curves in Tailwind - Mini Project: Build & Apply

Animating a Button with Duration and Timing Curves in Tailwind CSS

📖 Scenario: You want to create a button on a webpage that smoothly changes color when you hover over it. This makes the button feel lively and interactive, just like a real button you press.

🎯 Goal: Build a simple webpage with a button that changes its background color smoothly on hover using Tailwind CSS. You will control how long the color change takes and how the speed of the change feels over time.

📋 What You'll Learn

Use Tailwind CSS classes to style the button

Set the animation duration to 700 milliseconds

Use the 'ease-in-out' timing curve for smooth start and end

Add a hover effect that changes the button background color

Ensure the button is accessible with a clear label

💡 Why This Matters

🌍 Real World

Buttons with smooth hover animations improve user experience on websites by giving clear visual feedback.

💼 Career

Web developers often use Tailwind CSS to quickly style interactive elements with consistent animations and timing controls.

1

Create the HTML button element

Write an HTML <button> element with the text Click Me inside a <main> section. Give the button the Tailwind classes bg-blue-500 for background color, text-white for text color, px-6 for horizontal padding, and py-3 for vertical padding.

Tailwind

Need a hint?

Use a <button> tag inside <main>. Add the exact Tailwind classes for color and padding.

2

Add hover background color change

Add the Tailwind class hover:bg-blue-700 to the existing button to change its background color to a darker blue when hovered.

Tailwind

   
    Click Me
  

Need a hint?

Add the hover class exactly as hover:bg-blue-700 inside the button's class attribute.

3

Set the animation duration to 700ms

Add the Tailwind class duration-700 to the button to make the background color change take 700 milliseconds.

Tailwind

   
    Click Me
  

Need a hint?

Use the class duration-700 to set the animation time to 700ms.

4

Add the ease-in-out timing curve

Add the Tailwind class ease-in-out to the button to make the color change start slow, speed up, then slow down smoothly.

Tailwind

   
    Click Me
  

Need a hint?

Add the class ease-in-out to control the speed curve of the animation.