Community Central

Admin Forum:How to create rollover buttons

19,229pages on
this wiki
Add New Page
Talk0 Share

This Forum has been archived

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 1416 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)

Ad blocker interference detected!

Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.

Also on Fandom

Random Wiki