← Back to demos

Buttons

All button styles below are provided by fwtoolkit/css/buttons.css. No JavaScript is required.

Base button

Disabled class
<button class="fw-button">Default</button>
<button class="fw-button" disabled>Disabled attribute</button>
<span class="fw-button fw-disabled">Disabled class</span>

Colours

<button class="fw-button fw-light">Light</button>
<button class="fw-button fw-dark">Dark</button>
<button class="fw-button fw-orange">Orange</button>
<button class="fw-button fw-green">Green</button>
<button class="fw-button fw-white">White</button>

Sizes

<button class="fw-button fw-large fw-dark">Large</button>
<button class="fw-button fw-dark">Default</button>
<button class="fw-button fw-small fw-dark">Small</button>

Modifiers

<button class="fw-button fw-dark fw-uppercase">Uppercase</button>
<button class="fw-button fw-dark fw-smallcaps">Smallcaps</button>
<button class="fw-button fw-dark fw-square"><i class="fa fa-check"></i></button>

Dropdown

<button class="fw-button fw-large fw-light fw-dropdown">Dropdown</button>

Social accounts

<button class="fw-button fw-socialaccount fw-facebook">
  <span><i class="fab fa-facebook-f"></i></span> Facebook
</button>