Button
Default
Default button with hover effect.
Code
<button class="simpui-btn primary sm">Primary</button>
<button class="simpui-btn secondary sm">Secondary</button>
<button class="simpui-btn success sm">Success</button>
<button class="simpui-btn info sm">Info</button>
<button class="simpui-btn warning sm">Warning</button>
<button class="simpui-btn danger sm">Danger</button>
<button class="simpui-btn dark sm">Dark</button>
<button class="simpui-btn light sm">Light</button>
Outline
Outline button with hover effect.
Code
<button class="simpui-btn outline-primary sm">Primary</button>
<button class="simpui-btn outline-secondary sm">Secondary</button>
<button class="simpui-btn outline-success sm">Success</button>
<button class="simpui-btn outline-info sm">Info</button>
<button class="simpui-btn outline-warning sm">Warning</button>
<button class="simpui-btn outline-danger sm">Danger</button>
<button class="simpui-btn outline-dark sm">Dark</button>
<button class="simpui-btn outline-light sm">Light</button>
With Icon
Button with icon.
Code
<button class="simpui-btn icon-left-btn primary sm " id="iconPrimaryBtn">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m5.812 11l2.178 2.17a1.1 1.1 0 0 0 1.05.3a1.12 1.12 0 0 0 .809-.74l3.576-10.72A1.118 1.118 0 0 0 11.987.57L1.267 4.147a1.12 1.12 0 0 0-.74.859a1.1 1.1 0 0 0 .3 1l2.737 2.737l-.09 3.466zM13.106.79L3.564 8.742" stroke-width="1"/></svg>
Primary
</button>
<button class="simpui-btn icon-left-btn secondary sm" id="iconSecondaryBtn">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m5.812 11l2.178 2.17a1.1 1.1 0 0 0 1.05.3a1.12 1.12 0 0 0 .809-.74l3.576-10.72A1.118 1.118 0 0 0 11.987.57L1.267 4.147a1.12 1.12 0 0 0-.74.859a1.1 1.1 0 0 0 .3 1l2.737 2.737l-.09 3.466zM13.106.79L3.564 8.742" stroke-width="1"/></svg>
Secondary
</button>
<button class="simpui-btn icon-left-btn success sm" id="iconSuccessBtn">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m5.812 11l2.178 2.17a1.1 1.1 0 0 0 1.05.3a1.12 1.12 0 0 0 .809-.74l3.576-10.72A1.118 1.118 0 0 0 11.987.57L1.267 4.147a1.12 1.12 0 0 0-.74.859a1.1 1.1 0 0 0 .3 1l2.737 2.737l-.09 3.466zM13.106.79L3.564 8.742" stroke-width="1"/></svg>
Success
</button>
<button class="simpui-btn icon-left-btn info sm" id="iconInfoBtn">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m5.812 11l2.178 2.17a1.1 1.1 0 0 0 1.05.3a1.12 1.12 0 0 0 .809-.74l3.576-10.72A1.118 1.118 0 0 0 11.987.57L1.267 4.147a1.12 1.12 0 0 0-.74.859a1.1 1.1 0 0 0 .3 1l2.737 2.737l-.09 3.466zM13.106.79L3.564 8.742" stroke-width="1"/></svg>
Info
</button>
<button class="simpui-btn icon-left-btn warning sm" id="iconWarningBtn">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m5.812 11l2.178 2.17a1.1 1.1 0 0 0 1.05.3a1.12 1.12 0 0 0 .809-.74l3.576-10.72A1.118 1.118 0 0 0 11.987.57L1.267 4.147a1.12 1.12 0 0 0-.74.859a1.1 1.1 0 0 0 .3 1l2.737 2.737l-.09 3.466zM13.106.79L3.564 8.742" stroke-width="1"/></svg>
Warning
</button>
<button class="simpui-btn icon-left-btn danger sm" id="iconDangerBtn">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m5.812 11l2.178 2.17a1.1 1.1 0 0 0 1.05.3a1.12 1.12 0 0 0 .809-.74l3.576-10.72A1.118 1.118 0 0 0 11.987.57L1.267 4.147a1.12 1.12 0 0 0-.74.859a1.1 1.1 0 0 0 .3 1l2.737 2.737l-.09 3.466zM13.106.79L3.564 8.742" stroke-width="1"/></svg>
Danger
</button>
<button class="simpui-btn icon-left-btn dark sm" id="iconDarkBtn">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m5.812 11l2.178 2.17a1.1 1.1 0 0 0 1.05.3a1.12 1.12 0 0 0 .809-.74l3.576-10.72A1.118 1.118 0 0 0 11.987.57L1.267 4.147a1.12 1.12 0 0 0-.74.859a1.1 1.1 0 0 0 .3 1l2.737 2.737l-.09 3.466zM13.106.79L3.564 8.742" stroke-width="1"/></svg>
Dark
</button>
<button class="simpui-btn icon-left-btn light sm" id="iconLightBtn">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m5.812 11l2.178 2.17a1.1 1.1 0 0 0 1.05.3a1.12 1.12 0 0 0 .809-.74l3.576-10.72A1.118 1.118 0 0 0 11.987.57L1.267 4.147a1.12 1.12 0 0 0-.74.859a1.1 1.1 0 0 0 .3 1l2.737 2.737l-.09 3.466zM13.106.79L3.564 8.742" stroke-width="1"/></svg>
Light
</button>
Icon Only
Button with icon only.
Code
<button class="simpui-btn iconOnlybtn primary sm " id="iconPrimaryBtn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m11 5l-7 7l7 7m-7-7h16"/></svg>
</button>
<button class="simpui-btn iconOnlybtn primary sm " id="iconPrimaryBtn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12h16m-7-7l7 7l-7 7"/></svg>
</button>
Highlight
Highlight button with icon.
Code
<button class="text lightbtn sm">Highlight</button>