Mastering CSS

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