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.
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 the
background-colordeclaration from your
Make sure that the
:hover rule comes before the
:active rule so that the styles cascade correctly.