All comments

• 

  Anh• 40

  @anhnguyn

  Submitted over 2 years ago

  I am still figuring out how to make the text color of the buttons (click/hover state) inherit the background-color of the parent div, so that I don't have to create CSS for three buttons. Any help and feedback is appreciated!

  

  3 column preview using Bootstrap

  1

  1

  0

  

  Lucas Avendaño• 90

  @LucasAven

  Posted over 2 years ago

  Hi! I'm still learning the basics, so I don't know if this way is the best one but at least it works :P

  1. store the background colors of each card in a variable. ie:

  --background-color: hsl(31, 77%, 52%); /*it's important to write -- before the variable*/
  background-color: var(--background-color); /*then apply it to each card*/
  

  1. use the variable --background-color inside of inside the class attached to your button(if you didn't create one use button{ } instead) to change its text color (to use it you must write it inside var(variable)). ie:

  button {
  color: var(--background-color);
  }
  

  1. last you only have to change the color back to hsl(0, 0%, 95%) when is active.

  button:active {
  color: hsl(0, 0%, 95%);
  }
  

  hope it helps!

  1