Button

TIP

Use the <button type="button"> tag whenever possible instead of links!

Default Button

.-c-btn

Link-Button

hide code

<div class="h-flex h-space-between">
    <a href="#" class="c-btn">Link-Button</a><br/>
    <button class="c-btn">Button</button>
    <input type="submit" class="c-btn -secondary -icon-right -icon-arrow" value="Input Type: Submit" />
    <input type="button" class="c-btn -secondary" value="Input Type: Button"/>
</div>

Button Modifiers

TIP

See general Helper Classes for more examples.

.c-btn[.-small, .h-fullwidth.h-block]

hide code

<button type="button" class="c-btn -small">-small</button>
<button type="button" class="c-btn -small h-fullwidth h-block m-t-m">
    <span class="c-btn__text">h-fullwidth h-block</span>
</button>

Button Colors

.-c-btn[.-primary, .-primarylight, .-secondary, .-light, .-inverted]

-primary -primarylight -secondary -light -inverted

hide code

<div class="h-flex h-space-between">
    <a href="" class="c-btn -small -primary">-primary</a>
    <a href="" class="c-btn -small -primarylight">-primarylight</a>
    <a href="" class="c-btn -small -secondary">-secondary</a>
    <a href="" class="c-btn -small -light">-light</a>
    <a href="" class="c-btn -small -inverted h-inline-block">-inverted</a>
</div>

Button States

.-c-btn[.-success, .-warning, .-error]

-success -warning -error

hide code

<div class="h-flex h-space-around">
    <a href="" class="c-btn -success">-success</a>
    <a href="" class="c-btn -warning">-warning</a>
    <a href="" class="c-btn -error">-error</a>
</div>

Button with Inline Icons

.c-btn[.-icon-right,.-icon-left] > i.fas.fa-lock

-icon-right -icon-left

hide code

<div class="h-flex h-space-around h-flex-row h-vertical-center">
    <a href="" class="c-btn -small -inverted -icon-right">
        -icon-right
        <i class="fas fa-lock"></i>
    </a>
    <a href="" class="c-btn -small -inverted -icon-left">
        <i class="fas fa-lock"></i>
        -icon-left
    </a>
</div>

Arrow Icons per Class

.-icon-right[-icon-left, -icon-up, -icon-down].-icon-arrow

-icon-right -icon-arrow -icon-right -icon-arrow

-icon-up -icon-arrow -icon-down -icon-arrow

hide code

<div class="h-flex h-space-around h-flex-row h-vertical-center">
<a href="" class="c-btn -small -secondary -icon-right -icon-arrow">
    -icon-right -icon-arrow
</a>
<a href="" class="c-btn -small -primary -icon-left -icon-arrow">
    -icon-right -icon-arrow
</a>
</div>
<div class="h-flex h-space-around h-flex-row h-vertical-center m-t-l">
    <a href="" class="c-btn -small -secondary -icon-up -icon-arrow">
        -icon-up -icon-arrow
    </a>
    <a href="" class="c-btn -small -primary -icon-down -icon-arrow">
        -icon-down -icon-arrow
    </a>
</div>

Dropdown Button

.c-btn.-dropdown

hide code

<div class="h-flex h-space-around h-flex-row h-vertical-center">
    <button class="c-btn -small -secondary -dropdown" role="tab" data-toggle="collapse" data-target="#" aria-controls="...">
        <span class="c-btn__text">-dropdown</span>
    </button>
    <button class="c-btn -small -dropdown -w-icon-left" role="tab" data-toggle="collapse" data-target="#" aria-controls="...">
        <span class="fas fa-user-circle fa-2x"></span>
        <span class="c-btn__text">-dropdown -w-icon-left</span>
    </button>
</div>

Dropdown-Filter Button

.c-btn.-dropdown.-filter

hide code

 <button type="button" class="c-btn -primarylight -dropdown -filter -icon-left" role="tab" data-toggle="collapse" data-target="#" aria-controls="...">
    <span class="fa fa-sliders-h"></span>
Filtern
 </button>

Disabled Button

.c-btn.-disabled or add attribute disabled

hide code

<div class="h-flex h-space-around h-flex-row h-vertical-center">
    <button type="button" class="c-btn -small -disabled">
        c-btn -disabled
    </button>
    <button type="button" class="c-btn -small" disabled>
        c-btn[disabled]
    </button>
</div>

Icon Button

Sizes

.c-btn.-icon-btn[.-small, .-medium, .-large]

hide code

<div class="h-flex h-space-around h-flex-row h-vertical-center">
    <button type="button" class="c-btn -icon-btn -small">
        <span class="fa fa-star"></span>
    </button>
    <button type="button" class="c-btn -icon-btn -medium">
        <span class="fa fa-star"></span>
    </button>
    <button type="button" class="c-btn -icon-btn -large">
        <span class="fa fa-star"></span>
    </button>
</div>

Styles

.c-btn.-icon-btn[.-light, .-primary, .-secondary .-primarylight, .-link, -disabled ...]

hide code

<div class="h-flex h-space-between h-flex-row h-vertical-center">
    <button type="button" class="c-btn -icon-btn -light">
        <span class="fa fa-star"></span>
    </button>
    <button type="button" class="c-btn -icon-btn -primary">
        <span class="fa fa-star"></span>
    </button>
    <button type="button" class="c-btn -icon-btn -secondary">
        <span class="fa fa-star"></span>
    </button>
    <button type="button" class="c-btn -icon-btn -primarylight">
        <span class="fa fa-star"></span>
    </button>
    <button type="button" class="c-btn -icon-btn -link">
        <span class="fa fa-star"></span>
    </button>
    <button type="button" class="c-btn -icon-btn -disabled">
        <span class="fa fa-star"></span>
    </button>
</div>

Icon-Square Button

TIP

Has the sames Modifier Classes for Size and Color as the Icon Btn. Just use .-square-btn instead of .-icon-btn.

.c-btn.-square-btn[.-small, .-medium, .-large]

.c-btn.-square-btn[.-light, .-primary, .-secondary .-primarylight, .-link, -disabled ...]

Examples:

hide code

<div class="h-flex h-space-between h-flex-row h-vertical-center">
    <button type="button" class="c-btn -square-btn -inverted -small">
        <span class="fa fa-save"></span>
    </button>
    <button type="button" class="c-btn -square-btn -medium -inverted">
        <span class="fa fa-save"></span>
    </button>
    <button type="button" class="c-btn -square-btn -large">
        <span class="fa fa-save"></span>
    </button>
    <button type="button" class="c-btn -square-btn -primarylight">
        <span class="fa fa-save"></span>
    </button>
    <button type="button" class="c-btn -square-btn -medium -secondary">
        <span class="fa fa-save"></span>
    </button>
    <button type="button" class="c-btn -square-btn -large -disabled">
        <span class="fa fa-save"></span>
    </button>
</div>

Icon-Button States

TIP

Existing Font Awesome icons within the button are overwritten by the CSS class (see first example).

c-btn.-icon-btn.-square[.-success, .-warning, .-error]

hide code

<div class="h-flex h-space-around h-flex-row h-vertical-center">
    <button type="button" class="c-btn -square-btn -success">
        <span class="fa fa-spinner"></span>
    </button>    
    <button type="button" class="c-btn -square-btn -warning">
        <span class="fa fa-exclamation"></span>
    </button> 
    <button type="button" class="c-btn -square-btn -error">
        <span class="fa fa-times"></span>
    </button>
</div>

Action Button

TIP

• Based on the Icon Btn
• Used in Action Menu.

c-btn.-icon-btn[any modifier] > .fa-ellipsis-v/.fa-ellipsis-h

hide code

<div class="h-flex h-space-between h-flex-row h-vertical-center">
    <button type="button" class="c-btn  -icon-btn -inverted">
        <i class="fa fa-ellipsis-v"></i>
    </button>
    <button type="button" class="c-btn  -icon-btn -inverted">
        <i class="fa fa-ellipsis-h"></i>
    </button>
    <button type="button" class="c-btn  -icon-btn -medium -link">
        <i class="fa fa-ellipsis-h"></i>
    </button>    
    <button type="button" class="c-btn  -icon-btn -secondary -small">
        <i class="fa fa-ellipsis-v"></i>
    </button>   
    <button type="button" class="c-btn  -icon-btn -secondary -large">
        <i class="fa fa-ellipsis-v"></i>
    </button>
</div>