Admin Forum:How to create rollover buttons

This Forum has been archived

Visit the new Forums!

Forums: Admin Central Index → General Questions → How to create rollover buttons

Central's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.

Note: This topic has been unedited for 4059 days. It is considered archived - the discussion is over. Do not add to unless it really needs a response.

I was just wondering if there's any way to make rollover buttons that link to pages on your wiki. I know that you can do: <span class="button"></span>, but I want to make one with a custom color that lights up when you move your mouse cursor over it. Anyone know how? Bunny J. The Bunny button 01:30, February 3, 2012 (UTC)

You can only do this with CSS and the :hover pseudo element property. This requires you to need at least sysop to edit site-wide CSS files. Rappy 01:50, February 3, 2012 (UTC)

You can place this in your MediaWiki:Common.css:

.animated:hover {
background: #4682b4; /* or any other color */
}

Use it with: <span class="animated">Text here</span> Annawantimes (Wall) 01:53, February 3, 2012 (UTC)

To smoothen the transition, you can also add the following:

.animated {
 transition: background 2s;
 -moz-transition: background 2s;
 -webkit-transition: background 2s;
 -o-transition: background 2s;
}

 TK999 19:55, February 3, 2012 (UTC)

Still requires the user to have access to edit site-wide CSS. I assumed Bunny was asking in lieu of their signature, in which case, that's not available to them everywhere they edit. Rappy 20:22, February 3, 2012 (UTC)

Yeah, that's what I was going to do. Well... that's okay. Thanks for the help. Bunny J. The Bunny button 18:57, February 4, 2012 (UTC)