Project 18: Registration Flow
CSS Stylist
Builds on these lessons
Step 1 of 3
Project
color-mix() for a Hover Shade
Set .btn-primary:hover { background-color: color-mix(in srgb, var(--brand-color) 85%, black); } — an automatically-computed darker shade of your brand color, mixed at the exact ratio you specify. No need to hand-pick and hardcode a second hex value that might drift out of sync with the original.
🎯 Your Task
Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!
:root {
--brand-color: #0ea5e9;
}
.btn-primary {
background-color: var(--brand-color);
color: white;
}
.btn-primary:hover {
background-color: color-mix(in srgb, var(--brand-color) 85%, black);
}