Apply Transition for a Single Pseudo-Class

Question

I need a transition to my button, which should be applied only to hover, but not to other pseudo-classes.

button {
    width: 100px;
    height: 50px;
    color: white;
    background-color: green;
    transition: background-color 1s;
}

button:hover {
    background-color: blue;
}

button:active {
    background-color: red;
}

<button>Nice Button!</button>

Run code

Therefore, in this case, I want the transition from green to blue to hover, but not from blue to red, when active. How can i achieve this?

Answer 1

I must admit that your question is complicated!

My suggested solution:

button {
    width: 100px;
    height: 50px;
    color: white;
    background-color: green;
    transition: background-color 2s;
}

button:hover {
    background-color: blue;
}

button:active {
/*    background-color: red; */
    -webkit-animation: activate 0s 0s forwards;
    animation: activate 0s 0s forwards;
}

@-webkit-keyframes activate {
    0% {background-color: green;}
   100% {background-color: red;}
}

@keyframes activate {
    0% {background-color: green;}
   100% {background-color: red;}
}

fiddle

, - activer, , , .

, , , : -)

Answer 2

transition: none; :active +, ,

button:focus {
  background-color: blue;
  transition: none;
}

button {
  width: 100px;
  height: 50px;
  color: white;
  background-color: green;
  transition: background-color 1s;
}
button:hover {
  background-color: blue;
}

button:focus:hover {
  background-color: blue;
  transition: none;
}
button:active:hover {
  background-color: red;
  transition: none;
}

<button>Nice Button!</button>