How to Style Text Buttons using CSS? Last Updated : 15 May, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report Text buttons are buttons that consist only of text without any additional background or border styling. They are commonly used for simple actions or navigation elements in a website or web application. Table of Content Basic StylingHover EffectsBasic StylingIn basic CSS we can style text buttons using properties such as font size, color, and text decoration. These properties allow us to customize the appearance of the text within the button to make it more visually appealing. Example: In the below example we have added basic styling such as font-size, color, underlining to text buttons. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> h1 { color: green; } .text-button { font-size: 16px; color: #333; text-decoration: none; border: none; background: none; color: blue; cursor: pointer; text-decoration: underline; } </style> </head> <body> <h1>Welcome to GeeksForGeeks</h1> <h3>Adding basic styling to text buttons</h3> <a href="#" class="text-button">Click me</a> </body> </html> Output: Hover EffectsAdding Hover effects can include changes in color, text decoration, or other visual enhancements to indicate that the button is clickable. To add a hover effect to a text button, we can use the :hover pseudo-class in CSS. This pseudo-class allows us to define styles that will be applied when the button is hovered over Example: In this example we are adding hover effect to text button. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Text Button Styling</title> <style> h1 { color: green; } .text-button { text-decoration: none; display: inline-block; transition: all 0.3s ease; } .text-button:hover { color: #fff; background-color: green; text-decoration: underline; } </style> </head> <body> <h1>Welcome to GeeksForGeeks</h1> <h3>Adding Hover effect to text buttons</h3> <p>Visit to <a class="text-button"> GeekForGeeks </a> for learning </p> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Style Text Buttons using CSS? G ghuleyogesh Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to style outline buttons using CSS ? This article will explore how to style outline buttons using CSS. The Outline buttons give a clean visual appearance. The clear and visible border ensures the clear separation from the background and other elements and enhances readability. We can achieve the outline buttons effect in two different 3 min read How to Style Round Buttons using CSS? Round buttons are circular buttons used on websites. They usually have icons or text for actions. To style round buttons using CSS, set their width and height equal, use border-radius: 50% for a circular shape, and add colors and hover effects.Add Style To Round Buttons Using CSSMake a basic structu 2 min read 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 H 2 min read How to style block buttons (full-width) using CSS ? In this article, we will explore how to style block buttons with full width using CSS. Making buttons stand out on a website is crucial. Such types of buttons provide responsiveness to the web page that works well on various devices. Styling buttons with clear words, appealing colors, and effects, c 3 min read How to add a button to an image using CSS ? In the article, we will explore how to add a button to an image using CSS. Adding a button to an image is often used to create an overlay effect to a button on an image that provides an interactive and engaging layout on a webpage. We can achieve this effect with the combination of various CSS Prope 4 min read Like