Basic Buttons

A button can contain text or a svg symbol to display it’s action. Although any tag can be used for a button, it will only be keyboard focusable if you use a button tag or you add the property tabindex="0".

ready

<a href="javascript:void(0)" class="btn hoverable">Default Button</a>
<button class="btn hoverable">Default Button</button>
<input type="button" class="btn hoverable" value="Default Button">

ready

<a href="javascript:void(0)" class="btn disabled">Disabled Button</a>
<button class="btn disabled">Disabled Button</button>
<input type="button" class="btn disabled" value="Disabled Button">

A button can be disabled, pointer events will not occur.

ready

<p>
    <a href="javascript:void(0)" class="btn hoverable block">Block Button</a>
</p>
<p>
    <button class="btn hoverable block">Block Button</button>
</p>
<p>
    <input type="button" class="btn hoverable block" value="Block Button">
</p>

A button can be made to fill its parent.

Advanced Buttons

ready

<a href="javascript:void(0)" class="btn filter"></a>
<button class="btn filter"></button>
<input type="button" class="btn filter">

A filter button is there to filter the data selection.

ready

<p>
    <button class="btn status nostatus">No Status</button>
    <button class="btn status todo">ToDo</button>
    <button class="btn status doing">Doing</button>
    <button class="btn status done">Done</button>
</p>
<p>
    <input type="button" class="btn status nostatus" value="No Status">
    <input type="button" class="btn status todo" value="ToDo">
    <input type="button" class="btn status doing" value="Doing">
    <input type="button" class="btn status done" value="Done">
</p>

A status button shows the current status of a task. This can be “ToDo”, “Doing” or “Done”.

ready

<p>
    <span>Left:</span>
    <button class="btn slide left nostatus"></button>
    <button class="btn slide left todo"></button>
    <button class="btn slide left doing"></button>
    <button class="btn slide left done"></button>

    <span>Right:</span>
    <button class="btn slide right nostatus"></button>
    <button class="btn slide right todo"></button>
    <button class="btn slide right doing"></button>
    <button class="btn slide right done"></button>
</p>
<p>
    <button class="btn slide left nostatus"></button>
    <span>Example Content Task with Status ToDo</span>
    <button class="btn slide right doing"></button>
</p>
<p>
    <button class="btn slide left todo"></button>
    <span>Example Content Task with Status Doing</span>
    <button class="btn slide right done"></button>
</p>
<p>
    <button class="btn slide left doing"></button>
    <span>Example Content Task with Status Done</span>
    <button class="btn slide right nostatus"></button>
</p>

A slide button has the functionality to move a task from one status to another.