Link hover problem-please help

https://codepen.io/mersad1998/pen/wvwQVKR
hi.the problem is when i hover it starts to change color we’re good so far but when i stop hovering the color remain the same way but i want it to go back black

@mersad1998 Try using a transitionsinstead of an animation.

a {
  text-decoration: none;
  color: black;
  background-color: #DBD56E;
  width: 15%;
  border-radius: 5px;
  transition: color 0.5s;
}
a:hover {
  color: red;
  transition: color 0.5s;
}

OR to have a bit less repetitive code:

a {
  text-decoration: none;
  color: black;
  background-color: #DBD56E;
  width: 15%;
  border-radius: 5px;
}
a:hover {
  color: red;
}

a, a:hover {
  transition: color 0.5s;
}

do i have to write transition: color 0.5s; in a? because it works fine without it.

If you still want 0.5 transition from red back to black when the link is not hovered, then you would still need to keep it in there. You can really see the difference if you change both to 2s and then leave the transition off the a.

now i see.thanks alot for teaching me :heart: