Problem with challenge (and solution?): "Applied Visual Design: Use CSS Animation to Change the Hover State of a Button"

HTML-CSS
1

Hello!
I searched the forum and I saw some posts relating to this small CSS challenge, but they’re kind of old so I think this may be useful.
This challenge asks to use CSS to change the color of a button when hovered. The thing is that when following the instructions the button changes color during half a second and then reverts (still the challenge is successful), which I think is not the desired behavior. The code looks like this:

<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>

A better behavior, in my opinion, is when the button stays when the color changed, so I did the following (which also passess the challenge with success):

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

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

  @keyframes background-color {
    0% {
      background-color: #0F5897;
    }
    100% {
      background-color: #4791d0;
    }
  }

</style>

<button>Register</button>

I’m just starting here and I don’t know much about coding or web development, so I just wanted to share this because it felt weird.
Cheers!

2 Likes
2

What you described with the color reverting is the expected behavior for this challenge.

Keep at it, one of the next few lessons will address exactly your concerns! It will provide a different solution to the problem than the one you came up with.

1 Like
3

To me, the former is the desired effect because it doesn’t involve series of changes in color unlike the later which changes color from #0F5897 (the original background-color) to #0F5897 to #4791d0 during the duration of 0% and 100% respectively.
Anyways, we discover new things which may be important in the real deal when learning. Happy coding!!

1 Like