HTML/CSS Transition works for hover in but not for hover out on chrome

user_14159745 0
Viewed 115

I have the following code:

button {
  transition: all 3s;
}

button:link,
button:visited {
  background-color: #51cf66;
}

button:hover,
button:active {
  background-color: #000;
}
<div>
  <h1>Hi there</h1>
  <button>push me</button>
</div>

This code works as expected on Firefox. I can see the transition happening on the button when I am hovering in or hovering out.

On chrome, the animation only happens when I am hovering in. When I hover out, the button goes back to its original color immediately.

Do you guys have any idea about what I am doing wrong? What can I do to make sure hover out animation works on chrome and firefox, the same way?

Thanks.

google-chrome css html
2 Answers

You need to specify which colour/background-color you want when the button is in default state

background-color: #51cf66;

Adding this to the styles under button fixed the issue.

button {
  transition: all 3s ease;
  background-color: #51cf66;
}

button:link,
button:visited {
  background-color: #51cf66;
}

button:hover,
button:active {
  background-color: #000;
  color: #fff;
}
<div>
  <h1>Hi there</h1>
  <button>push me</button>
</div>

user_33153330

This is because you didn't specify the background-color of your button. So when your mouse leaves the button it will immediately turn back to its default state. So, setting background-color property on your button will solve your problem

user_108413950
Related