Apply transition for single pseudoclass - css

Question

I want a transition on my button which should only be applied on hover but not on other pseudoclasses.
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>
So in this case I want it the transition from green to blue on hover but not from blue to red when active. How can I achieve it?

Answer 1

Set transition: none; on :active pseudo class + if you don't want a transition on mouseup, you can add
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>

Answer 2

I have to admit that your question is challenging !
My proposed 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
The problem is that the base state is shared beteen the back transition from the hover and the activer pseudo classes, so I don'tthink this can be solved using only transitions.
The trick is not to change the color in the active state, it is still green inside, but it looks red :-)