How to Add Text Underline on Hover for Button in CSS

Author:

Introduction

Adding an underline effect to button text when hovered is a simple yet effective way to enhance user interaction. This visual feedback informs users that the button is clickable. The :hover pseudo-class in CSS allows you to apply styles like underlining the button text when the user hovers over it.

In this tutorial, you'll learn how to add an underline to button text on hover using CSS.

Problem Statement

Create CSS code that:

  • Styles a button.
  • Adds an underline effect to the button text when hovered.

Example:

  • Input: A button with the text "Hover Me".
  • Output: A button that underlines its text when hovered.

Solution Steps

  1. Use the <button> Element: Create a button using HTML.
  2. Style the Button: Define the appearance of the button using CSS.
  3. Add Hover Underline Effect: Apply the text-decoration: underline property on hover.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Underline on Hover Button</title>
    <style>
        /* Step 1: Style the button */
        .underline-button {
            font-size: 1.5rem;
            color: white;
            background-color: #3498db;
            padding: 12px 30px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none; /* Remove underline initially */
        }

        /* Step 2: Add underline effect on hover */
        .underline-button:hover {
            text-decoration: underline; /* Underline text on hover */
        }
    </style>
</head>
<body>

    <div style="text-align: center; margin-top: 100px;">
        <button class="underline-button">Hover Me</button>
    </div>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Explanation

Step 1: Style the Button

The .underline-button class is used to style the button with basic properties like font size, color, background color, and padding.

.underline-button {
    font-size: 1.5rem;
    color: white;
    background-color: #3498db; /* Blue background */
    padding: 12px 30px; /* Padding inside the button */
    border: none;
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor */
    transition: all 0.3s ease; /* Smooth transition effect */
    text-decoration: none; /* Ensure there is no underline by default */
}

  • text-decoration: none: Ensures the text has no underline by default.

  • transition: all 0.3s ease: Ensures a smooth transition when the hover effect is applied.

Step 2: Add Hover Underline Effect

The :hover pseudo-class applies an underline to the button's text when the user hovers over it.

.underline-button:hover {
    text-decoration: underline; /* Underline the text when hovered */
}
  • text-decoration: underline: Adds the underline to the button text when it is hovered.

Customization

Change Text Color on Hover

You can also change the text color on hover along with the underline:

.underline-button:hover {
    text-decoration: underline;
    color: yellow; /* Change text color on hover */
}

Change the Button Background on the Hover

To make the button even more interactive, you can change the background color when hovered:

.underline-button:hover {
    text-decoration: underline;
    background-color: #2980b9; /* Darker blue background on hover */
}

Conclusion

You can add an underline effect to button text on hover using the text-decoration: underline property in combination with the :hover pseudo-class. This simple effect improves interactivity and user feedback, making the button feel more engaging.

Comments

Post a Comment

Leave Comment