How to Create Five Simple Hover Effects for Your Navigation Links

How to Create Five Simple Hover Effects for Your Navigation Links


How to Create Five Simple Hover Effects for Your Navigation Links

This is a quick tutorial about creating simple hover effects that would be best suited for links within a navigation. The reason for this is that these might be too much when done inline within a paragraph but that is only a word of caution – if you want to apply these to your normal links, all the power to you.

Like the title of this tutorial, and like I’ve mentioned in this intro these hover effects are pretty simple. This, in turn, makes them good for a lot of designs so I do hope you find them useful. I am not going to go over the logic behind all five of the hover effects but I can talk about two of them in greater detail to give you a clear idea of what is going on in order to create these types of awesome hover animations.

The First Effect

The first effect is very basic; it makes the darker colour text fade into a lighter one. You can obviously change the colours out to suit your needs. The idea behind this effect is two overlapping texts of different colour, one of which fades out on hover. Let’s take a look at the code behind it.

The HTML

Each one of these five purple sections is actually a HTML5 section with a different coloured background. Within it you have another HTML5 tag, the nav tag. It also contains a class, which correlates to the effect being made.

<section class="shade1">
  <nav class="effect1">
    <a href="#" data-hover="Retro">Retro</a>
    <a href="#" data-hover="Food truck">Food truck</a>
    <a href="#" data-hover="Messenger bag">Messenger bag</a>
    <a href="#" data-hover="Banjo">Banjo</a>
    <a href="#" data-hover="Artisan">Artisan</a>
  </nav>
</section>

As you’ll see that it differs from one effect to the other but this effect calls for a bunch of anchor links with an interesting attribute. In order for this effect to work, data-hover attribute needs to be set on the links and its value needs to be the same as the value of the link. Otherwise, this effect will not work.

The CSS

The CSS behind this effect is actually not that complex, Let’s go over it one rule at a time. First, we define the bare basics, which is the colour, weight and text of the link itself. That’s as straightforward as it get; the best part is that this totally customizable – this does not affect the functionality of the hover effect.

.effect1 a {
	color: #a186be;
	text-transform: uppercase;
	font-weight: bold;
}

We then have to customize the lighter text that will appear on the effect. We are using the before pseudo class in addition to the data-hover attribute we set in the HTML mark up in order to get the lighter text to appear below the dark text.

.effect1 a::before {
	content: attr(data-hover);
	color: #662d91;
	position: absolute;

	transition: transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
}

Above we are doing a bunch of important things so let’s go over it line by line. First we are defining that the literal content of this pseudo class be the value from the data-hover attribute. This is what makes the text appear without having complex duplicate HTML code. Next, we set the colour so that the text differs and the effect works. After that we, set the position of the before pseudo class to be absolute; what this does it make the text be placed directly underneath the link text.

Now the last three lines of CSS in that rule relate to the actual transition between the text on top and below. This literally sets a transition of 3 second onto the opacity of the top most text making it appear to fade out.

.effect1 a:hover::before,
.effect1 a:focus::before {
	opacity: 0;
}

Now, this transition wouldn’t work without the trigger. The above CSS makes it so that on hover – and focus – the link’s opacity is set to 0, meaning it will become invisible. The transition in the previous rule created the fade in and out effect. However, this is what makes the effect happen because if the opacity on hover were 100% - or 1 – then nothing would have changed and the text would have stayed the same.

The fourth effect

The fourth effect down the row is one where an underline fades in below the link once you hover it. It is actually simpler to create this then the first effect I’ve just talked about.

The HTML

This section was created thanks to the section, nav and anchor tags just like the rest. What makes this effect special is that it has plain anchor tags with no data-hover attribute like the first effect. It also doesn’t have a span within the anchor either like some others, which you can see if you download the source files.

<section class="shade4">
	<nav class="effect4">
		<a href="#">Typewriter</a>
		<a href="#">Etsy</a>
		<a href="#">YOLO</a>
		<a href="#">Selfies</a>
		<a href="#">Flannel</a>
	</nav>
</section>

The CSS

First we style the default links by giving them a colour and some padding. The padding will determine the distance of the underline below the link.

.effect4 a {
	color: #662d91;
	padding: 10px 0;
}

If you take a look at the rule below you can see that we are using the after pseudo class to define what the underline will look like. The underline is actually a 1px high div not an actual text decoration underline or border bottom. We want to define its width to be 100% so that it is just as wide as the link itself.

.effect4 a::after {
	background: #662d91;
	position: absolute;
	top: 100%;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	opacity: 0;

	transition: opacity 0.3s, transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	-webkit-transform: translateY(-10px);
}

We are also setting the opacity of the underline to be 0 so that it is not visible by default, as you can see above. Additionally, we need to set the position of this underline to be absolute and top and left 0 so that it is directly below the link’s set padding and so that it starts as far left as the link itself.

Now, you can also see above that we are setting a transition for opacity – so that on hover we can make the link appear – and a translation on the y axis. What this means it that at first, the underline is 10 pixels above where it should be so that when it is triggered to fade in in will flow downwards to its original position.

In the code below we are setting the trigger once again. We are defining the underline be 100% visible – with opacity being set to 1 – and moving the underline to its original Y position of 0. And this, right there, is what makes the underline appear and fade in below the navigation link.

.effect4 a:hover::after,
.effect4 a:focus::after {
	opacity: 1;

	transform: translateY(0px);
	-moz-transform: translateY(0px);
	-webkit-transform: translateY(0px);
}

The rest of the effects

The same idea goes for the remaining three hover effects that I did not explain; you have content overlapping content, changes being triggered on hover where the pseudo classes are used to set the changes. I do not think this is rocket science at all. I think this pattern is very straightforward to understand so that you can make other effect for yourself.

Author: Paula Borowska

Paula is a user experience designer who loves creating simple interfaces. She loves clutter free, clean design. You can chat her up about anything at @paulaborowska - or check out her portfolio."

Share the love

5 comments

Rasha
Thu, 20th February 2014
like it,thanks for share. Reply
Yuvraj Solanki
Wed, 26th February 2014
Very helpful.
May I know what does " content: ' ' ; " do?
Reply
mahdi
Sat, 29th March 2014
Very nice.
but in effect 2 if we have a word with a space between, the "before content" takes two lines and the effect will be ruined.
what's the solution? Reply
Yasmin
Mon, 21st April 2014
Hi!

I've implemented the Fourth example, however, the underline is filling the width of the complete list, rather than just the link being hovered over.

Do you know why this might be happening? I have width set to 100%?

This is what I have in my CSS, if it helps at all!




#nav ul{
float:right;
display:inline;
position:relative;
margin-left:20px;
}

#nav ul li{
display:inline;
margin-right:30px;
}

#nav ul li a{
text-decoration:none;
font-size:16px;
color:#ffffff;
}

#nav a::after {
background: #ffffff;
position: absolute;
top: 100%;
left: 0;
content: '';
width: 100%;
height: 1px;
opacity: 0;
transition: opacity 0.3s, transform 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.3s;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transform: translateY(-10px);
-moz-transform: translateY(-10px);
-webkit-transform: translateY(-10px);
}

#nav a:hover::after,
#nav a:focus::after {
opacity: 1;
transform: translateY(0px);
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
}



Thanks! Reply
Marrit
Fri, 17th October 2014
Hey! I've got the same problem, I was wondering if you've already found a solution? Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement