Buttons

Use Front's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Usage 

                        
                          <button type="button" class="btn btn-primary">Primary</button>

Button types

Use .btn-*, .btn-outline-*, .btn-soft-*, .btn-ghost-* classes to change the visual style of the button.

                        
                          <button type="button" class="btn btn-primary">Primary</button>
                          <button type="button" class="btn btn-outline-primary">Outline</button>
                          <button type="button" class="btn btn-soft-primary">Soft</button>
                          <button type="button" class="btn btn-ghost-primary">Ghost</button>
                          <button type="button" class="btn btn-link">link</button>

Button pilled 

                        
                          <button type="button" class="btn btn-primary btn-pill">Primary</button>

Color variants 

                        
                          <button type="button" class="btn btn-primary">Primary</button>
                          <button type="button" class="btn btn-secondary">Secondary</button>
                          <button type="button" class="btn btn-success">Success</button>
                          <button type="button" class="btn btn-danger">Danger</button>
                          <button type="button" class="btn btn-warning">Warning</button>
                          <button type="button" class="btn btn-info">Info</button>
                          <button type="button" class="btn btn-indigo">Indigo</button>
                          <button type="button" class="btn btn-light">Light</button>
                          <button type="button" class="btn btn-dark">Dark</button>
                          <button type="button" class="btn btn-navy">Navy</button>

Outline buttons

Use .btn-outline-*

                        
                          <button type="button" class="btn btn-outline-primary">Primary</button>
                          <button type="button" class="btn btn-outline-secondary">Secondary</button>
                          <button type="button" class="btn btn-outline-success">Success</button>
                          <button type="button" class="btn btn-outline-danger">Danger</button>
                          <button type="button" class="btn btn-outline-warning">Warning</button>
                          <button type="button" class="btn btn-outline-info">Info</button>
                          <button type="button" class="btn btn-outline-indigo">Indigo</button>
                          <button type="button" class="btn btn-outline-light">Light</button>
                          <button type="button" class="btn btn-outline-dark">Dark</button>
                          <button type="button" class="btn btn-outline-navy">Navy</button>

Soft buttons

Use .btn-soft-*

                        
                          <button type="button" class="btn btn-soft-primary">Primary</button>
                          <button type="button" class="btn btn-soft-secondary">Secondary</button>
                          <button type="button" class="btn btn-soft-success">Success</button>
                          <button type="button" class="btn btn-soft-danger">Danger</button>
                          <button type="button" class="btn btn-soft-warning">Warning</button>
                          <button type="button" class="btn btn-soft-info">Info</button>
                          <button type="button" class="btn btn-soft-indigo">Indigo</button>
                          <button type="button" class="btn btn-soft-light">Light</button>
                          <button type="button" class="btn btn-soft-dark">Dark</button>
                          <button type="button" class="btn btn-soft-navy">Navy</button>

Ghost buttons

Use .btn-ghost-*

                        
                          <button type="button" class="btn btn-ghost-primary">Primary</button>
                          <button type="button" class="btn btn-ghost-secondary">Secondary</button>
                          <button type="button" class="btn btn-ghost-success">Success</button>
                          <button type="button" class="btn btn-ghost-danger">Danger</button>
                          <button type="button" class="btn btn-ghost-warning">Warning</button>
                          <button type="button" class="btn btn-ghost-info">Info</button>
                          <button type="button" class="btn btn-ghost-indigo">Indigo</button>
                          <button type="button" class="btn btn-ghost-light">Light</button>
                          <button type="button" class="btn btn-ghost-dark">Dark</button>
                          <button type="button" class="btn btn-ghost-navy">Navy</button>

Button icons 

                        
                          <button type="button" class="btn btn-primary">
                            Add to Cart
                            <i class="fas fa-shopping-cart ml-1"></i>
                          </button>
                        
                      
                        
                          <button type="button" class="btn btn-primary btn-icon">
                            <i class="fas fa-eye"></i>
                          </button>
                          <button type="button" class="btn btn-primary btn-icon">
                            <i class="fas fa-plus"></i>
                          </button>
                          <button type="button" class="btn btn-primary btn-icon">
                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                          </button>

Button group 

                        
                          <div class="btn-group btn-group-toggle" data-toggle="buttons">
                            <label class="btn btn-primary active">
                              <input type="radio" name="options" id="option1" checked> Active
                            </label>
                            <label class="btn btn-primary">
                              <input type="radio" name="options" id="option2"> Radio
                            </label>
                            <label class="btn btn-primary">
                              <input type="radio" name="options" id="option3"> Radio
                            </label>
                          </div>

Button sizes

Fancy larger smaller or extra smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

                        
                          <button type="button" class="btn btn-primary btn-pill">Primary</button>
                        
                      
                        
                          <button type="button" class="btn btn-primary btn-icon btn-lg">
                            <i class="fas fa-shopping-cart"></i>
                          </button>
                          <button type="button" class="btn btn-primary btn-icon">
                            <i class="fas fa-shopping-cart"></i>
                          </button>
                          <button type="button" class="btn btn-primary btn-icon btn-sm">
                            <i class="fas fa-shopping-cart"></i>
                          </button>
                          <button type="button" class="btn btn-primary btn-icon btn-xs">
                            <i class="fas fa-shopping-cart"></i>
                          </button>
Contact Us