Button

Buttons can be used to make your web page interactive to your user. You can use them to take user action.

Filled Primary Buttons

                    
<button class="btn">Default</button>
<button class="btn btn-error-solid">Error</button>
<button class="btn btn-primary-solid">Primary</button>
<button class="btn btn-secondary-solid">Secondary</button>
<button class="btn btn-success-solid">Success</button>

Outlined Primary Buttons

                    
<button class="btn btn-error-outline">Error</button>
<button class="btn btn-primary-outline">Primary</button>
<button class="btn btn-secondary-outline">Secondary</button>
<button class="btn btn-success-outline">Success</button>

Link Button

                      
<a href="#">
  <button class="btn btn-primary-solid btn-rounded">Link</button>
</a>
<a href="#">
  <button class="btn btn-primary-outline btn-rounded">Link</button>
</a>

Icon Button

                      
<button class="btn btn-error-solid btn-squared">
  <i class="fas fa-door-open"></i> Log In
</button>
<button class="btn btn-error-outline btn-squared">
  <i class="fas fa-door-open"></i> Log In
</button>

Floating Button

                      
<a href="#">
  <button class="btn-floating">
    <i class="fas fa-arrow-up"></i>
  </button>
</a>