How to create Text Buttons using CSS ?
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 “w3wiki” 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" > w3wiki </ button > <!-- Applying styling to buttons --> < style > #textButton { background: none; border: none; } #textButton:hover { background-color: green; } </ style > </ body > </ html > |
Output: