Summary - Button variations
Build button variations with gradients.
Three gradients, one place
In this group you learned three gradient functions: linear-gradient(), radial-gradient(), and conic-gradient(). Each draws a different blend: along a line, from center outward, around center by angle.
You can give color stops percentage positions, drop a gradient hint between two stops, and layer two gradients with a comma. Now you will combine all of this in button variations.
Exercise First button: linear gradient
Define a background for the .btn-primary selector. The value must be linear-gradient(to bottom, teal, navy). The same block must also declare color: white and padding: 0.75rem 1.5rem. Include only these three declarations.
Show example solution
/* first button: linear gradient */
.btn-primary {
background: linear-gradient(to bottom, teal, navy);
color: white;
padding: 0.75rem 1.5rem;
}Exercise Second button: layered gradient
Define a two-layer background for the .btn-glow selector. The first layer is radial-gradient(circle at top, rgba(255,255,255,0.5), transparent 60%), the second is linear-gradient(to bottom, teal, navy). The same block must also declare color: white. Write a single comma-separated background declaration.
Show example solution
/* second button: layered gradient */
.btn-glow {
background: radial-gradient(circle at top, rgba(255,255,255,0.5), transparent 60%), linear-gradient(to bottom, teal, navy);
color: white;
}Test yourself
-
Which suits a top-to-bottom color blend on a button?
- conic-gradient(from 0deg, navy, teal)
- radial-gradient(circle, navy, teal)
- linear-gradient(to bottom, navy, teal)
- linear-gradient(to right, navy, teal)
Show answer
linear-gradient(to bottom, navy, teal) — Correct. to bottom gives a vertical, top-to-bottom blend.
-
Complete the linear gradient
background: linear-gradient(to right, ____);Show answer
background: linear-gradient(to right, navy, teal);