Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Style Text Buttons with CSS
As the name suggests, the text buttons are buttons with a text on it. Bootstrap includes pre-defined classes such as .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, etc. But, we can create buttons with CSS without using the Bootstrap classes. Let us see how to style the text buttons with HTML and CSS.
Buttons
The <button> element is used to set different buttons for information, success, warning and danger. These are the different button styles we will set with CSS −
<button class="Success">Success</button> <button class="Info">Info</button> <button class="Warning">Warning</button> <button class="Danger">Danger</button> <button class="Default">Default</button>
Style the buttons
The buttons are styled like this. For the buttons, the cursor property is set to pointer −
button {
border: none;
border-radius: 7px;
color: white;
font-weight: bolder;
padding: 15px;
font-size: 18px;
cursor: pointer;
}
The success button
The success button is styled with a different text color using the color property. With that, the background color will change on hovering since under the :hover selector a different background color is set −
.Success {
color: #4caf50;
}
.Success:hover {
background: #e7e7e7;
}
The information button
The info button is styled with a different text color using the color property. With that, the background color will change on hovering since under the :hover selector a different background color is set −
.Info {
color: #2196f3;
}
.Info:hover {
background: #e7e7e7;
}
The danger button
The danger button is styled with a different text color using the color property. With that, the background color will change on hovering since under the :hover selector a different background color is set −
.Danger {
color: #f44336;
}
.Danger:hover {
background: #e7e7e7;
}
The warning button
The warning button is styled with a different text color using the color property. With that, the background color will change on hovering since under the :hover selector a different background color is set −
.Warning {
color: #ff9800;
}
.Warning:hover {
background: #e7e7e7;
}
Example
The following is the code to style text buttons with CSS −
<!DOCTYPE html>
<html>
<head>
<style>
button {
border: none;
border-radius: 7px;
color: white;
font-weight: bolder;
padding: 15px;
font-size: 18px;
cursor: pointer;
}
.Success {
color: #4caf50;
}
.Success:hover {
background: #e7e7e7;
}
.Info {
color: #2196f3;
}
.Info:hover {
background: #e7e7e7;
}
.Warning {
color: #ff9800;
}
.Warning:hover {
background: #e7e7e7;
}
.Danger {
color: #f44336;
}
.Danger:hover {
background: #e7e7e7;
}
.Default {
color: black;
}
.Default:hover {
background: #e7e7e7;
}
</style>
</head>
<body>
<h1>Text Buttons Example</h1>
<button class="Success">Success</button>
<button class="Info">Info</button>
<button class="Warning">Warning</button>
<button class="Danger">Danger</button>
<button class="Default">Default</button>
</body>
</html>
338 Views
