Buttons

Buttons Colors

Elixir use .btn class for default button style. Customize the color of a button using .btn-* and .btn-outline-*. You can use the following classes.

<a class="btn-primary btn" href="#!">.btn-primary</a>
<a class="btn-secondary btn" href="#!">.btn-secondary</a>
<a class="btn-success btn" href="#!">.btn-success</a>
<a class="btn-info btn" href="#!">.btn-info</a>
<a class="btn-warning btn" href="#!">.btn-warning</a>
<a class="btn-danger btn" href="#!">.btn-danger</a>
<a class="btn-light btn" href="#!">.btn-light</a>
<a class="btn-dark btn" href="#!">.btn-dark</a>

<a class="btn-outline-primary btn" href="#!">.btn-outline-primary</a>
<a class="btn-outline-secondary btn" href="#!">.btn-outline-secondary</a>
<a class="btn-outline-success btn" href="#!">.btn-outline-success</a>
<a class="btn-outline-info btn" href="#!">.btn-outline-info</a>
<a class="btn-outline-warning btn" href="#!">.btn-outline-warning</a>
<a class="btn-outline-danger btn" href="#!">.btn-outline-danger</a>
<a class="btn-outline-light btn" href="#!">.btn-outline-light</a>
<a class="btn-outline-dark btn" href="#!">.btn-outline-dark</a>

<a class="btn-light btn" href="#!">.btn-outline-light</a>
<a class="btn-outline-light btn" href="#!">.btn-outline-outline-light</a>
<a class="btn-outline-warning btn" href="#!">.btn-outline-outline-warning</a>

Buttons Sizes

Customize the size of a button using .btn-sm and .btn-lg

<a class="btn-sm btn btn-outline-primary" href="#!">.btn-sm</a>
<a class="btn btn-outline-primary" href="#!">.btn</a>
<a class="btn-lg btn btn-outline-primary" href="#!">.btn-lg</a>

Buttons Shapes

Customize the shape of a button using .btn and .rounded-pill

<a class="btn btn-primary" href="#!">.btn</a>
<a class="btn btn-primary rounded-pill" href="#!">.rounded-pill</a>

Buttons with Icon

Use .btn-icon-left or .btn-icon-right class for the icon position. For outline button, use .btn-outline-* . To make capsule like button, you can use.btn-capsule class.

<a class="btn-primary btn-icon-left btn btn-icon" href="#!">
  <span class="btn-icon-wrapper">
	<span class="fab fa-gitlab"></span>
  </span>.btn-icon</a>
<a class="btn-primary btn-icon-right btn btn-icon" href="#!">
  <span class="btn-icon-wrapper">
	<span class="fab fa-gitlab"></span>
  </span>.btn-icon</a>
<a class="btn-outline-primary btn-icon-left btn btn-icon" href="#!">
  <span class="btn-icon-wrapper">
	<span class="fab fa-gitlab"></span>
  </span>.btn-icon</a>
<a class="btn-outline-primary btn-icon-right btn btn-icon" href="#!">
  <span class="btn-icon-wrapper">
	<span class="fab fa-gitlab"></span>
  </span>.btn-icon</a>
<a class="btn-primary btn-icon-left btn btn-icon rounded-pill" href="#!">
  <span class="btn-icon-wrapper">
	<span class="fab fa-gitlab"></span>
  </span>.btn-icon
</a>
<a class="btn-primary btn-icon-right btn btn-icon rounded-pill" href="#!">
  <span class="btn-icon-wrapper">
	<span class="fab fa-gitlab"></span>
  </span>.btn-icon
</a>
<a class="btn-outline-primary btn-icon-left btn btn-icon rounded-pill" href="#!">
  <span class="btn-icon-wrapper">
	<span class="fab fa-gitlab"></span>
  </span>.btn-icon
</a>
<a class="btn-outline-primary btn-icon-right btn btn-icon rounded-pill" href="#!">
  <span class="btn-icon-wrapper">
	<span class="fab fa-gitlab"></span>
  </span>.btn-icon
</a>

<a class="btn-facebook btn btn-icon btn-icon-left" href="#!">
  <span class="btn-icon-wrapper">
	<span class="fa-facebook-f fab"></span>
  </span>Join Facebook
</a>
<a class="btn-twitter btn btn-icon btn-icon-left" href="#!">
  <span class="btn-icon-wrapper">
	<span class="fa-twitter fab"></span>
  </span>Join Twitter
</a>
<a class="btn-google-plus btn btn-icon btn-icon-left" href="#!">
  <span class="btn-icon-wrapper">
	<span class="fa-google-plus-g fab"></span>
  </span>Join Google Plus
</a>
<a class="btn-github btn btn-icon btn-icon-left" href="#!">
  <span class="btn-icon-wrapper">
	<span class="fa-github fab"></span>
  </span>Join Github
</a>