Web Design: Creating Classy Links with Animated Transitions | Hacker Noon

June 25th 2020

Author profile picture

@evgeniy-lebedevEvgeniy Lebedev

Chief Marketing Officer Practicum by Yandex, edtech expert, practicum.yandex.com

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

Author profile picture

Read my stories

Chief Marketing Officer Practicum by Yandex, edtech expert, practicum.yandex.com

Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!

read original article here