Buttons

Use LaarmWork’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Examples

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.


<link href="https://laarmwork.arnaudjacques.fr/res/css/button.css" rel="stylesheet">
<script src="https://laarmwork.arnaudjacques.fr/res/js/laarmwork.js"></script>
            
Default Success Danger Warning Primary Info Light Secondary Dark

<a class="btn">Default</a>
<a class="btn success">Success</a>
<a class="btn danger">Danger</a>
<a class="btn warning">Warning</a>
<a class="btn primary">Primary</a>
<a class="btn info">Info</a>
<a class="btn light">Light</a>
<a class="btn secondary">Secondary</a>
<a class="btn dark">Dark</a>
            

Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn .outline-* ones to remove all background images and colors on any button.

Success Danger Warning Primary Info Light Secondary Dark

<a class="btn success outline">Success</a>
<a class="btn danger outline">Danger</a>
<a class="btn warning outline">Warning</a>
<a class="btn primary outline">Primary</a>
<a class="btn info outline">Info</a>
<a class="btn light outline">Light</a>
<a class="btn secondary outline">Secondary</a>
<a class="btn dark outline">Dark</a>
            

Sizes

Fancy larger or smaller buttons? Add .lg or .sm for additional sizes.

Large button Large button Large button Large button

<a class="btn success large">Large button</a>
<a class="btn danger large outline">Large button</a>
<a class="btn success small">Large button</a>
<a class="btn danger small outline">Large button</a>
            

Create block level buttons—those that span the full width of a parent—by adding .w-100 and .text-center.

Large button

<a class="btn success large w-100 text-center m-b-1">Large button</a>
            

Single dropdown

Any single .btn can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either <button> elements:


<div class="dropdown">
    <button class="btn success">Dropdown <i class="fas fa-caret-down"></i></button>
    <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
    </div>
</div>
            

with press, just add .press in class .dropdown


<div class="dropdown press">
    <button class="btn success">Dropdown <i class="fas fa-caret-down"></i></button>
    <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
    </div>
</div>