Buttons

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

Basic Example

Use primary for main actions, secondary for supporting actions, success for confirmations, danger for destructive actions, warning for caution, and info for informational actions:

HTML 
<button class="focus-btn focus-btn-primary">Primary</button>
<button class="focus-btn focus-btn-secondary">Secondary</button>
<button class="focus-btn focus-btn-success">Success</button>
<button class="focus-btn focus-btn-danger">Danger</button>
<button class="focus-btn focus-btn-warning">Warning</button>
<button class="focus-btn focus-btn-info">Info</button>

Use the .focus-btn classes on <a> elements to create link-styled buttons:

Link Button Secondary Link Outline Link
HTML 
<a href="#" class="focus-btn focus-btn-primary">Link Button</a>
<a href="#" class="focus-btn focus-btn-secondary">Secondary Link</a>
<a href="#" class="focus-btn focus-btn-success focus-btn-outline">Outline Link</a>

Outline Buttons

Use outline style for lower visual prominence or when placing buttons on colored backgrounds. Outline buttons have less visual weight than filled buttons while maintaining clear affordance:

HTML 
<button class="focus-btn focus-btn-primary focus-btn-outline">Primary</button>
<button class="focus-btn focus-btn-secondary focus-btn-outline">Secondary</button>
<button class="focus-btn focus-btn-success focus-btn-outline">Success</button>
<button class="focus-btn focus-btn-danger focus-btn-outline">Danger</button>

Button Sizes

Use large buttons for primary CTAs on landing pages or important actions. Use small buttons in dense UIs like tables, toolbars, or card footers:

HTML 
<button class="focus-btn focus-btn-primary focus-btn-sm">Small Button</button>
<button class="focus-btn focus-btn-primary">Default Button</button>
<button class="focus-btn focus-btn-primary focus-btn-lg">Large Button</button>

Buttons with Icons

Add icons inside buttons for extra visual context:

HTML 
<button class="focus-btn focus-btn-primary">
  <i class="fa fa-save"></i> Save
</button>
<button class="focus-btn focus-btn-danger">
  <i class="fa fa-trash"></i> Delete
</button>
<button class="focus-btn focus-btn-success">
  <i class="fa fa-check"></i> Confirm
</button>

Block Buttons

Create full-width "block" buttons with .focus-btn-block:

HTML 
<button class="focus-btn focus-btn-primary focus-btn-block">Block Button</button>
<button class="focus-btn focus-btn-secondary focus-btn-block">Another Block Button</button>

Disabled State

Make buttons look inactive by adding the disabled attribute:

HTML 
<button class="focus-btn focus-btn-primary" disabled>Primary</button>
<button class="focus-btn focus-btn-secondary" disabled>Secondary</button>
<button class="focus-btn focus-btn-success" disabled>Success</button>

Interactive Button Builder

Customize a button and see the code update in real-time:

HTML 
<button class="focus-btn focus-btn-primary">Button</button>

Builder Options

Variant:
Size:
Options:

CSS Classes Reference

Class Description
.focus-btn Base button class (required)
.focus-btn-primary Primary button variant (blue)
.focus-btn-secondary Secondary button variant (gray)
.focus-btn-success Success button variant (green)
.focus-btn-danger Danger button variant (red)
.focus-btn-warning Warning button variant (yellow)
.focus-btn-info Info button variant (cyan)
.focus-btn-outline Outline style (transparent background)
.focus-btn-sm Small button size
.focus-btn-lg Large button size
.focus-btn-block Full-width block button