Results Summary Component using HTML and CSS

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 8 months ago

  Hello @Kurt3z 👋. Congratulations on successfully completing the challenge! 🎉

  • Actually you can easily fix that flashing behavior of button during hover by change the background property to background-image property.

  ---

  • Example:

  .btn:hover, .btn:active {
    background-image: linear-gradient(to bottom, #7857ff, #2e2be9);
  }
  

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  2

  ---

  

  Kurt3z•80

  @Kurt3zPosted 8 months ago

  @0xabdulkhalid Thank you very much, background-image fixed it indeed!

  0
• 

  Aykın Sancaklı•680

  @aykinsancakliPosted 8 months ago

  Hello @Kurt3z,

  The background property itself is not animatable in CSS and gradients in CSS use background images, you cannot use a transition to a new one like you would text color. Also when you applied a linear gradient directly within the hover and active states, the transition property didn't have a defined starting point to transition from (e.g. initial color is red, wanted color is blue) because the default background was a solid color.

  Hope this helps.

  Aykın

  Marked as helpful

  1

  ---

  

  Kurt3z•80

  @Kurt3zPosted 8 months ago

  @aykinsancakli Thank you very much, by using background-image it actually worked!

  0
• 

  P

  Guillermo Dominguez•440

  @memominguezPosted 8 months ago

  Regarding your button hover. Try something like this:

  button:hover {
  background: transparent; background-image: linear-gradient( to top, hsla(256, 72%, 46%, 1), hsla(241, 72%, 46%, 0.65) ); }

  Marked as helpful

  1

  ---

  

  Kurt3z•80

  @Kurt3zPosted 8 months ago

  @memominguez Thank you very much, it is fixed!

  0
• 

  Angel Infante•160

  @InfanteAngelPosted 8 months ago

  Hey! Regarding as to the transition property, I noticed you have an "all" in the transition property, I suspect that it is refreshing the whole button and not just the selected css background, so instead of adding an "all" element just add a "ease-in-out" in order to transition out of the animation once the user stop hovering. As well just a tip, use "ms" instead of "s" that way your timing is a bit more specific, something ranging from ".01ms" to ".999ms". It would look something like this "transition: .400ms ease-in-out". Hope this helps! Added a link for more information. Overall great job, great attention to detail!

  https://developer.mozilla.org/en-US/docs/Web/CSS/transition

  Marked as helpful

  1

  ---

  

  Kurt3z•80

  @Kurt3zPosted 8 months ago

  @InfanteAngel Thank you for the help! Ended up fixing it by using the background-image property instead of simply background. Regarding your tip about using ms instead s it makes a lot of sense being more specific about the animation timing, so will start using that technique from now on!

  1

  

  Angel Infante•160

  @InfanteAngelPosted 8 months ago

  @Kurt3z glad I could help!

  0