Create Glowing Underlines for Web Links

You know what they say… design is in the details. When you are designing a website, there are opportunities abound to focus on little details to visually enhance the experience. In this tutorial, we will show you how to create links with underlines that “glow”.

1. Photoshopping the Glow: Animated GIF

Open a new Photoshop document. Make it 1px in height. Technically, we could do this with the document only 1px wide too, but to make it easier to see what we are doing, this example is 15px wide. Zoom in so you can see better, and open the Window > Animation palette.

Fill your document area with your desired glow color, I used a deep red here. Also make sure the layer is unlocked in the Window > Layers palette. If it’s locked, just double click to unlock. Now click the arrow for Layer 1 in the animation palette and click the little stopwatch next to Opacity.

Now drag the blue arrow at the top of the animation palette forward a ways. Not too far… the farther you pull it the slower your glow. You can experiment with timing. With the timeline pointer now ahead a ways, adjust the opacity of your layer in the Layers palette down to zero (0). You should see a new diamond appear in the timeline showing you the opacity has changed. Between these two diamonds now, that layer will automatically “tween” between those two opacities, creating a gradual transition between 100 and 0% transparency.

Now move the timeline pointer ahead again the same amound you did before, and adjust the opacity back up to 100. That’s it! You now have an animation that will fade-out and fade-in this tiny little line.

Now “Save for Web & Devices” (under the File menu). Make sure to choose of the GIF options (this is the only graphic format which supports animation). In the lower right, make sure to choose “Forever” as the Looping Option.

Save the file out as “glow-underline.gif” in the images folder of the directory of your web project.

Here is the final product:

2. The Markup

For the sake of tutorial, we’re going to apply unique classes for our glow-y links. Here is an example paragraph with links in it:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
<a class="glow-hover" href="#">this link underline glows on
hover</a> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat <a href="#" class="glow">this link glows all the
time</a>, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Notice there are two links in this paragraph, one with a class of “glow-hover” and one with a class of “glow”. This is just to illustrate two different possibilities. The glow-hover class we will make the glowing underline only show up when the link is rolled over. The glow class we will have the glowing underline be there all the time.

If you use this in real production, you might want to consider not using specific classes, but just applying this styles directly to all anchor (a) elements. Even smarter, applying them only to anchor elements in your main content areas might be a good idea, so you don’t get glowing underlines where you don’t want them!

3. The CSS

For our “glow” class, we apply the background image right to the class, making sure it aligns to the bottom and repeats along the x-axis. Because anchor elements are inline elements, this will work even if the link breaks across multiple lines, which is great.

For our “glow-hover” class, we only apply the background image on the :hover pseudo-class (but in the exact same fashion), which will only making the glowing underline appear when the links is being hovered over.

a			{ color: #3366cc; text-decoration: none; }
.glow			{ background: url(images/glow-underline.gif) bottom repeat-x;
	                  color: black; }
.glow:hover		{ color: #3366cc; }
.glow-hover:hover	{ background: url(images/glow-underline.gif) bottom repeat-x;
	                  color: black; }

Example

For a quick live example to see these links in action, click here.