Button colors

Bootstrap 5 Button colors component

Responsive Button colors built with Bootstrap 5. Examples of colored buttons and outline buttons. Easy to implement and customize.

Basic examples

To change the button color, just enter the color .btn-* from those given in the colors section.

Edit in sandbox 
        
            
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Primary</button>
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-secondary">Secondary</button>
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-success">Success</button>
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-danger">Danger</button>
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-warning">Warning</button>
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-info">Info</button>
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-light">Light</button>
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-dark">Dark</button>

Outline

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

In the outline buttons, we recommend adding data-mdb-ripple-color="dark" to change the color of the ripple effect. The default light color of the ripple (applied automatically to every button) may not be well visible in the case of light and outline buttons.

To learn more about the ripple effect and all the available options have a look at Ripple Docs.

Edit in sandbox 
        
            
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary" data-mdb-ripple-color="dark">Primary</button>
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-secondary" data-mdb-ripple-color="dark">Secondary</button>
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-success" data-mdb-ripple-color="dark">Success</button>
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-danger" data-mdb-ripple-color="dark">Danger</button>
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-warning" data-mdb-ripple-color="dark">Warning</button>
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-info" data-mdb-ripple-color="dark">Info</button>
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-light" data-mdb-ripple-color="dark">Light</button>
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-dark" data-mdb-ripple-color="dark">Dark</button>