Demo Page

...to keep the format of my main pages the same. Just click the demo and mouseover the links on the next page and see what happens, then return here to learn how it's done.

Back so soon? Okay, this isn't the easiest trick in the book but here goes. First, this first part of the code goes in the HEAD section of your page:

I've color coded the different parts so you'll know which part I'm speaking of. The code in gray sets the position of the first link, the width of the pseudo-buttons, the font and font size used.

The code in gray sets the opening position of the first link button, along with the width, font, and font color and font size used.

The code in green sets several options. Probably the ones of most interest to you are the color: #625B55, which is the text color; the background: #FAF3C7, this will be the background color of the fake button; and the border-right: 3px solid #ffffff, which I've set to the background color of the page. You might wonder why I'd code that in there if it's just going to blend into the page. It's because when the mouseover effect comes into play, it uses a different color and border and keeps things from shifting.

The code in blue sets your hover colors. Here I've set the border-right to a dashed line. This give the three dashed links on the right side of the link when your mouse hovers over them. There are other line styles you can use: dotted, dashed, solid, double, groove, ridge, inset, and onset are the options. For another interesting effect, set the border to solid and make it about 10 pixels wide, and your buttons will appear to shift right on the mouseover.

The code in purple hides the text that appears below the link buttons on mouseover when the buttons are not being moused-over, for example, when the page initially loads.

The code in red sets all the display properties for the text that appears below the links on mouseover. You can adjust all the properties to suit your page design, but I want to point out one thing. You'll have to adjust the top: 240px; to fit according to how many link buttons you use. If you have more buttons than on the demo page, the text that shows up on mouseover will be pop up on top of the buttons, which doesn't look as good. If you use fewer links, then it will be too far below the last link button. Just see where it pops up and make adjustments accordingly...or else I'll spank you!

The code in brown sets up the main page where your other content will go. If you make adjustments to the button width, you may have to make adjustments to the positioning of this area.

How to Link

<div id="coollink">
<a href="http://www.webconcern.co.uk">Link One<span>Here is some text about Link One</span></a>
</div>

This is almost like a standard link, only it's placed inside the division tags we set up in the HEAD section of the code. To add more links, do not repeat the <div>...</div> tags for each link, just add the links in between the same opening and closing division tag.

Next, notice at the end of the link text and before the </a> tag, is a span tag. The contents of the span tag is the text that will show up under the link buttons.

That takes care of the links. There is one more thing, you have to set up the main content area of your web page. This is easy too, here's the code:

<div id="content">
Your content goes here.
</div>