{% extends "mote/element/index.html" %} {% load mote_tags %} {% block codeblock %}

Buttons

.Button is the core class of all button variations. It provides the basic structure of buttons. The styling will work on button tags, anchor tags and inputs with the submit or reset type. For disabled styling, apply the disabled attribute to the element (note that this will not work on anchor tags).
            
                
<button class="Button">
    <span class="Button-text">Lorem ipsum</span>
</button>

<button class="Button" disabled>
    <span class="Button-text">Lorem ipsum</span>
</button>
                
            
        

Solid Buttons

To create a solid button, combine .Button--solid with either .Button--yellowButtercup or .Button--greenOracle.
            
                
<button class="Button Button--solid Button-yellowButtercup">
    <span class="Button-text">Lorem ipsum</span>
</button>

<button class="Button Button--solid Button-yellowButtercup" disabled>
    <span class="Button-text">Lorem ipsum</span>
</button>
                
            
        

Ghost Buttons

Ghost buttons have all of the structure of a button, but do not have a background colour. On :hover or :focus, the background colour is an rgba value of white with an alpha channel of .2. This allows the button to sit on any colour background and 'tint' the background colour of the button.
            
                
<button class="Button Button--ghost">
    <span class="Button-text">Lorem ipsum</span>
</button>

<button class="Button Button--ghost" disabled>
    <span class="Button-text">Lorem ipsum</span>
</button>
                
            
        

Bordered Buttons

Bordered buttons behave exactly as ghost buttons do, with the addition of a white border.
            
                
<button class="Button Button--bordered">
    <span class="Button-text">Lorem ipsum</span>
</button>

<button class="Button Button--bordered" disabled>
    <span class="Button-text">Lorem ipsum</span>
</button>
                
            
        
{% endblock %}