Buttons

Buttons allow users to take actions, and make choices, with a single tap.

Solid Buttons

Make various solid buttons - primary, warning, danger & safe. Have a look at the demo & code reference below.

        
  <button class="btn btn-solid-primary">Primary</button>
  <button class="btn btn-solid-warning">Warning</button>
  <button class="btn btn-solid-danger">Danger</button>
  <button class="btn btn-solid-safe">Safe</button>
        
      

Outlined Buttons

Make various outlined buttons - primary, warning, danger & safe. Have a look at the demo & code reference below.

        
  <button class="btn btn-outline-primary">Primary</button>
  <button class="btn btn-outline-warning">Warning</button>
  <button class="btn btn-outline-danger">Danger</button>
  <button class="btn btn-outline-safe">Safe</button>
        
      

Linked Button

Add linked buttons in your projects that redirect to some other pages with btn & btn-link classes.

        
  <button class="btn btn-link">
    <a target="_blank" href="https://web.dev/">Linked Button</a>
  </button>
        
      

Icon Button

Add icon buttons in your projects with btn-icon class.

        
  <button class="btn btn-icon btn-solid-safe">
    <span class="material-icons"> save </span>
    Save
  </button>
        
      

Floating Action Buttons

Add floating buttons in your projects with btn-icon class.

        
  <button class="btn btn-float btn-solid-violet">
    <span class="material-icons"> add </span>
  </button>
  <button class="btn btn-float btn-solid-danger">
    <span class="material-icons"> delete </span>
  </button>