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.
Solid Buttons
<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>Outline Buttons
<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>Special Buttons
You can use the classes .btn-facebook, .btn-twitter, .btn-google-plus, .btn-github etc. to color buttons with their corresponding brand colors.
<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>Play Buttons
Buttons Group
Group a series of buttons together on a single line with the button group. Wrap a series of buttons with .btn in .btn-group
<div class="btn-group" role="group" aria-label="Basic outlined example">
<button class="btn-outline-primary btn">.btn-outline-primary</button>
<button class="btn-outline-primary btn">.btn-outline-primary</button>
<button class="btn-outline-primary btn">.btn-outline-primary</button>
</div>