Summary - Hover effects
Build hover-effect buttons with transition properties.
Summary: Hover effects
In this summary we bring four transition declarations together: transition-property (which property), transition-duration (how long), transition-timing-function (the curve) and transition-delay (the wait). Together they build a hover-effect button.
You can list them one by one or use the transition shorthand. This lesson lets you try both; practicing longhand and shorthand side by side makes them stick.
Four declarations together
A hover-effect button uses all four declarations together. transition-property: background-color picks the color; transition-duration: 0.25s sets the time; transition-timing-function: ease-in-out sets the curve; transition-delay: 0.1s adds a slight delay.
The same effect fits in one line: transition: background-color 0.25s ease-in-out 0.1s. Pick whichever feels more readable.
Exercise Build the button with four declarations
Add four transition declarations to the .btn rule: transition-property: background-color, transition-duration: 0.25s, transition-timing-function: ease-in-out and transition-delay: 0.1s. Then set background-color: #1d4ed8 for .btn:hover.
Show example solution
.btn {
background-color: #2563eb;
color: #ffffff;
padding: 0.6rem 1.2rem;
border: none;
border-radius: 0.5rem;
transition-property: background-color;
transition-duration: 0.25s;
transition-timing-function: ease-in-out;
transition-delay: 0.1s;
}
.btn:hover {
background-color: #1d4ed8;
}Exercise Build the card transition with the shorthand
Add transition: background-color 0.3s ease 0.1s as a shorthand to the .card rule. Then set background-color: #f3f4f6 for .card:hover. This packs four declarations into one line.
Show example solution
.card {
background-color: #ffffff;
padding: 1.5rem;
border-radius: 0.75rem;
transition: background-color 0.3s ease 0.1s;
}
.card:hover {
background-color: #f3f4f6;
}Test yourself
-
A button color should change smoothly on hover. Which declaration does it?
/* ? */ .btn:hover { background-color: navy; }- animation: background-color 0.3s
- transform: background-color
- transition: background-color 0.3s
- background-color: transition 0.3s
Show answer
transition: background-color 0.3s — Correct. The transition declaration smooths the color value on hover.
-
Which property should transition?
.btn { transition-property: ____; transition-duration: 0.25s; }Show answer
.btn { transition-property: background-color; transition-duration: 0.25s; }