Buttons

Main Button

Secondary Button

Secondary Button with Icons

These icons come from the Material Design Iconic Font created by Sergey Kupletsky.

On the Right

On the Left

Danger Button

Submit Button

Button Focus

Link Buttons

Used to make anchors look and behave like a button.

Link Button (Primary) Link Button (Secondary) Link Button (Danger)

<div class="carlislesyntec example">
    <button class="btn btn-primary" type="button">Main Button</button>
</div>
<div class="carlislesyntec example">
    <button class="btn btn-primary hover" type="button">Hover</button>
    <button class="btn btn-primary active" type="button">Active</button>
    <button class="btn btn-primary" type="button" disabled>Disabled</button>
</div>

<div class="carlislesyntec example">
    <button class="btn btn-secondary" type="button">Secondary Button</button>
</div>
<div class="carlislesyntec example">
    <button class="btn btn-secondary hover" type="button">Hover</button>
    <button class="btn btn-secondary active" type="button">Active</button>
    <button class="btn btn-secondary" type="button" disabled>Disabled</button>
</div>

<div class="carlislesyntec example clear-margin-top">
    <button class="btn btn-secondary icon right" type="button">Secondary Button <i class="zmdi zmdi-chevron-right zmdi-hc-3x"></i></button>
</div>
<div class="carlislesyntec example clear-margin-top">
    <button class="btn btn-secondary icon left" type="button">Secondary Button <i class="zmdi zmdi-coffee zmdi-hc-2x"></i></button>
</div>

<div class="carlislesyntec example">
    <button class="btn btn-tertiary" type="button">Danger Button</button>
</div>
<div class="carlislesyntec example">
    <button class="btn btn-tertiary hover" type="button">Hover</button>
    <button class="btn btn-tertiary active" type="button">Active</button>
    <button class="btn btn-tertiary" type="button" disabled>Disabled</button>
</div>

<div class="carlislesyntec example">
    <button class="btn btn-submit" type="submit">Submit Button</button>
</div>
<div class="carlislesyntec example">
    <button class="btn btn-submit hover" type="submit">Hover</button>
    <button class="btn btn-submit active" type="submit">Active</button>
    <button class="btn btn-submit" type="submit" disabled>Disabled</button>
</div>

<div class="carlislesyntec example">
    <button class="btn btn-primary focus" type="button">Main Button</button>
    <button class="btn btn-secondary focus" type="button">Secondary Button</button>
    <button class="btn btn-tertiary focus" type="button">Danger Button</button>
</div>

<h3>Link Buttons</h3>
<p>Used to make anchors look and behave like a button.</p>
<div class="carlislesyntec example">
    <a href="#do-nothing" class="btn btn-primary btn-link">Link Button (Primary)</a>
    <a href="#do-nothing" class="btn btn-secondary btn-link">Link Button (Secondary)</a>
    <a href="#do-nothing" class="btn btn-tertiary btn-link">Link Button (Danger)</a>
</div>

Main Button

Use main buttons for actions that route the user outside of the current page.
Use title case for button labels.
Add icons to left or right of main button in white.

Secondary Button

Use secondary buttons for actions that route the user within the current page.
Use title case for button labels.
Add icons to left or right of secondary button in white.

Disabled Button

Use when you need to select multiple items to proceed to the next step and none are selected.

Danger Button

Use for removal, deletion, etc.

Submit Button

Use for actual submission of a form.