Buttons: Hover States

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

1. 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 the background-color declaration from your .answer:active rule.

Make sure that the :hover rule comes before the :active rule so that the styles cascade correctly.