A question regarding the background-color of my submit button

HTML-CSS
1

Hello guys,
first of all I wanna say “hi” and hope my question is not too trivial or people get mad at me :sweat_smile:
I spent almost an hour on trying to figure it out myself, but with no success …

So here is my question:
I am currently doing the 2nd challenge from the Responsive Web Design Project: The Survey Form. At the very end I added a submit button and wanted to style its background-color with the same color I used for the body. But the button has a darker shade than the body’s background. Why is that so? I used an RGBA value for both and I inspected the button with chrome dev tools and saw that some style is applied by the browser, but I couldn’t figure out how to solve it.
Help would be much appreciated. Thanks! :upside_down_face:

Link to the Survey Form on CodePen

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.85 Safari/537.36.

Challenge: Build a Survey Form

Link to the challenge:

2

Because you are using opacity to lighten the button color and thus the background color of the form bleeds through to the button, making it darker, while the default background color of the body is white, so there is no additional color.

3

That totally makes sense but I would never have thought of it !
Thanks for helping me!

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.