Open In App

How to create Text Buttons using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to see how to create text buttons using CSS.

The text button is a button that appears to be text but acts as a button if we press it. Text buttons are different from anchor tags even if they might look similar. To create text buttons first, we create simple buttons in HTML using a button tag. After creating the button we apply CSS and change its properties to make it look like a text button. To make it look like a text button we remove its default border and background. To identify that it is a button we give hover color so, when we move our cursor over it, it changes its color from transparent to green.

Syntax:

#textButton{
    background:none; 
    border:none;     
}
#textButton:hover{
    background-color: green;
}

Example: The following demonstrates the above approach. We created an HTML file, and we created a button with the name “GeeksforGeeks” using a button tag with id as “textButton”. After that, we created a style tag in which we selected that button using its id and removed its background and border properties by setting them to none. We added a hover background color so that users can identify our button. 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
        How to create Text Buttons using CSS
    </title>
</head>
 
<body>
    <h2>Welcome To GFG</h2>
    <h1>Text buttons using css</h1>
    <!-- creating buttons -->
    <button id="textButton">
        GeeksforGeeks
    </button>
 
    <!-- Applying styling to buttons -->
    <style>
        #textButton {
            background: none;
            border: none;
        }
 
        #textButton:hover {
            background-color: green;
        }
    </style>
</body>
</html>


Output: 

text buttons using CSS

 


Last Updated : 08 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads