Fluxo

Buttons #

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

Examples #

Fluxp includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

<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-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Tags #

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.

Link 
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Brand Buttons #

Brand buttons available for all button styles.

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

Outline #

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

<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-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Options #

Sizing #

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

<button type="button" class="btn btn-primary btn-sm">
    Small
</button>
<button type="button" class="btn btn-primary">
    Default
</button>
<button type="button" class="btn btn-primary btn-lg">
    Large
</button>
<button type="button" class="btn btn-primary btn-xl">
    Extra large
</button>

Animation #

<button type="button" class="btn btn-primary scale-110--on-hover">Zoom In</button>
<button type="button" class="btn btn-primary scale-90--on-hover">Zoom Out</button>
<button type="button" class="btn btn-primary translate-y-n3--on-hover">TranslateY</button>
<button type="button" class="btn btn-primary translate-x-3--on-hover">TranslateX</button>

Shapes #

<button type="button" class="btn btn-primary">
    Rounded
</button>
<button type="button" class="btn btn-primary rounded-0">
    Square
</button>
<button type="button" class="btn btn-primary rounded-pill">
    Pill
</button>

State #

<button type="button" class="btn btn-primary active">Active</button>
<button type="button" class="btn btn-secondary active">Active</button>
<button type="button" class="btn btn-primary" disabled>Disabled</button>
<button type="button" class="btn btn-secondary" disabled>Disabled</button>
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">Single toggle</button>

<button type="button" class="btn btn-primary">
    <i class="fas fa-spinner fa-spin"></i>
</button>
<button type="button" class="btn btn-secondary">
    <i class="fas fa-spinner fa-spin"></i>
</button>
<button type="button" class="btn btn-primary">
    <i class="fas fa-circle-notch fa-spin"></i>
</button>
<button type="button" class="btn btn-secondary">
    <i class="fas fa-circle-notch fa-spin"></i>
</button>

Shadow #

Fluxo has special class .btn--has-shadow for .btn-primary and .btn-secondary.

<button type="button" class="btn btn-primary btn--has-shadow">
    Primary Shadow
</button>
<button type="button" class="btn btn-secondary btn--has-shadow">
    Secondary Shadow
</button>

With Icon #

Add special class .link--right-icon or .link--left-icon and then insert the icon before/after button label.

<a href="#0" class="text-link link--left-icon text-uppercase">
  <i class="link__icon fa fa-chevron-left"></i>
  Previous Posts
</a>
<a href="#0" class="text-link link--right-icon text-uppercase">
  Next Posts
  <i class="link__icon fa fa-chevron-right"></i>
</a>
<a href="#0" class="btn btn-primary link--right-icon">
  Get Started Today
  <i class="link__icon fa fa-chevron-right"></i>
</a>
<a href="#0" class="btn btn-success link--right-icon">
  Add to Cart
  <i class="link__icon fa fa-cart-plus"></i>
</a>
<a href="#0" class="btn btn-danger link--left-icon">
  <i class="link__icon fa fa-trash-alt"></i>
  Remove item
</a>