Basic

Here is a list of all HTML buttons markup style, <a href>, <input> & <button>

Advanced

There is a lot of options available to have custom buttons : sizes, colors & behavior.

size

action

radius

disabled

Buttons with icons

Buttons can be hispter too.

Warning: icons only works with <a href> or <button> tags. Never ever never use with <input>

Buttons are tied to an action of some kind, whether that button is on a cheese dispenser or launches the rocket that you're strapped to. On the Web, we follow similar conventions.

How to Use

This solution is perfect when the button needs to submit a form of some kind.

Note: Make sure to keep type="submit" on the button tag. That's what tells Internet Explorer to submit the form. This doesn't matter for anchor tags.

HTML

<!-- Size Classes -->
<a href="#" class="button [tiny small large]">Default Button</a>

<!-- Color Classes -->
<a href="#" class="button [secondary success alert]">Color Button</a>

<!-- Radius Classes -->
<a href="#" class="button [radius round]">Radius Button</a>

<!-- Disabled Class -->
<a href="#" class="button disabled">Disabled Button</a>

<!-- Expand Class -->
<a href="#" class="button expand">Expanded Button</a>