0
0
CSSmarkup~15 mins

Hover state in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Create a Hover Effect on a Button
📖 Scenario: You are designing a simple webpage with a button that changes color when a user moves their mouse over it. This helps users know the button is clickable.
🎯 Goal: Build a button with a hover effect that changes its background color smoothly when hovered over.
📋 What You'll Learn
Create a button element with the text 'Click Me!'
Add a CSS rule to style the button with a blue background and white text
Add a CSS hover state that changes the button background to green
Include a smooth transition effect for the background color change
💡 Why This Matters
🌍 Real World
Buttons with hover effects are common on websites to show interactivity and improve user experience.
💼 Career
Knowing how to style hover states is essential for front-end web developers to create engaging and accessible user interfaces.
Progress0 / 4 steps
1
Create the button element
Write the HTML code to create a <button> element with the text Click Me! inside the <body>.
CSS
Need a hint?
Use the
2
Add basic button styles
Inside the <head>, add a <style> block. Write CSS to style the button with a blue background color #007BFF, white text color, some padding 1rem 2rem, and no border.
CSS
Need a hint?
Use the CSS selector 'button' and set the background-color, color, padding, and border properties as described.
3
Add the hover state to change background color
In the same <style> block, add a CSS rule for button:hover that changes the background color to green #28a745.
CSS
Need a hint?
Use the CSS selector 'button:hover' and set the background-color property to #28a745.
4
Add a smooth transition effect
In the button CSS rule, add a transition property to smoothly change the background color over 0.3 seconds.
CSS
Need a hint?
Add 'transition: background-color 0.3s ease;' inside the button CSS rule to animate the color change.