Buttons

Button Colors

The following button colors are available:

primary
info
success
danger
warning
default
secondary
purple
pink
brown
yellow
dark
white
black
light
grey
lightgrey
blue
green
red
orange

html

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

👉 You can modify button values, add new colors or remove a color by modifying $button-colors in scss/_variables.scss and rebuilding ace.css

Light Buttons

The above button colors are available as light and lighter variations, although you can disable them when building ace.css by editing scss/ace-features.scss and setting $btn-light-style to false.

html

<button type="button" class="btn btn-light-primary"> Light Primary </button>
<button type="button" class="btn btn-lighter-primary"> Lighter Primary </button>

Different Colors for Different States

You can use different colors when a button is hovered or is .active/:active using the -h- and -a- class names.
For example .btn-h-primary means button should have primary color when hovered and .btn-a-success means button should have success color when :active/.active

This can be used with default, outline and light buttons:

html

<button type="button" class="btn btn-default btn-h-primary">
    Primary on Hover
</button> <!-- but sill default on :active -->

<button type="button" class="btn btn-secondary btn-a-success">
    Success when Active
</button> <!-- but still secondary on :hover -->

<button type="button" class="btn btn-grey btn-h-outline-info btn-a-lighter-primary">
    Outline Info on Hover, Lighter Primary when Active
</button>

Different Text Colors

You can have a different button text color in different states using -text- class names.
For example .btn-text-info means the button's text should have info color by default and .btn-text-a-success means button's text should have success color when :active/.active

html

<button type="button" class="btn btn-outline-lightgrey btn-text-info border-2 text-600 btn-h-info btn-a-info px-4 radius-round">
  Click
</button>
<!-- 
  Lightgrey 2px borders with *info* colored bold text.
  Button background becomes *info* on hover and active
-->

.btn-h-bold , .btn-f-bold, .btn-a-bold make a button's text bold when hovered focused or when .active (not :active)

White/Transparent Border & Background

Some times you want button borders become visible only when mouse hovers them. You can use the following classes:

btn-brc-tp : Button border will be transparent when not hovered and not active
btn-h-brc-tp : Button border will be transparent when hovered
btn-a-brc-tp : Button border will be transparent when active
btn-brc-white , btn-h-brc-white and btn-a-brc-white are similar as above
btn-bgc-tp , btn-h-bgc-tp , btn-a-bgc-tp , btn-bgc-white , btn-h-bgc-white and btn-a-bgc-white are similar for button background color
btn-tp , btn-h-tp , btn-a-tp are similar and make both background and border transparent in different states

html

<button type="button" class="btn btn-outline-danger btn-h-outline-danger btn-brc-tp btn-bold">
  Invisible Borders
</button>

<button type="button" class="btn btn-outline-danger btn-h-bgc-tp btn-h-text-success btn-bold">
  Transparent Background On Hover
</button>

<button type="button" class="btn btn-light-purple btn-tp">
  Transparent Background and Border by Default
</button>

Focus states

You can add different focus state styling to your buttons, , although you can disable them when building ace.css by editing scss/ace-features.scss and setting $btn-focus-states to false.
The following are available:

fs--shadow adds a shadow when button is focused
fs--outline adds a dotted outline when button is focused
fs--solid adds a solid outline when focused
fs--dashded adds a dashed outline when focused
fs--raised adds a raised effect when focused

html

<button type="button" class="btn btn-md btn-default fs--shadow">
    Shadow highlight on focus
</button>

<button type="button" class="btn btn-md btn-outline-info fs--outline">
    Outline on focus
</button>

<button type="button" class="btn btn-md btn-purple fs--raised">
    Raised on focus
</button>

Sliding Text

The following classes are available for sliding button texts and icons.
You can disable them when building ace.css by setting $btn-sliding-text to false in scss/ace-features.scss

Horizontal sliding

A button with .btn-text-slide class that has .btn-text-1 and .btn-text-2 children:

html

<button type="button" class="btn btn-info btn-text-slide"> 
    <span class="btn-text-1"> This will slide out on hover</span>
    <span class="btn-text-2"> This will slide in on hover</span>
</button>

For .btn-text-1 and .btn-text-2 you can use the following classes to specify direction:

.move-up
.move-down
.move-left
.move-right

html

<button type="button" class="btn btn-success btn-text-slide"> 
    <span class="btn-text-1 move-right"> moves out from right </span>
    <span class="btn-text-2 move-right"> moves in towards right </span>
</button>

Horizontal pushing

A .btn-text-slide-x button, has a .btn-text-2 child that appears and pushes siblings to right or left, when hovered:

html

<button class="btn btn-info btn-text-slide-x" style="width: 8rem;">
    Continue<i class="ml-2 btn-text-2 move-right fa fa-arrow-right"></i>
</button>

In this example the fa-arrow-right icon appears when button is hovered. If the button does not have a fixed width, its width will be increased as the arrow appears.

Note how there's no space character between "Continue" text and the icon.
This makes sure our "Continue" text is completely centered in the button when the arrow icon is hidden.

Vertical pushing

A .btn-text-slide-y button has both .btn-text-1 and .btn-text-2 children
- Adding .direction-reverse to button element will reverse motion directions
- Adding .btn-text-fade to .btn-text-2 will make it fade in instead of slide in

👉 In .btn-text-slide-y moving is done by CSS transforms and therefore elements are not actually pushed like in .btn-text-slide-x.
Therefore you may need to add extra padding/margin classes to the button or to the .btn-text-1 element

html

