Make Beautiful Hyperlinks Using CSS

A beautiful website design addresses every single aspect and element of the website, whether big or small. Small animations and beautifully designed elements can immensely improve the overall user experience and can take the whole design to a new level. Hyperlinks – or anchor tags – are an important element in any website and it’s the only way to display internal or external links on the website. By default, without any CSS underlines and blue coloring will be there for anchor tag and a hand pointer mouse icon on hover. Traditionally, the default design has been followed with some additional CSS to apply different styles for underlining or different colors. Things are not the same now with CSS3 as it offers a lot more to explore in terms of new designs and animation elements.
With a little help of CSS3, the hover effect on hyperlinks can be more beautiful, interactive, and eye-catching. This post provides CSS3 solutions for applying different hover effects on the hyperlink element. Let’s begin!

Smoothly Change the Color

CSS3 has a property called “transition” which allows you to change property values smoothly from one value to another over a given duration. It animates the property changes rather than applying them immediately. Consider the following HTML:
Color changes smoothly

Join us in our newest publication:

The traditional way to change color on a hover event is:

#color:hover {
 color: purple;
 }

This would change the color immediately on mouse over. But the CSS3 transition property makes this whole process smooth. The following CSS class will apply a color transition over 0.9 seconds.

#color:hover {
 transition: color .9s;
 color: purple;
 }

You can check out a working demo here to see the difference.

Likewise, you can also change the background color smoothly using the following CSS:

#backColor {
 text-decoration: none;
 padding: 0 5px;
 transition: all .9s;
 }
 #backColor:hover {
 color: #fff;
 background-color: green;
 }

In the above example, both the background and color property will transition due to the value “all” specified for the transition-property. You can check out a working demo here.

Increase the Font Size

To add an increasing font-size animation, you don’t have to set the font-size CSS property. You can leverage CSS3’s transform property to scale out the text to an extent, resulting in an increase in font size effect. The following CSS code uses transition and transform properties to scale out:

a {
 display: inline-block;
 transition: .3s;
 font-weight:bold;
 text-decoration:none;
 }
 a:hover {
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
 }

You can check out a working demo here.

Flip the Anchor Link Text

Flipping the text on hover is one of my favorite animation effects. The flip effect looks good on a text element when it gets completed quickly. To make this flip animation smooth, put your anchor text in a span element like:
Flip me…

The following CSS code will implement the flip effect on the anchor tag hover event. Assign a rotate value to transform property to rotate the text by 360 degrees to create the flip effect.

a,
 a span {
 display: inline-block;
 }
 a span {
 transition: .5s;
 }
 a:hover span {
 -webkit-transform: rotateX(360deg);
 transform: rotateX(360deg);
 }

You can check out a working demo here.

Add Border Around the Anchor Text

Adding a border around the anchor text and descaling the text so that it can fit inside the box is another cool way to have a hover animation. The following CSS code attaches a hover event to the anchor tag elements and using the ::before CSS selector, it attaches a box around the anchor text. The ::before selector inserts something before the content of each selected element(s). You need to use the content property to specify the content to insert. For example:

a {
 color: #741c7c;
 font-weight: 500;
 -webkit-transition: -webkit-transform 0.2s;
 transition: transform 0.2s;
 display: inline-block;
 text-decoration: none;
 position: relative;
 }
 a:hover {
 -webkit-transform: scale(0.9);
 transform: scale(0.9);
 }
 a::before {
 position: absolute;
 top: -2px;
 left: -7px;
 box-sizing: content-box;
 padding: 0 5px;
 width: 100%;
 height: 100%;
 border: 2px solid #741c7c;
 content: '';
 opacity: 0;
 -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
 transition: opacity 0.2s, transform 0.2s;
 -webkit-transform: scale(0.9);
 transform: scale(0.9);
 }
 a:hover::before {
 opacity: 1;
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
 }