@0xabdulkhaliq
Posted
Hello there ๐. Congratulations on successfully completing the challenge! ๐
- I have other recommendations regarding your code that I believe will be of great interest to you.
CSS ๐จ:
- Looks like you declared each background color for each button which needs to be change the background color during the hover, actually we can handle that issue with a css color function named
rgba()
- The
rgba()
function define colors using the Red-green-blue-alpha (RGBA) model. RGBA color values are an extension of RGB color values with an alpha channel, which helps us to take control over the opacity of the color.
- So just add
rgba(0,0,0,0)
for thebutton
elements duringhover
- Let's look an example
button:hover {
background-color: rgba(0,0,0,0);
outline: 1px solid white;
color: white;
}
- Now you can remove these individual declarations for the background for each
button
element
.sedans-btn:hover {
background-color: var(--BRIGHT-ORANGE);
}
.suvs-btn:hover {
background-color: var(--DARK-CYAN);
}
.luxury-btn:hover {
background-color: var(--VERY-DARK-CYAN);
}
- Now you have gotten the desired result without hassling in an efficient way.
- Pro tip: you can use
transparent
value forbackground
property to get the same effect asrgba(0,0,0,0)
but usingrgba
provides more granular control over the color correction.
.
I hope you find this helpful ๐ Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@floatingPebble
Posted
@0xAbdulKhalid
Yeah, I'm pissed that I didn't do that in the first place, since I often use hsla(), and sometimes transparent value. I tried setting the color with it and remembered that button's bg color is active so I just dropped it without thinking of adding it to :hover state. :sigh:
Thanks, Abdul!