Design comparison
Solution retrospective
I learnt that a nice way to get the button text colors to match different background colors is to set color: black; and mix-blend-mode: screen;.
About blend-mode from MDN website:
screen
The final color is the result of inverting the colors, multiplying them, and inverting that value. A black layer leads to no change, and a white layer leads to a white final layer. The effect is like two images shone onto a projection screen.
Community feedback
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord