Cheap "Link" Tricks, Part 2

Here is a quick little trick to enhance your page links using CSS. This is the Part 2 in a series of cheap link tricks we will be publishing. :)

If you haven't read Part 1? Go there now.

Now onto Part 2: Go to this page and roll your mouse over the links and watch what happens. Ha! Didn't expect that again, did you? Okay, maybe you did. But go ahead, try it again, and then we'll show you how we did it.

In addition to the hover elements we added in Part 1, we have added several new elements. We added a text-transform property to make all hovers uppercase letters spaced 2 pixels apart. We added padding to the hover consisting of 2 pixels on the top and bottom and 1 pixel to the right and left. To make it jump out further, we included a solid blue background border that is 2 pixels wide at the top and bottom with a 3 pixels wide border on the left and right in green.

Yes, we know this week's example is really extreme, but we wanted to put as many elements in the style block so you could have fun taking them out one-by-one and then viewing your page with/without them. It also is the perfect example of "What Happens When You Go Crazy with CSS" ... lol

The code between the HEAD tags of this page looks like this (use it for each page you want the effect to appear on):

<style type="text/css">
<!--
a:hover { font-style: italic; text-decoration: underline overline; font-size: 18px; font-family: Georgia, "Times New Roman"; font-weight: bold; color: #FF0000; background-color: #FFFF00; text-transform: uppercase; letter-spacing: 2px; padding-top: 2px; padding-right: 1px; padding-bottom: 2px; padding-left: 1px; border-color: #0000CC #009900; border-style: solid; border-top-width: 2px; border-right-width: 3px; border-bottom-width: 2px; border-left-width: 3px}
-->
</style>

The Code for external style sheets (controls your entire website's link hovers and is highly recommended):

a:hover { font-style: italic; text-decoration: underline overline; font-size: 18px; font-family: Georgia, "Times New Roman"; font-weight: bold; color: #FF0000; background-color: #FFFF00; text-transform: uppercase; letter-spacing: 2px; padding-top: 2px; padding-right: 1px; padding-bottom: 2px; padding-left: 1px; border-color: #0000CC #009900; border-style: solid; border-top-width: 2px; border-right-width: 3px; border-bottom-width: 2px; border-left-width: 3px}

Incidently, if you want to control the text size on your web pages so that your visitors are better able to view your pages as you intended, always use "px" (pixels).

Don't be afraid to take out style elements and see how your page looks without them. Try taking out one at a time and see what looks best to you. If you don't like the borders, simply take them out. If you would rather replace the text-transform with a lowercase style, change the word "uppercase" to "lowercase". Replace the color codes with whatever floats your boat or tickles your nose. :) Okay, it's NOT late but I'm still on a roll---over. {snicker}

And there you go, another Cheap Link Trick with CSS by BasicTemplates.com.