Ok, so first thing first, the art file. Notice it’s 440px by 110px. This is the part you set in the a.rollover bit. It’s the stuff inside this: background:url('URL-To-Your-Image-Here');

In the a.rollover and a.rollover:hover the height and width use half the graphic width: 220px. What happens is, you see the left half when the image is at rest. Then when you mouse-over the image you see the right half (that’s what the -220px in the a.rollover:hover is doing… it’s shifting the image 220 pixels to the left faster than your eye can register).

The other thing about this graphic, is for my personal preference there’s a 50% transparent black background. This allows any text I put over the button to have a darker background. That’s a personal preference.

The Overtext is the actual text of the button. I prefer hard coding the full URL rather than use the Obsidian Portal dynamic wiki links method because sometimes I want the text on the button to be slightly different from the page name, and I don’t want there to be a conflict between Obsidian Portal markup and pure HTML.

For yours, obviously if you use a different sized button, you’ll need to adjust the width:?px; accordingly. Of course you’ll probably have different color:?; values to fit your particular scheme. The .overtext:hover is how you set your color when somebody moves a mouse over the text. This isn’t really needed since the background has a rollover but I like to be sure.

Now, MY overtext is fancier than the one I listed above. It has a font-family value set and a drop shadow. You can do anything with it that you can do with regular HTML text.

There’s a reason my rollover image is a semi-transparent PNG file. It’s so that I can do a layered background image and build fancy buttons on the fly without having to fire up GIMP or Photoshop all the time.

That’s still the same rollover and overtext from before. However, now I have an image behind it. I use images that are already found elsewhere on the site, if the user browses my site regularly then they’ve already been downloaded by the browser to their local machine… so I just put them to use as buttons.

The code is really simple. Just put the link, inside a div, and set the div to have a background image that you move around via the background-position feature.

So you can see why I use a 50% transparent background, the image I am using is displayed in this box. If I didn’t darken the image, my Overtext would have to be an even brighter color – which might take away from my visual theme.

So you have to set the height:?; and width:?; to the same value as you’re using for your buttons. The background:url(''); is the image you’re using. You move the image around to suit your fancy by setting background-position:leftright updown;. You’ll have to fiddle with that to suit your personal taste.

As of 8/13/2013 The “triple box” has been retired. However, I will leave the text here for folks that might be interested. I use a new “Dynamic Wiki Buttons” and it will be listed after all this below.

My Triple Box

.tribox {position:relative;left:0px;width:684px;height:122px;padding:0px;margin:0px;margin-bottom:5px;text-align:center;background-color:none;vertical-align:middle;}

.tribox.left {position:absolute;left:0px;top:3px;width:220px;height:110px;background-color:white;border-style:solid;border-width:2px;background-image:url('http://cdn.obsidianportal.com/assets/160661/BookbacksDark.jpg');}

.tribox.center {position:absolute;left:230px;top:3px;width:220px;height:110px;background-color:white;border-style:solid;border-width:2px;border-color:black;padding:0px;background-image:url('http://cdn.obsidianportal.com/assets/160661/BookbacksDark.jpg');}

.tribox.right {position:absolute;left:460px;top:3px;width:220px;height:110px;background-color:white;border-style:solid;border-width:2px;border-color:black;padding:0px;background-image:url('http://cdn.obsidianportal.com/assets/160661/BookbacksDark.jpg');}

<div class="tribox">
<div class="tribox left" style="background:url('');background-position:-0px -0px;">YOUR-ROLLOVER-HERE</div>
<div class="tribox center" style="background:url('');background-position:-0px -0px;">YOUR-ROLLOVER-HERE</div>
<div class="tribox right" style="background:url('');background-position:-0px -0px;">YOUR-ROLLOVER-HERE</div>
</div>

<div class="tribox">
<div class="tribox left">YOUR-ROLLOVER-HERE</div>
<div class="tribox center">YOUR-ROLLOVER-HERE</div>
<div class="tribox right">YOUR-ROLLOVER-HERE</div>
</div>

OK! Now to use everything we learned up above plus a few new tricks.

This is a way of adding a few CSS keywords to your rollover graphic and this allows your buttons to dynamically “sort” themselves into rows and columns FOR you. This means no hunting and pecking through lines of CSS trying to figure out which tribox contains which button.