Skip to content
Related Articles

Related Articles

How to create Text Buttons using CSS ?
  • Last Updated : 15 Mar, 2021

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>
<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

 

My Personal Notes arrow_drop_up
Recommended Articles
Page :