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>
<!-- 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 CSSRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4