Responsive Single Price Grid Component with hover effect using CSS

Community feedback

• 

  Carlos Jovel•30

  @iwannabaaPosted over 3 years ago

  I would use transform: scale() instead of changing the padding in the button on hover. Same spirit as the comment above.

  2

  ---

  

  Vitor Lacerda•150

  @vitorlfariaPosted over 3 years ago

  @iwannabaa This worked better for me. Made the changes. Thanks for the tip.

  0
• 

  Carlos Jovel•30

  @iwannabaaPosted over 3 years ago

  One more thing: If you specify the attributes to transform in the .call-to-action a rule, it won't have that small weird effect at the beginning. You can use something like transition: transform 300ms ease, box-shadow 300ms ease;

  0

  ---

  

  Vitor Lacerda•150

  @vitorlfariaPosted over 3 years ago

  @iwannabaa Man! I was struggling on that too!! with this simple comment you taught me how to use the transition. Thank you very much for your feedback! Helped me a lot!

  Keep the excellent work!

  0
• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  I would set your button size with a height and width so when you hover it and it enlarges then it does not effect the other content on the right side and the whole layout

  0

  ---

  

  Vitor Lacerda•150

  @vitorlfariaPosted over 3 years ago

  @palgramming Thanks for your feedback! So this is why the hover state affects the other elements!!

  0