CSSmarkup~15 mins

Transition property in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Smooth Color Change with CSS Transition

📖 Scenario: You want to create a button on a webpage that changes its background color smoothly when a user moves the mouse over it. This makes the button look nicer and more interactive.

🎯 Goal: Build a simple webpage with a button that changes its background color smoothly using the CSS transition property when hovered.

📋 What You'll Learn

Create a button element in HTML with the text 'Hover me!'

Add CSS to style the button with a blue background and white text

Use the CSS transition property to smoothly change the background color over 0.5 seconds

Change the button's background color to green when hovered

💡 Why This Matters

🌍 Real World

Buttons with smooth hover effects are common on websites to make interactions feel polished and friendly.

💼 Career

Knowing how to use CSS transitions is important for front-end developers to create modern, user-friendly interfaces.

Progress0 / 4 steps

Create the HTML button

Write the HTML code to create a <button> element with the text Hover me! inside the <body> of the page.

CSS




    
    
    Button Transition

Need a hint?

Use the <button> tag inside the <body> and write the text exactly as Hover me!.

Add basic button styles

In the CSS file, write a rule for the button selector that sets the background color to blue, the text color to white, and adds some padding of 1rem 2rem.

CSS

button {
    /* Add background color, text color, and padding here */
}

Need a hint?

Use the CSS properties background-color, color, and padding inside the button selector.

Add the transition property

In the CSS button rule, add the transition property to smoothly change the background-color over 0.5s with an ease timing function.

CSS

button {
    background-color: blue;
    color: white;
    padding: 1rem 2rem;
    /* Add transition property here */
}

Need a hint?

The transition property should specify the property to animate (background-color), the duration (0.5s), and the timing function (ease).

Change background color on hover

Add a CSS rule for button:hover that changes the background-color to green so the color changes smoothly when the mouse is over the button.

CSS

button {
    background-color: blue;
    color: white;
    padding: 1rem 2rem;
    transition: background-color 0.5s ease;
}

/* Add hover style here */

Need a hint?

Use the button:hover selector and set background-color: green; inside it.