Results Summary Component using HTML and CSS

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!

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

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

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