Forum:Buttons that change colours when highlighted

Hello all,

How can I create a button that changes it's colour when you move your cursor over it? Like the six buttons here. --- Zantam03 ( Talk ) 22:03, December 17, 2011 (UTC)

or

This goes into MediaWiki:Common.css. Anything like this:  should then transition. 22:11, December 17, 2011 (UTC)


 * Thanks! --- Zantam03 ( Talk ) 22:21, December 17, 2011 (UTC)


 * I tried using it on this page, but it's not working... what's wrong? --- Zantam03 ( Talk ) 17:46, December 18, 2011 (UTC)


 * The two bits of code TK-999 posted above should have an "and" word between them, instead of an "or". The upper code block is actually not that relevant, as it's only responsible for making the transition from no-background to defined-background look more smooth. What's relevant is the lower code, which is the one responsible for adding a color to the  element when hovering over it. — Sovq 19:00, December 18, 2011 (UTC)


 * I actually used the lower code before using the upper code and it didn't work. Just now I added the lower code to my Wikia.css again (instead of Common.css, which I assume is ok), but it's still not working.... I think I have to change something to the page, not Wikia.css... --- Zantam03 ( Talk ) 20:02, December 18, 2011 (UTC)


 * Works fine for me. Although because you added the class to a span block, the only thing that gets highlighted is the "181" number in the top left corner. Change from span to div and you should be fine. — Sovq 20:50, December 18, 2011 (UTC)
 * Sorry about the confusion. 16:45, December 19, 2011 (UTC)
 * Fixed. You might also want to put the .animated code in Common.css too so that Monobook users see the same thing. Rappy 17:17, December 21, 2011 (UTC)