Essential storage keeps sign-in and learning features working. Google Analytics measures visits; Microsoft Clarity records interactions to help us improve usability. Both are optional and stay off until you choose. Read our privacy policy.
Style a primary button with clear hover, active, disabled, and keyboard focus states without relying on color alone.
Write down the input contract and the failure cases before coding.
Ready to run the file open above.
Each state has a distinct purpose: hover confirms pointer affordance, active gives immediate press feedback, focus-visible supports keyboard navigation, and disabled communicates unavailable action without silently hiding it.
your-solution.css.solution.css only after a real attempt.This beginner CSS exercise focuses on Pseudo-classes, Focus indicators, Accessible controls. Its requirements define the exact behavior to implement before you write code.
Open your-solution.css and select Run code. The CSS is applied to a sandboxed preview, the same way course CSS blocks run.
Attempt Build a keyboard-friendly button first. Then open the read-only solution file to compare the contract, edge-case handling, and implementation choices—not simply to copy the final code.