Button

Examples

<button class="button primary">
    <span>Button</span>
</button>

primary secondary info success warning danger royal highlight default dark light link

sizes

<button class="button danger tiny">
    <i class="acms-icon acms-icon-trash"></i>
    <span class="src-only">Button</span>
</button>
<button class="button secondary tiny">
    <i class="acms-icon acms-icon-edit"></i>
    <span>Button</span>
</button>
<button class="button default small">
    <i class="acms-icon acms-icon-pencil-alt"></i>
    <span>Button</span>
</button>
<button class="medium info button">
    <i class="acms-icon acms-icon-info-circle"></i>
    <span>Button</span>
</button>
<button class="button primary large">
    <i class="acms-icon acms-icon-globe"></i>
    <span>Button</span>
</button>

Button Button Button Button Button

primary secondary info success warning danger royal highlight default

roundings

<button class="button danger rounded-light">
    <span>Button</span>
</button>
<button class="button secondary rounded">
    <span>Button</span>
</button>
<button class="button default pill">
    <span>Button</span>
</button>
<button class="info button round">
    <span>Button</span>
</button>

Button Button Button Button

border-button

<button class="primary border-button button">
    <span>Button</span>
</button>

primary secondary info success warning danger royal highlight default dark light

primary secondary info royal

Button sizes for .border-button

primary secondary info success warning danger royal highlight default

button animations

<button class="border-button button primary animation">
    <span class="first content">Button Content</span>
    <span class="second content">Second Content</span>
</button>
<button class="button secondary vertical animation">
    <span class="first content">Button Content</span>
    <span class="second content">Second content</span>
</button>
<button class="button default fading animation">
    <span class="first content">Button Content</span>
    <span class="second content">Second content</span>
</button>

Button Content Second Content Button Content Second content Button Content Second content Administrator Mein Profil

icon button

<button class="info icon button">
    <i class="acms-icon acms-icon-globe"></i>
</button>
<button class="info icon button">
    <i class="acms-icon acms-icon-pencil-alt"></i>
    <span>Button</span>
</button>

Button

Inverted Background

White Button White Button

button label

<button class="button labeled right primary">
    <span class="content">Button</span>
    <span class="button-label label v2 arrow left border-label danger">Label</span>
</button>
<button class="button labeled right secondary">
    <span class="content">Button</span>
    <span class="button-label label v2 tag-label border-label primary">Label</span>
</button>
<button class="button labeled left royal">
    <span class="content">Button</span>
    <span class="button-label label v2 arrow left border-label info">Label</span>
</button>
<button class="button labeled right warning">
    <span class="content">Button</span>
    <span class="button-label label v2 arrow right border-label warning">Label</span>
</button>

Button Label Button Label Label Button Button Label

Button

Button