Just as with links, buttons should make use of hover states and the cursor: pointer
declaration. All the caveats about the shortcomings of hover states on mobile devices apply to buttons, but their use is still encouraged.
Users expect buttons to be clickable. Since buttons can consist of any number of total elements (rectangular/circular body, text, image(s)), all elements should be clickable, should display their clickability, and should result in the same behavior.
Instructions
Let’s make sure all the buttons have correct hover states. Currently, our answer:active
rules change both the background-color and the text color of the answer
class elements. Let’s split these up so that there are two stages of interaction.
- Create a new rule for
answer:hover
that sets the background color to#C0D6DF
and remove thebackground-color
declaration from your.answer:active
rule.
Make sure that the :hover
rule comes before the :active
rule so that the styles cascade correctly.