CSS

Bartłomiej Wilczyński
Bartłomiej Wilczyński
6,269 Points

Why transition works only in one way?

Hi, I applied CSS that is below to one of my buttons. It has this slowly transition effect when I hover over it but when I'm taking my mouse away from it, it is turning white again immediately. I want this button to also transition slowly to origin color when I'm taking my mouse away from him, how can I do this? Here is the CSS applied to this button:

.btn-type-two {
  padding: 0.5rem;
  cursor: pointer;
  background-color: inherit;
  border-radius: 3px;
  color: white;
  border: 1px solid;
  margin-bottom: 2rem;
}

.btn-type-two:hover {
  color: #f96816;
  transition: color 0.5s;
}

1 Answer

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

You have the transition property only applying to the hover state. Move the transition property to the btn-type-two class rule.