Different timings for animating to different states
I have a button, when I hover over it, it changes color over some amount of time, when I click/activate it it changes to a different color and I want that change to happen over a different amount of time than the hover change. How can I do that?
className:
I'm aware putting 2 durations means that one simply overrides the other(and that 2 ease-in-outs is also redundant), I have them both here anyways to provide a better idea of what I'm hoping for
className:
"ease-in-out duration-500 hover:bg-red-800 ease-in-out duration-100 active:bg-red-900 outline-none text-white bg-red-600 font-bold text-lg border-4 border-black rounded-full bg-contain m-3 p-1"I'm aware putting 2 durations means that one simply overrides the other(and that 2 ease-in-outs is also redundant), I have them both here anyways to provide a better idea of what I'm hoping for
