Jazzing Up Your Links, Part 2

CATEGORIES: GoLive, Tutorials | Deborah Shadovitz | October 07, 2005

Last month I showed you the basics of jazzing up your links: using pseudo-classes to differentiate navigation links from the links on the body of your page. Armed with that knowledge, you can use pseudo-classes to your heart’s (or employer’s) content and give your text links all types of looks. In the early days of the Web, it was very popular to use images-buttons-as the basic navigation links on our page. As the Web has matured, many people have moved to favoring text links. There’s a strong argument for doing so: flexibility. It’s far easier to edit text than to create or regenerate images. But plain text links don’t look very exciting. Thankfully, CSS enables us to easily add zest to our text links.

The options here aren’t in any particular order and none are mandatory. Mix and match and experiment.

This stuff doesn’t render well in the page layout so with your page active, select File>Preview In>Live Rendering and keep that window open. To update the Live Rendering and see your result, save your style sheet.

STEP 1: How or Where to Apply These Attributes

To have any of these effects appear as soon as the page loads, apply them to your a:link pseudo class. (In my example in Part 1, that was .navbar a:link.) Bear in mind though, that although you may add color and an outline to make an area look like a button, only the text itself is the hotspot (clickable link area).

To have them appear just when your visitor rolls over the text link, apply them to your a:link a:hover. (In my example in Part 2, that was .navbar a:hover.)

Tip: You can apply an effect to both. You can have one default look and another on mouse-over.

STEP 2: Add an Image as a Background

A texture can add a nice polish to your links, helping them appear more like buttons. To add a texture, you create an image file, place the image in your Files tab, then link to it. The image you use can be larger or smaller than the desired area. If smaller, it’ll repeat to fill the space; if larger, it won’t expand your text area.

In the Background Properties tab, select URL from the Image menu. Then Point and Shoot to the desired background image in your Files tab. Here, I linked to goldpaper.gif. The background won’t render in the layout but it’ll appear in Live Rendering and preview in your browser (remember to refresh the browser page).

Tip: Consider having one background image for the :link pseudo class and another on the :hover pseudo class. This creates a highly visible mouse-over effect.

STEP 3: Add a Background Color

Another way to make your links look “buttonish” is to add color behind the text. If you’re using an image, the color won’t show, though.

In the Background Properties tab, click the Color well and choose a color. (You’ll notice that when you add a background property color, that same color is also reflected in the Font properties tab.)

Tip: Consider having one color for the :link pseudo class and another for the :hover pseudo class.

STEP 4: Add an Outline

An outline can add definition. You can have the same line on all sides or vary the width, color, and pattern.

Go to the Border and Outline Properties tab. To create a uniform look, enter a border width such as 1px in the first field. Then click the Color swatch and choose a color. Finally, select a line pattern from the menu. To vary the look, make these three entries on the Top, Right, Bottom, or Left line. (Not all line types display in all browsers, so test your choices.) Here I entered 1 pixel under All, selected the same color as my link’s text, then chose dashes at the top and bottom with dots on the side. (Note: Under 2 px width, IE6 doesn’t know how to render dashes so my lines will all appear solid to IE6 users.)

STEP 5: Set the Width of Your Button Area

By default, your background and outline will be the width of the particular text. This doesn’t matter if your background or outline appears only on mouse-over (a:hover). But it can look sloppy when you show the background or outline at all times (a:link) as I have in these examples.

To set a uniform width, go to Block Properties, and enter a width in the Width field. Here I have 110 px as the width. Then choose Left from the Float menu. (You can see how the width doesn’t render uniformly until you use float.)

STEP 6: Add Space

The text will look cleaner if you put some distance between your link’s text and the outline, or put color around the text. This is done using padding.

In the Margin and Padding tab, enter the amount of padding you want all around under All, or at the Top, Right, Bottom, or Left. Here I have 2 pixels at the top and 4 at the bottom because the eye makes things appear lower. I have 5 pixels at the left to set the text apart from the edge. I have no spacing on the right because the width takes care of that.

STEP 7: Center Your Link’s Text

Another option is to use is alignment. To do this, go to the Text Properties tab, then choose your alignment from the Text Alignment menu. Here I have the text centered to demonstrate. Remember that left or right padding will throw off your centering. In this example, I’ve removed the 5 pixels of left padding that I added in the previous step.

STEP 8: Change Fonts for Effect

You can also have the font differ on your buttons or change when a user moves over your link. For the mouse-over effect, select the pseudo class’s a:hover. (Using my example from the previous tutorial, that’s .navbar a:hover.)

To change the font family, in the Font Properties tab, click the Create New Font Family button and choose an alternate family from the menu. Here I’ve selected a cursive font set that I made on my own earlier.

STEP 9: Change Font Color or Attributes for Effect

Another option is to alter the other font attributes in the Font Properties tab in any combination of ways. You can choose a Style and/or Weight or Decoration, each found in the Font Properties tab. And, of course you can change the font color, too. It’s normal to have font color change anyway. Here, my font changes to purple. You can also go to the Text Properties tab and choose Font Variant or Transformation or Word Spacing or Letter Spacing. (These may not appear in all browsers, though.)

Share This

No Comments

No comments yet.

Sorry, the comment form is closed at this time.

Featured Partner

From our Partners