3-column preview card component

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  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 have not declared background for button elements which needs to be change the background 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 the button elements during hover

  ---

  • Let's look an example

  button:hover {
    background-color: rgba(0,0,0,0);
    color: white;
    outline: 1px solid white;
  }
  

  ---

  • Now you have gotten the desired result without hassling in an efficient way.

  ---

  • Pro tip: you can use transparent value for background property to get the same effect as rgba(0,0,0,0) but using rgba 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

  1

  ---

  

  pkthunder87•250

  @pkthunder87Posted over 1 year ago

  @0xAbdulKhalid

  Hey, Abdul thanks for pointing that out. I did do the hover effect animation on the buttons but when reading the prompt for some reason I thought it said on active and NOT on hover. Just a silly mistake on my part. I've changed

  
      &:active {
        padding: 1.4rem 3.1rem;
        background-color: inherit;
        border: 2px solid var(--color-very-light-gray);
  
        & > * {
          color: var(--color-very-light-gray);
        }
      }
  

  the selector &:active to &:hover and it should all work now. Thanks for catching my mistake.

  0