All comments

• 

  Anh•60

  @anhnguynSubmitted about 3 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

  10
  

  Lucas Avendaño•90

  @LucasAvenPosted about 3 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*/
  

  2. 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);
  }
  

  3. 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