siimple 3.2.0 siimple.xyz
Elements
Basic elements that only require a single CSS class to go!
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>
Found a mistake or want to help improve this documentation? Suggest changes.