How to Style Text Buttons with CSS

Introduction

Text buttons are widely used in web design for actions like submitting forms, navigating pages, or triggering events. Unlike traditional buttons with background colors, text buttons are minimalist and blend more naturally with the surrounding content. Styling text buttons with CSS allows you to enhance their appearance while keeping them simple and user-friendly.

In this tutorial, you'll learn how to style text buttons using HTML and CSS, including hover effects, transitions, and custom text styles.

Problem Statement

Create a text button that:

Looks like a clickable text link (without a background).
Includes hover effects and a smooth transition.
Can be customized in terms of color, size, and font.

Example:

Input: The user clicks on a text button.
Output: The button responds visually with hover effects, and an action is triggered (e.g., a page navigation or event).

Solution Steps

Create the Button Structure with HTML: Define the text button using a <button> or <a> element.
Style the Button with CSS: Apply custom styles to remove the default button background and create a text-only button.
Add Hover and Active Effects: Use CSS transitions to provide feedback when the user hovers over or clicks the button.

HTML and CSS Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Button Styling</title>
    <style>
        /* Step 1: Basic styles for the text button */
        .text-btn {
            background: none;
            border: none;
            color: #3498db;
            font-size: 18px;
            font-family: Arial, sans-serif;
            cursor: pointer;
            padding: 10px 20px;
            text-decoration: none; /* Removes underline for links */
            transition: color 0.3s ease, text-decoration 0.3s ease;
        }

        /* Step 2: Hover effect for text button */
        .text-btn:hover {
            color: #2980b9;
            text-decoration: underline; /* Adds underline on hover */
        }

        /* Step 3: Active effect for text button */
        .text-btn:active {
            color: #1c6d9d;
        }

        /* Optional: Make button look disabled */
        .text-btn.disabled {
            color: #aaa;
            cursor: not-allowed;
        }

    </style>
</head>
<body>

    <!-- Step 4: Create the text buttons -->
    <button class="text-btn">Submit</button>
    <button class="text-btn disabled">Disabled</button>

    <!-- Optional: Using an <a> tag for text buttons -->
    <a href="#" class="text-btn">Learn More</a>

</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: Basic Styles for the Text Button

The .text-btn class is used to create a text-only button. The background: none and border: none properties remove the default button background and border, making it appear as plain text. The color and font styles are applied to create the button's text appearance.

.text-btn {
    background: none; /* Removes button background */
    border: none; /* Removes button border */
    color: #3498db; /* Button text color */
    font-size: 18px; /* Text size */
    font-family: Arial, sans-serif; /* Font family */
    cursor: pointer; /* Pointer cursor for interactivity */
    padding: 10px 20px; /* Adds padding around the text */
    text-decoration: none; /* Removes underline for links */
    transition: color 0.3s ease, text-decoration 0.3s ease; /* Smooth transitions */
}

background: none: Removes the button's default background, making it text-only.
border: none: Removes the border, giving the button a cleaner appearance.
cursor: pointer: Changes the cursor to a pointer when hovering over the button, indicating it's clickable.
transition: color 0.3s ease: Adds a smooth transition effect when changing the text color on hover.

Step 2: Hover Effect for Text Button

When the user hovers over the button, the text color changes, and an underline appears. This provides a visual cue that the button is interactive.

.text-btn:hover {
    color: #2980b9; /* Darker blue on hover */
    text-decoration: underline; /* Adds underline when hovered */
}

color: #2980b9: Changes the text color to a darker blue when hovered.
text-decoration: underline: Adds an underline on hover to emphasize interactivity.

Step 3: Active Effect for Text Button

The :active pseudo-class is used to style the button when it's clicked. The text color darkens slightly to provide feedback to the user.

.text-btn:active {
    color: #1c6d9d; /* Darkest blue when clicked */
}

Step 4: HTML Structure for Text Buttons

The button is created using the <button> element and the .text-btn class. You can also use an <a> tag to make the button behave like a link.

<!-- Text button using <button> element -->
<button class="text-btn">Submit</button>

<!-- Text button using <a> element (link behavior) -->
<a href="#" class="text-btn">Learn More</a>

<button class="text-btn">: Creates a button with the text "Submit."
<a class="text-btn">: Creates a clickable link with the text "Learn More."

Step 5: Disabled Button (Optional)

You can create a disabled version of the button by adding a .disabled class. This styles the button with a grayed-out color and removes the pointer cursor.

.text-btn.disabled {
    color: #aaa; /* Gray color */
    cursor: not-allowed; /* Not allowed cursor */
}

Customization

Change Button Colors

You can easily change the button's text color by modifying the color property:

.text-btn {
    color: #e74c3c; /* Red text */
}

Adjust Button Size

To make the button larger or smaller, modify the font-size and padding values:

.text-btn {
    font-size: 20px; /* Larger text */
    padding: 12px 24px; /* More padding */
}

Add Icon to the Button

You can add an icon next to the text button using Font Awesome or a similar icon library:

<button class="text-btn">
    <i class="fas fa-arrow-right"></i> Next
</button>

Make sure to include the Font Awesome CDN for the icons to work:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

Animate Text on Hover

You can add a subtle animation to the text when the user hovers over the button. For example, you can use the transform property to move the text slightly:

.text-btn:hover {
    color: #2980b9;
    text-decoration: underline;
    transform: translateX(5px); /* Moves the text slightly to the right */
}

Add Background on Hover (Optional)

If you want to add a background on hover to make the text button more pronounced:

.text-btn:hover {
    background-color: rgba(0, 0, 0, 0.1); /* Light background on hover */
}

Conclusion

Styling text buttons with CSS is a great way to create minimalist, modern, and interactive buttons that blend with your website's design. By removing the default button styles and focusing on the text, you can create buttons that are lightweight and versatile. You can further enhance them with hover effects, active states, and customization to fit your needs.

Java Guides

Search This Blog