underline hover effect css
underline hover effect css

Hi πŸ‘‹ fellow coders. In this tutorial, we will learn to add an underline hover effect in CSS. This is a simple CSS hover effect with a gradient background. A hover effect can be used to indicate something important or a link.

Table of Contents

Also, Read – Pentagon Menu using CSS

How to add an underline hover effect in CSS?

To create an underline hover effect we need to create an underline for our text. This is not a normal underline it is a gradient underline, and then we will animate.

If you think this is a hard task then let me tell you it is a piece of cake.

Text linear-gradient background with CSS Codepen

See the Pen linear gradient background CSS by Rare Programmer (@rareprogrammer) on CodePen.

To add a linear gradient background to the text we can use the background (or background-image) property and create a gradient using the CSS linear-gradient() function.

CSS background propertyThe background property defines the background of an HTML element
CSS linear-gradient functionThe CSS linear-gradient() function creates a gradient background image using the given values
create a linear gradient background image in CSS

Note: You can learn more about CSS background properties in our CSS Backgrounds | CSS- Beginner to Advance lesson.

Below we add a background image to our text

.gradient-underline {
  background-image: linear-gradient(90deg, blue, purple, #f3bc26);
}

The above code creates a background gradient image with 3 colors at a 90-degree angle.

Text gradient underline with CSS Codepen

See the Pen Text gradient underline by Rare Programmer (@rareprogrammer) on CodePen.

Moving on we need to set background-repeat to no-repeat and background height to 3 pixels with its position at the bottom left.

.gradient-underline {
  text-decoration: none; /* don't forget to remove the text decoration from links */
  background-image: linear-gradient(90deg, blue, purple, #f3bc26);
  background-size: 100% 3px;
  background-repeat: no-repeat;
  background-position: bottom left;
}

In the above code, we removed the text-decoration just in case the text is a link.

CSS underline animation left to right Codepen

See the Pen Underline animation left to right by Rare Programmer (@rareprogrammer) on CodePen.

Now, we need to set the background width to 0 and make it 100% when the user does a mouse over. For that, we set the initial background width to 0%

background-size – defines the size of the background image

.gradient-underline {
  ...
  background-size: 0% 3px; /* Here, the initial background width is 0% */
  ...
}

Next, we need to set the background width to 100% on the mouse over, We will use the CSS ::hover pseudo-class.

The CSS ::hover pseudo-class is used to select an HTML element when a user mouse over

.gradient-underline:hover {
  background-size: 100% 3px;
}

Make it smooth

But, the effect is not smooth. We can use the CSS transition property on the background-size property to do that.

The CSS transition property allows us to change the property values smoothly over a given time.

.gradient-underline {
  ...
  transition: background-size 300ms;
}

The 300 milliseconds transition time is enough for this effect.

Our effect is complete, try to mouse over on the text.

The full source code is available on Github.

Run the below code to see the final output

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Underline hover effect in CSS</title>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
      }

      body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: system;
        font-size: 50px;
        background: #ffffff;
      }

      div {
        padding: 50px;
      }

      .gradient-underline {
        text-decoration: none;
        color: black;
        background-image: linear-gradient(90deg, blue, purple, #f3bc26);
        background-size: 0% 2px;
        background-repeat: no-repeat;
        background-position: left bottom;
        transition: background-size 300ms;
        font-size: 15px;
      }
      .gradient-underline:hover {
        background-size: 100% 2px;
      }
    </style>
  </head>
  <body>
    <div>
      <a class="gradient-underline" href="">The best underline hover effect in CSS</a>
    </div>
  </body>
</html>

With that, this tutorial ends here.

If you find this tutorial helpful then please share it with your friends.

You Might Like This:

Our Courses:

HTML – Beginner to Advance

CSS – Beginner to Advance

Oh, hi there πŸ‘‹ It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply