Buttons

Clicky clicky! Buttons can be made out of input, button, and a elements.

Default

Submit 

<input type="button" value="Submit" class="button">
<a href="#" class="button">Submit</a>
<button type="button" class="button">Submit</button>

Outline Button

Submit 

<input type="button" value="Submit" class="button button--outline">
<a href="#" class="button button--outline">Submit</a>
<button type="button" class="button button--outline">Submit</button>

Link Button

Submit 

<input type="button" value="Submit" class="button button--link">
<a href="#" class="button button--link">Submit</a>
<button type="button" class="button button--link">Submit</button>

Expanded Button

<input type="button" value="Submit" class="button button--expand">

Arrow Button

<button type="button" class="button button--arrow">Submit <i class="fa"></i></button>

Buttons with Icons

<button type="button" class="button button--icon"><i class="fa fa-fw fa-arrow-right button--icon__before"></i>Submit</button>
<button type="button" class="button button--icon">Submit<i class="fa fa-fw fa-arrow-right button--icon__after"></i></button>

Other Sizes

X-Large 

<input type="button" value="X-Large" class="button button--xl">
<a href="#" class="button button--xl">X-Large</a>
<button type="button" class="button button--xl">X-Large</button>

Large 

<input type="button" value="Large" class="button button--lg">
<a href="#" class="button button--lg">Large</a>
<button type="button" class="button button--lg">Large</button>

Small 

<input type="button" value="Small" class="button button--sm">
<a href="#" class="button button--sm">Small</a>
<button type="button" class="button button--sm">Small</button>

X-Small 

<input type="button" value="X-Small" class="button button--xs">
<a href="#" class="button button--xs">X-Small</a>
<button type="button" class="button button--xs">X-Small</button>

Disabled

Disabled 

<input type="button" value="Disabled" class="button button--disabled js-button--disabled">
<a href="#" class="button button--disabled js-button--disabled">Disabled</a>
<button type="button" class="button button--disabled js-button--disabled">Disabled</button>

Button Groups

A collection of similar or like-minded buttons. They can be different sizes. Buttons can also indicate the currently selected option. 


<div class="button-group">
    <input type="button" value="Primary Action" class="button">
    <input type="button" value="Secondary Action" class="button button--selected">
    <input type="button" value="Secondary Action" class="button">
</div>


<div class="button-group button-group--xl">
    <input type="button" value="Primary Action" class="button button--selected">
    <input type="button" value="Secondary Action" class="button">
    <input type="button" value="Secondary Action" class="button">
</div>

Split Buttons with Dropdowns

This is the first option This is the second option and its title is really long This is the third option 

<div class="button-group button-group--dropdown">
    <input type="button" value="Primary Action" class="button">
    <div type="button" class="button button--dropdown-trigger js-button--dropdown-trigger">
    
        <i class="fa fa-fw fa-caret-down"></i>

        <div class="button-group__dropdown">
            <a href="#">This is the first option</a>
            <a href="#">This is the second option and its title is really long</a>
            <a href="#">This is the third option</a>
        </div>

    </div>
</div>
This is the first option This is the second option and its title is really long This is the third option 

<div class="button-group button-group--sm button-group--dropdown">
    <input type="button" value="Primary Action" class="button">
    <div type="button" class="button button--dropdown-trigger js-button--dropdown-trigger">
    
        <i class="fa fa-fw fa-caret-down"></i>

        <div class="button-group__dropdown">
            <a href="#">This is the first option</a>
            <a href="#">This is the second option and its title is really long</a>
            <a href="#">This is the third option</a>
        </div>

    </div>
</div>

Button Bars

A collection of button groups. They can be different sizes. 


<div class="button-bar">
    <div class="button-group">
        <button type="button" class="button">Button 1</button>
        <button type="button" class="button">Button 2</button>
        <button type="button" class="button button--selected">Button 3</button>
    </div>

    <div class="button-group">
        <button type="button" class="button">Button 4</button>
        <button type="button" class="button">Button 5</button>
        <button type="button" class="button">Button 6</button>
    </div>
</div>


<div class="button-bar">
    <div class="button-group">
        <button type="button" class="button">Button 1</button>
        <button type="button" class="button button--selected">Button 2</button>
        <button type="button" class="button">Button 3</button>
    </div>
	
    <div class="button-group">
        <button type="button" class="button">Button 4</button>
        <button type="button" class="button">Button 5</button>
    </div>
	
    <div class="float-right">				
        <div class="button-group">
            <button type="button" class="button">Button 6</button>
            <button type="button" class="button">Button 7</button>
            <button type="button" class="button">Button 8</button>
        </div>
		
        <div class="button-group">
            <button type="button" class="button">Button 9</button>
            <button type="button" class="button">Button 10</button>
        </div>
    </div>
</div>


<div class="button-bar button-bar--lg">
    <div class="button-group">
        <button type="button" class="button">Button 1</button>
        <button type="button" class="button button--selected">Button 2</button>
        <button type="button" class="button">Button 3</button>
    </div>

    <div class="button-group">
        <button type="button" class="button">Button 4</button>
        <button type="button" class="button">Button 5</button>
        <button type="button" class="button">Button 6</button>
    </div>
</div>

Class Reference

Class Info
button Creates a new button. Can be added to an a, button, or input.
button--xs Creates an extra small button.
button--sm Creates a small button.
button--lg Creates a large button.
button--xl Creates an extra large button.
button--disabled Applies disabled styling to a button.
button--expand Makes a button expand to the width of its container.
button--link Makes a button look like a normal text link.
button--icon Indicates the button contains an icon.
button--selected Applies selected styling to a button. Can be used to denote which button in a bar or group is currently selected.
button-group Creates a new button group. Should be added to a div.
button-group--xs Creates an extra small button.
button-group--sm Creates a small button.
button-group--lg Creates a large button.
button-group--xl Creates an extra large button.
button-group--dropdown Indicates button group is a split dropdown menu.
button--dropdown-trigger Denotes the button used to trigger the display of the dropdown menu.
button-group__dropdown Container for the button group's dropdown menu.
button-bar Creates a new button bar (a collection of button groups). Should be added to a div.
button-bar--xs Creates an extra small button.
button-bar--sm Creates a small button.
button-bar--lg Creates a large button.
button-bar--xl Creates an extra large button.