Https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button

HTML-CSS
#1

Tell us what’s happening:

I am currently on the task in the “Applied Visual Design: Use CSS Animation to Change the Hover State of a Button” lesson. I have done everything according to instruction and the video tutorial but it keeps returning the message " // running tests There should be one rule under
@keyframes that changes the background-color to #4791d0

at 100%. // tests completed"

Your code so far

      @keyframes background-color {
    100% {
      color: 4791d0;
    }
  }
</style>

html

<style>
button {
  border-radius: 5px;
  color: white;
  background-color: #0F5897;
  padding: 5px 10px 8px 10px;
}

button:hover {
  animation-name: background-color;
  animation-duration: 500ms;
}
@keyframes background-color {
  100% {
    color: 4791d0;
  }
}

</style>

<button>Register</button>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36.

Challenge: Use CSS Animation to Change the Hover State of a Button

Link to the challenge:

#2

Hello @Mamoskii008

Welcome to FCC forum.
Are you sure color: 4791d0; is correct? What about color: #4791d0;?

#3

I have tried both 4791d0; and #4791d0; the response is the same

#4

It is background-color: #4791d0; not color: #4791d0;.

#5

Thank you. This worked perfectly