CSS3 transitions not working on button

I have a relatively complex button that I'm styling with CSS3, it looks and behaves as I intended apart from the transitions are not working. It should fade on hover etc but it's just not working, tested in moz opera and chrome, no luck.

Here's a link to a fiddle http://jsfiddle.net/dsyne/DpsuN/1/

Any help would be appreciated, i've tried many different things. Re-orderin开发者_JAVA技巧g the stack for instance. I'm not sure if the ordering is important with transitions ?

edit:wrong link sorry

Gradients don't support transitions directly yet. You should define your background colors then use a pure alpha gradient that is the same across states to add shading.

Use id to specify transition property instead of class. Worked for me!