Transitions

Understanding CSS specificity and how selectors overrule each other can alleviate a lot of frustration when using CSS. Now that we've got a better understanding of this, let's get back to our project and finish styling the buttons we have been working on. A button is incomplete unless it has a slick hover state with a smooth transition. We'll start this section by creating a hover state using the pseudo selector :hover. Then, we'll smooth it out with a transition before finally discussing when vendor prefixes are necessary.

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...