Web Design: Creating Classy Links with Animated Transitions

Here’s how to use CSS to make your links even more beautiful.

Not long ago, I wrote about how you can make links look pretty with CSS. Pretty links add style and class to a webpage. It’s subtle, but it’s there. Now I’d like to take it up a notch. 

In the last piece, we came up with this simple CSS code:

 a {
     text-decoration: none;
     color: #0f7afc;
     border-bottom: 1px solid;
     border-bottom-color: rgba(15, 122, 252, 0.2);
}
a:hover {
     text-decoration: none;
     color: #cf0000;
     border-bottom-color: rgba(208, 64, 0, 0.2);
}

This set of CSS instructions removes the traditional underlining from a link and adds a thin border on the bottom instead. Thanks to our rgba() value, that 1-pixel bottom border looks like it’s only 0.2 pixels. 

When someone hovers their mouse over our link, the link turns reddish. That looks nice. But now I want to control how this transition happens: make it feel smooth.

Adding an animated transition

CSS has a property called ‘transition’—it allows us to gradually change the properties of an object. Here’s how that works:

1. We take some CSS instructions—say, the instructions to render a link
2. We add a ‘transition’ with a time parameter—say, 1 second
3. Now the browser understands that when any of the link’s properties change, that change must happen gradually, over the course of 1 second

Transitions only make sense when CSS properties are changing. For example, in our case, a transition will work on the ‘hover state’ that the user activates by rolling their mouse over the link. That’s because during the hover state, the color of the link changes.

(FYI, in CSS, properties tell the browser how certain elements of a webpage — like colors, fonts, text blocks, borders, backgrounds, tables, lists, and even animations — should look. CSS also has aural properties, which you can use to design the sounds of a page. For example, when building a webpage that’s accessible for people who are blind or visually impaired, you can use aural properties to define the pitch, speed, and richness of a synthesized speaking voice.)

You can also use JavaScript to change CSS properties, but that’s another story for another day.

Here’s the final code:

 <style>
a{color: #0f7afc; border-bottom: solid 1px; border-bottom-color: rgba(15, 122, 252, 0.2); text-decoration:none; transition: 0.4s}
a:hover{color:#cf0000; border-bottom-color: rgba(208, 64, 0, 0.2); text-decoration:none}
a:visited{ color: #800080; border-bottom-color: rgba(128, 0, 128, 0.2); text-decoration:none}
</style>

How you can use this knowledge

Transitions are useful for designing interfaces—when you want to make your webpage more interactive and responsive. That’s because transitions allow for smooth micro-animations, hover effects, and adding hints for the user. You can shift between hiding and showing elements through transitions. For example, some element on your page can be transparent, then transition into being opaque when the user hovers over that area with their mouse. You can make an element on the page appear to float upwards by transitioning that element to new display coordinates. Some other time, I’ll teach you how to make a really pretty floating button. So, stay tuned.

If you enjoyed learning about web design today, feel free to check out the
education on Practicum. We offer online classes and mentorship to help
you amp up your tech skills and build a successful career.