.action { background-color: #0f766e; } .action:hover { background-color: #115e59; }The colour becomes darker only while the button is hovered.
LESSON 81 OF 100
Show a button hover state
Provide visual feedback when a pointing device hovers the button.
STEP 1 · LEARN
How it works
The :hover pseudo-class selects an element under the pointer or one containing the pointed element. It is additional pointer feedback, not the only way to communicate an action.
.action { background-color: #115e59; }Changing the base rule does not describe an interactive state and applies permanently.
STEP 2 · APPLY
Your exercise
Keep the base background and set #115e59 only for .action:hover.
index.htmlCSS
Safe resultisolated
The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked
STEP 4 · CHECK
What needs to pass
0%not checked
- ○The button has the #0f766e base background.
- ○The hover state uses #115e59.
- ○The target element is present in the page.
Explain the solution logic
The base selector establishes the normal appearance, while the pseudo-class adds the difference only in the hovered state.