How to create an animated hover link using CSS
CSS, HTML5, Web Design
CSS has come a long way since it’s early days. Adobe Flash used to be the only platform that would allow you to get motion or anything animated on a web page. Those days are long gone.
In this tutorial, we will go over how to take a <a> tag, or link, created in HTML and animate it when we hover over it. To start off let’s create our HTML page like so:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>CSS Animated Link</title>
</head>
<body>
<a href=””>Hover Me</a>
</body>
</html>
All this does is creates a new HTML document with a <a> tag in there that doesn’t go anywhere if we click it. Now we want to be able to attach some styles to it so let’s give it a class like so:
<a href=”” class=”animateMe”>Hover Me</a>
The class attribute with the value of “animateMe” allows the CSS to select the <a> tag and apply styles to it. Once we do that, we can go into the <head> portion of the page and create our CSS like so:
<style>
.animateMe{}
</style>
The <style> tag is creating an area where we can put CSS into our page. .animateMe is select the <a> tag so we can apply styles to it inside the curly brackets { }.
So let’s remove the underline, change the font, and change the color of the <a> tag with the .animateMe class like so:
.animateMe{
color:black;
text-decoration: none;
font-family:arial;
}
color:black changes the link’s color to black, text-decoration gets rid of the underline that links have by default, and font-family changes the font to arial. Now we want to give it some animation. To do that we need to create another block of CSS in our style tag that controls what the link does when we hover over it. This is what it will look like:
.animateMe:hover{
}
This means when someone mouses over the HTML tag that has the class of .animateMe applied to it, it will then apply the styles inside the curly brackets, which we haven’t defined yet. Let’s do that now:
.animateMe:hover{
color:red;
}
This will make the link’s color change to red when we mouse over it. However, there is no animation to that. So let’s add that now. All we need to do is go back to the .animateMe class and add a transition property like so:
.animateMe{
color:black;
text-decoration: none;
font-family:arial;
transition:0.3s;
}
This says if any of the properties already defined like color, font-family, etc change, then it will animate that change in 0.3 seconds. So now if we go back and hover over the button we will see the change animate now instead of taking place instantly. Here is the completed code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>CSS Animated Link</title>
<style>
.animateMe{
color:black;
text-decoration: none;
font-family:arial;
transition:0.3s;
}
.animateMe:hover{
color:red;
}
</style>
</head>
<body>
<a href=”” class=”animateMe”>Hover Me</a>
</body>
</html>
If you’d like to learn more be sure to check out our HTML/CSS/JavaScript training. Have an amazing day!