<button class="btn btn-danger btn-text-slide-y px-4">
    <i class="btn-text-1 my-2 fa fa-trash-alt text-150"></i>
    <b class="btn-text-2 text-90">DELETE?</b>
</button>

Button Sizing

The following classes are available for button sizing:

btn-xs
btn-sm
btn-lg
btn-block
btn-app for large buttons

You can also change button sizes by applying different padding or text size classes:

html

<button class="btn btn-sm btn-default px-45">
  Wider
</button>

<button class="btn btn-info px-4 py-3 text-120">
  More padding and larger text
</button>

<button type="button" class="btn btn-app btn-primary">
  <i class="d-block mb-2 fa fa-edit text-150"></i>
  Large
</button>

Extra Classes/Styling

The following extra optional classes are available:

btn-bold makes the button look bold with a thicker border and uppercase text
btn-a-b2 makes button's border 2px when .active
btn-a-bb2 and btn-a-bt2 make button's bottom/top border 2px when .active
btn-text-pale is for a pale text button. There is also .btn-h-text-pale .btn-f-text-pale and .btn-a-text-pale
btn-raised adds a little raised effect. btn-h-raised adds raised effect on hover and btn-a-raised adds raised when active:

html

<button class="btn btn-info btn-h-raised">
    Raised effect on hover
</button>

Use action-btn on a button or action-buttons on the parent, to make buttons a bit larger (scaled) when hovered:

html

<button class="btn btn-outline-default action-btn">
  Action Button
</button>

<!-- or the following -->
<div class="action-buttons">
  <button class="btn btn-outline-info">
    1
  </button>

  <button class="btn btn-outline-info">
    2
  </button>

  <button class="btn btn-outline-info">
    3
  </button>
</div>

You can also apply the scaling effect by using dh-zoom-1 dh-zoom-2 etc classes

You can also add custom styling by using miscellaneous classes:

html

<button class="btn btn-outline-info radius-round px-4 border-b-2">
   Round button with 2px bottom border
</button>

Button Groups

There is one extra .btn-group-faded class.
When applied, the non-active (non-selected) and non-hovered buttons of a button group will be somewhat faded.

html

<div class="btn-group btn-group-faded">
  <button class="btn btn-info active">
    1
  </button>

  <button class="btn btn-info">
    2 <!-- faded -->
  </button>

  <button class="btn btn-info">
    3 <!-- faded -->
  </button>
</div>

Also for an example see Button Groups

I'm not sure why but since BS 4.5, label elements don't always work as expected inside button groups.
So I used DIV with role="button" instead.

Badges

In addition to Bootstrap badge classes you can use different background, border and text colors for badges:

html

<span class="badge bgc-purple-d1 text-white">
    Purple
</span>

<span class="badge badge-pill bgc-secondary-l3 border-1 brc-secondary-m2 text-secondary-d3">
    Rounded
</span>

You can also add arrows to badges which you can disable by setting $badge-arrow to false in in scss/ace-features.scss and rebuilding ace.css:

html

<span class="badge badge-success arrowed arrowed-right">
    Arrows on both sides
</span>
<span class="badge badge-primary arrowed-in arrowed-in-right">
    Arrows on both sides
</span>

There are also some badge sizing classes:

badge-sm
badge-lg

badge-dot is a small circle:

html

<span class="badge badge-dot badge-danger position-tr"></span>

Pagination

In addition to default pagination, you can use .btn claseses for more color variations, but you should apply the .active class to the .page-link element not the .page-item:

html

<ul class="pagination align-items-center">
  <li class="page-item mr-2px">
      <a class="page-link btn btn-sm py-25 px-3 border-0 radius-l-round text-600 btn-light-secondary" href="#">
          Prev
      </a>
  </li>

  <li class="page-item mr-2px">
      <a class="page-link btn py-25 px-3 btn btn-sm border-0 radius-0 text-600 btn-light-secondary btn-h-light-green btn-a-light-green" href="#">
          1
      </a>
  </li>

  <li class="page-item mr-2px">
      <a class="active page-link btn py-25 px-3 btn btn-sm border-0 radius-0 text-600 btn-light-secondary btn-h-light-green btn-a-green" href="#">
          2
      </a>
  </li>

  <li class="page-item  mr-2px disabled">
      <a class="btn  page-link border-0 py-25 px-3 btn btn-sm bgc-white" href="#">…</a>
  </li>

  <li class="page-item mr-2px">
      <a class="page-link btn py-25 px-3 btn btn-sm border-0 radius-0 text-600 btn-light-secondary btn-h-light-green btn-a-light-green" href="#">
          8
      </a>
  </li>

  <li class="page-item mr-2px">
      <a class="page-link btn py-25 px-3 btn btn-sm border-0 radius-0 text-600 btn-light-secondary btn-h-light-green btn-a-light-green" href="#">
          9
      </a>
  </li>

  <li class="page-item">
      <a class="page-link btn py-25 px-3 btn btn-sm border-0 radius-r-round text-600 btn-light-secondary" href="#">
          Next
      </a>
  </li>
</ul>

See Pagination page in demo for more examples

You can also add .pagination-lg to the .pagination element.

In small devices if the pagination buttons do not fit inside screen width you can either use .flex-wrap to move some buttons below or use .nav-tabs-scroll + .is-scrollable classes to make them scrollable:
Scrollable Pagination

html

<ul class="pagination flex-wrap flex-md-nowrap">
  ...
</ul>
<!-- vs -->
<ul class="pagination nav-tabs-scroll is-scrollable">
  ...
</ul>