How to Style Text Buttons using CSS?

Text buttons are buttons that consist only of text without any additional background or border styling. They are commonly used for simple actions or navigation elements in a website or web application.

Table of Content

Basic Styling
Hover Effects

In basic CSS we can style text buttons using properties such as font size, color, and text decoration. These properties allow us to customize the appearance of the text within the button to make it more visually appealing.

Example: In the below example we have added basic styling such as font-size, color, underlining to text buttons.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <style>
        h1 {
            color: green;
        }

        .text-button {
            font-size: 16px;
            color: #333;
            text-decoration: none;
            border: none;
            background: none;
            color: blue;
            cursor: pointer;
            text-decoration: underline;

        }
    </style>
</head>

<body>
    <h1>Welcome to w3wiki</h1>
    <h3>Adding basic styling to text buttons</h3>
    <a href="#" class="text-button">Click me</a>
</body>

</html>

Output:

Adding Hover effects can include changes in color, text decoration, or other visual enhancements to indicate that the button is clickable. To add a hover effect to a text button, we can use the :hover pseudo-class in CSS. This pseudo-class allows us to define styles that will be applied when the button is hovered over

Example: In this example we are adding hover effect to text button.

HTML

<!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>
        h1 {
            color: green;
        }

        .text-button {
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
        }

        .text-button:hover {
            color: #fff;
            background-color: green;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <h1>Welcome to w3wiki</h1>
    <h3>Adding Hover effect to text buttons</h3>
    <p>Visit to 
          <a class="text-button">
              GeekForBeginner
          </a> for learning
      </p>
</body>

</html>

Output:

Basic Styling

Hover Effects