Creating a hover state

At the moment, the buttons on our site are ghost buttons. They have no background color, a dark gray border, or dark gray text, as you can see in the following screenshot:

We want to create a button that will have a dark gray background color and will show text in white when hovered. So let's knock this out using the :hover pseudo class. Under the first existing .button rule set, add a new selector called .button:hover. Add background-color: #333 and add the color of the text as white:

/****************Buttons****************/.button { border: 2px solid #333; color: #333; padding: 10px 0; display: block; font-family: ...

Get Mastering CSS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.