How to 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 −

Open Compiler
<!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>
Updated on: 2023-12-21T14:45:46+05:30

361 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements