Using the transition property

We can choose which properties to transition, the duration of the transition, and the timing function of the transition. All three properties can be listed out separately as transition-property, transition-duration, and transition-timing-function; however, using the shorthand seems to be the easiest way. So we'll type in transition as a new property in the .button rule set and use .25s, or a quarter of a second. And we'll specify all for which properties we'll be transitioning. We'll use a linear timing function:

.button {  border: 2px solid #333;  color: #333;  padding: 10px 0;  display: block;  text-align: center;  font-weight: bold;  letter-spacing: 1.5px;  font-family: Arial, Helvetica, sans-serif;  transition: .25s ...

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.