How to create Text Buttons using CSS ?
Last Updated :
08 Jun, 2023
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 >
< button id = "textButton" >
GeeksforGeeks
</ button >
< style >
#textButton {
background: none;
border: none;
}
#textButton:hover {
background-color: green;
}
</ style >
</ body >
</ html >
|
Output:
text buttons using CSS
Share your thoughts in the comments
Please Login to comment...