Buttons

Form buttons and links to create Call To Actions.

2025-05-23

ITADS

Table of content

Themed buttons
With icons
Usages examples with alerts

Themed buttons

I am a link or a

I am a 
<a href="#foo" class="btn">link</a> or a
<button type="button" class="btn">button</button>

I am a 
<a href="#foo" class="btn btn-primary">link</a> or a 
<button type="button" class="btn btn-primary">button</button>

I am a 
<a href="#foo" class="btn btn-primary-light">link</a> or a 
<button type="button" class="btn btn-primary-light">button</button>

I am a 
<a href="#foo" class="btn btn-success">link</a> or a 
<button type="button" class="btn btn-success">button</button>

I am a 
<a href="#foo" class="btn btn-success-light">link</a> or a 
<button type="button" class="btn btn-success-light">button</button>

I am a 
<a href="#foo" class="btn btn-warning">link</a> or a 
<button type="button" class="btn btn-warning">button</button>

I am a 
<a href="#foo" class="btn btn-warning-light">link</a> or a 
<button type="button" class="btn btn-warning-light">button</button>

I am a 
<a href="#foo" class="btn btn-danger">link</a> or a 
<button type="button" class="btn btn-danger">button</button>

I am a 
<a href="#foo" class="btn btn-danger-light">link</a> or a 
<button type="button" class="btn btn-danger-light">button</button>

With icons

I am a link with an icon or a with an icon.

I am a 
<a href="#foo" class="btn">
    <span class="icon-play"></span> 
    link
</a>
with an icon or a 
<button type="button" class="btn btn-primary">
    <span class="icon-faders"></span>
    button
</button>
with an icon.

Usages examples with alerts

<aside>
    <p  class="alert alert-info"
        data-title="Example of an alert with info theme">
        An example of button usage into
        an alert with info theme.<br><br>
        <a href="#foo" class="btn btn-primary-light">cancel</a> 
        <a href="#foo" class="btn btn-primary">Save</a>
    </p>
</aside>
<aside>
    <p  class="alert alert-success"
        data-title="Example of an alert with success theme">
        An example of button usage into
        an alert with success theme.<br><br>
        <a href="#foo" class="btn btn-success-light">cancel</a> 
        <a href="#foo" class="btn btn-success">Save</a>
    </p>
</aside>
<aside>
    <p  class="alert alert-warning"
        data-title="Example of an alert with warning theme">
        An example of button usage into
        an alert with warning theme.<br><br>
        <a href="#foo" class="btn btn-warning-light">cancel</a> 
        <a href="#foo" class="btn btn-warning">Save</a>
    </p>
</aside>
<aside>
    <p  class="alert alert-danger"
        data-title="Example of an alert with danger theme">
        An example of button usage into
        an alert with danger theme.<br><br>
        <a href="#foo" class="btn btn-danger-light">cancel</a> 
        <a href="#foo" class="btn btn-danger">Save</a>
    </p>
</aside>