In the realm of web design, small details can significantly enhance user experience and engagement. One such detail is the use of gradient underline links, which not only draw attention but also add an elegant touch to your website. This tutorial will guide you through the process of creating gradient underline links, complete with a smooth animation effect on hover. Regardless of your skill level, you’ll find step-by-step instructions that will empower you to implement this stylish feature on your site, making your links stand out while improving overall aesthetics.
A Review of the Benefits:
- Enhances the visual appeal: This will modernize your website’s look by adding eye-catching gradient underline links.
- Interactivity: Turn boring old-school links into animated link effects to further elevate the design of your website and make your links stand out.
- Increase load time: Instead of using JavaScript or any other complicated coding to achieve a similar effect, we are going to use pure HTML and CSS coding which will not impact the performance of your website.
Let’s dive in… the result should be exactly like shown in the screenshot below.
Step 1: Adding the HTML code
To begin, open your preferred code editor software and add the below HTML code.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animated Underline</title> <body> <a href="#">Hover over me!</a> </body> </html>
Name the file link.html or whatever name you like and save it to your computer.
Step 2: Adding the CSS style
Now, let’s style our link with CSS to achieve cool gradient underline and animated effects.
Copy the CSS code shown below, and paste it right under the <title>Animated Underline</title>
<style>
a {
text-decoration: none;
position: relative;
color: black;
}
a::after {
content: '';
position: absolute;
width: 100%;
height: 3px;
left: 0;
bottom: -2px;
background: linear-gradient(90deg, #00f, #0ff); /* Blue gradient */
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease-in-out;
}
a:hover::after {
transform: scaleX(1);
}
</style>
Your complete code should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Underline</title>
<style>
a {
text-decoration: none;
position: relative;
color: black;
}
a::after {
content: '';
position: absolute;
width: 100%;
height: 3px;
left: 0;
bottom: -2px;
background: linear-gradient(90deg, #00f, #0ff); /* Blue gradient */
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease-in-out;
}
a:hover::after {
transform: scaleX(1);
}
</style>
</head>
<body>
<a href="#">Hover over me!</a>
</body>
</html>
Save the changes to link.html and view it in a browser.
That’s it, you now have the coolest link to impress your website visitors.
How it works
- The `::after` pseudo-element creates an underline.
- The gradient is applied to the underline with `background: linear-gradient(90deg, #00f, #0ff)`.
- The `transform: scaleX(0)` and `scaleX(1)` animations expand the underline from left to right.
- The animation occurs when you hover over the link.
How to Edit the CSS?
The code is fully editable, you can edit it to meet your needs. For example, let’s say you want to make the underline a bit thinner and change the color and the degree of the gradient.
You would need to do the following:
- Go to the CSS code, find the `height: 3px;` under the `::after`, and change the 3 to 1px. This will make the underline thinner.
- Now to change the color and the gradient degree you can change the following:background: linear-gradient(90deg, #00f, #0ff); /* Blue gradient */
to:
background: linear-gradient(50deg, #276221, #52a447); /* Green gradient */
Here is the full code with the changes you made. You can call this one link2.html and save it to your computer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Underline</title>
<style>
a {
text-decoration: none;
position: relative;
color: black;
}
a::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
left: 0;
bottom: -2px;
background: linear-gradient(50deg, #276221, #52a447); /* Blue gradient */
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease-in-out;
}
a:hover::after {
transform: scaleX(1);
}
</style>
</head>
<body>
<a href="#">Hover over me!</a>
</body>
</html>
And your changes should look like this:
Note: If you want to explore more CSS gradient properties you can check out this guide by w3schools.
That’s it!
We hope you found this simple tutorial useful, enjoy styling your links, and also check out these suggested tutorials:
