Btn | siimple css

Btn

The essential and classic button element

Add siimple-btn to create a basic button.

My button

<div class="siimple-btn">Button</div>

Colored buttons

You can set the button color by adding a siimple-btn--[COLOR] class to the button. Check the list of the available colors in the theming section.

Primary button

Success button

Warning button

Error button

<div class="siimple-btn siimple-btn--primary">Primary button</div>
<div class="siimple-btn siimple-btn--success">Success button</div>
<div class="siimple-btn siimple-btn--warning">Warning button</div>
<div class="siimple-btn siimple-btn--error">Error button</div>

Legacy colors API for the btn element are still supported but will be removed in a future major release of siimple.

My button

<div class="siimple-btn siimple-btn--navy">My button</div>
<div class="siimple-btn siimple-btn--green">My button</div>
<div class="siimple-btn siimple-btn--teal">My button</div>
<div class="siimple-btn siimple-btn--blue">My button</div>
<div class="siimple-btn siimple-btn--purple">My button</div>
<div class="siimple-btn siimple-btn--pink">My button</div>
<div class="siimple-btn siimple-btn--red">My button</div>
<div class="siimple-btn siimple-btn--orange">My button</div>
<div class="siimple-btn siimple-btn--yellow">My button</div>
<div class="siimple-btn siimple-btn--grey">My button</div>

Disabled button

Add siimple-btn--disabled to change the button style to disabled.

Disabled button

<div class="siimple-btn siimple-btn--primary siimple-btn--disabled">
    Disabled button
</div>

Fluid button

Added in v3.1.0

Add siimple-btn--fluid class to change the button width to the full parent width.

Fluid button

<div class="siimple-btn siimple-btn--primary siimple-btn--fluid">
    Fluid button
</div>

Small button

Added in v3.2.0

Add siimple-btn--small class for a smaller button.

Small button

<div class="siimple-btn siimple-btn--primary siimple-btn--small">
    Small button
</div>

Big button

Added in v3.3.0

Add siimple-btn--big class to create a bigger button.

Big button

<div class="siimple-btn siimple-btn--primary siimple-btn--big">
    Big button
</div>

Group buttons

Added in v3.3.0

Add siimple-btn-group class to wrap a collection of siimple-btn elements.

Btn 1

Btn 2

Btn 3

<div class="siimple-btn-group">
    <div class="siimple-btn siimple-btn--primary">Btn 1</div>
    <div class="siimple-btn siimple-btn--primary">Btn 2</div>
    <div class="siimple-btn siimple-btn--primary">Btn 3</div>
</div>

Found a mistake or want to help improve this documentation? Suggest changes.