Change the Hover State

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

<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% {
  background-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/94.0.4606.81 Safari/537.36

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

Link to the challenge:

i am running same code mine is passsing test

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


try your code again 

ya i found it you have not given ending curly bracket after 100%

you code should be 100% {background-color:#4791d0;}

it’s clean from errors with you because you not missing } to close 100% like him

[ issue #1] The error is }on your code to close 100%
[ issue #2] it’s background-color: not background-color : space will error the code

Here’s a quick explain

  • YOUR CODE :
    @keyframes background-color {
    100% {
    background-color : #4791d0;
    }
  • CLEAN CODE : — > check { }
    @keyframes background-color {Start #1
    100% {Start #2
    background-color: #4791d0;
    }End #2
    }End #1