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:hoverthat sets the background color to#C0D6DFand remove thebackground-colordeclaration from your.answer:activerule.
Make sure that the :hover rule comes before the :active rule so that the styles cascade correctly.