This simple effect will make normal links look just like buttons with hover effects.

We will be using HTML / CSS to do this.
Although there are many options to go with, for demonstration purposes we will have an effect with a background color, font color, border color, with specific hover effects that change those attributes.

First off. We will create the basic code in html that will be displayed on the page.

The above code will display a simple hyperlink. The class 'hoverlink' will contain the information to form our hover effect.

Now for the CSS:

All of the values in here should be modified to fit the rest of the layout for your site. I made the values above specifically to go with the vBulletin 3 Style here at GIDForums.

To include the CSS code in an outside CSS script, use:

One tip to make the effect flow more and just outright look better, I added
to the right and left of the 'Name' portion of the link.

Here is a basic final effect using multiple links, and bars to represent the specific sections of the links:

Very simple tutorial, yet a very professional appeal. Might I remind you this is so much faster than trying to get the same effect while using images.

__________________
Mr. Bob's Web Design - Tirelessly looking for ways to enhance the customer base of your business.

Nice... but is there some reason you chose to use all those non-breaking spaces, instead of just setting 'padding' (once) within the CSS class? Also, this doesn't work in Netscape 4.x. In fact, it breaks the page layout.

__________________
The Whole Internet, LLC
Visit our Homepage, -or-
use our online CSS Editor

I don't see why it wouldn't work in NS4. Any ideas? I usually don't use padding for that.

__________________
Mr. Bob's Web Design - Tirelessly looking for ways to enhance the customer base of your business.

Because NS4 always has problems with CSS! Google for...
NS4 CSS bugs
...and you'll see that it is well documented.

I just tried the padding, and it works fine (at least in IE and Opera).

__________________
The Whole Internet, LLC
Visit our Homepage, -or-
use our online CSS Editor

If it works in NS4 PM me the code and I will edit the post. Not good to have a tutorial that does not quite work all the time.
Thanks for the CSS tips.

__________________
Mr. Bob's Web Design - Tirelessly looking for ways to enhance the customer base of your business.

Are we talking about Netscape 4 here? I personally don't bother designing for that particular version of the browser since more than a year ago... and the people who still use that browser, they deserve the mess they see

I know my post is not very constructive but I thought I'd add it just the same.

__________________
J de Silva
Learning Journal | GIDForums™ | GIDNetwork™ | GIDWebhosts™ | GIDSearch™

Yes, NS4 = Netscape 4. I agree that it is old and that the users probably deserve what they get. However, our webstats still show that over 4.5% of our visitors still use it. I'm not willing to ignore a user base that large.

__________________
The Whole Internet, LLC
Visit our Homepage, -or-
use our online CSS Editor

Both good opinions. Like I said previously cs2

Btw, do you prefer being called cs2?

__________________
Mr. Bob's Web Design - Tirelessly looking for ways to enhance the customer base of your business.

I don't understand why you are mentioning the NS4 thing again.
We already tested and I stated that it does not work (01-02-2004 08:53).


Actually, no. The 'cs2' is just a company pseudonym -- I'm Bob, but next time it might be Candi or Maryann posting.

__________________
The Whole Internet, LLC
Visit our Homepage, -or-
use our online CSS Editor

Sorry. I thought when you said 'this' in your first post you ment the method I used, and not the one you described.

__________________
Mr. Bob's Web Design - Tirelessly looking for ways to enhance the customer base of your business.