siimple css v3.3.0 GitHub Examples Home
Btn
The essential and classic button element
Add siimple-btn to create a basic button.
My button
<div class="siimple-btn siimple-btn--primary">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
My button
My button
My button
My button
My button
My button
My button
My button
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.