0
0
CSSmarkup~30 mins

Active and focus states in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Active and Focus States Styling
📖 Scenario: You are creating a simple webpage with a button. You want the button to look different when a user clicks it (active state) and when the button is selected using the keyboard (focus state). This helps users know which element they are interacting with.
🎯 Goal: Build a webpage with a button that changes its background color when it is clicked (active state) and shows a visible outline when it is focused (focus state). This improves accessibility and user experience.
📋 What You'll Learn
Create a button element inside the HTML body.
Add CSS to style the button with a default background color.
Add CSS for the :active pseudo-class to change the button's background color when clicked.
Add CSS for the :focus pseudo-class to add a visible outline when the button is focused.
Ensure the focus outline is clearly visible for keyboard users.
💡 Why This Matters
🌍 Real World
Buttons with clear active and focus states help users understand when they are interacting with elements, especially for keyboard and assistive technology users.
💼 Career
Web developers must create accessible and user-friendly interfaces. Styling active and focus states is a fundamental skill for building interactive web pages.
Progress0 / 4 steps
1
Create the HTML button
Write the HTML code to create a <button> element with the text Click me inside the <body> of the document.
CSS
Need a hint?

Use the <button> tag inside the <body> and write the text Click me between the tags.

2
Add default button style
Add a <style> block inside the <head> and write CSS to set the button's background color to #4CAF50 and text color to white.
CSS
Need a hint?

Inside a <style> tag, select the button element and set background-color and color.

3
Add active state style
Inside the existing <style> block, add CSS for the button:active selector to change the background color to #3e8e41 when the button is clicked.
CSS
Need a hint?

Use the button:active selector and set background-color to #3e8e41.

4
Add focus state style
Inside the existing <style> block, add CSS for the button:focus selector to add a visible outline with 3px solid #ffbf47 and an outline offset of 3px when the button is focused.
CSS
Need a hint?

Use the button:focus selector and add outline and outline-offset properties.