Button

Add the button class to button, submit and a elements.

Link
<button class="button">Button</button>

<input type="submit" value="Submit" class="button">

<a href="" class="button">Link</a>

Use the disabled HTML attribute to disable a button. No CSS class needed.

<button class="button" disabled>Button</button>

Sizes

Buttons come in 4 different sizes.

<button class="button is-small">Button</button>
<button class="button">Button</button>
<button class="button is-medium">Button</button>
<button class="button is-large">Button</button>

Colours

Buttons come in multiple colours, plus a 'link' style to line up with the rest. Just add a colour modifier like is-dark or is-success.

<a class="button">Normal</a>
<a class="button is-white">White</a>
<a class="button is-black">Black</a>
<a class="button is-light">Light</a>
<a class="button is-dark">Dark</a>
<a class="button is-primary">Primary</a>
<a class="button is-info">Info</a>
<a class="button is-success">Success</a>
<a class="button is-warning">Warning</a>
<a class="button is-danger">Danger</a>
<a class="button is-link">Link</a>

Icons

Use buttons with icons.

<a href="" class="button">
	<span class="icon is-16">
		<svg version="1.1" viewBox="0 0 16 16" role="img"><title>Bold icon</title><path fill="#444444" d="M11.56085,7.31641c0.96506-0.70764,1.56221-1.88808,1.41765-3.20763 C12.78094,2.30548,11.14325,0.99999,9.32916,1L2,1v1l1.44721,0.72361C3.786,2.893,4,3.23926,4,3.61803v8.76393 c0,0.37877-0.214,0.72504-0.55279,0.89443L2,14v1l7.82266,0c2.10385,0,3.98039-1.54746,4.16186-3.64347 C14.14087,9.55075,13.09633,7.96788,11.56085,7.31641z M7,3h1c1.10455,0,2,0.89539,2,2c0,1.10455-0.89545,2-2,2H7V3z M9,13H7V9h2 c1.10455,0,2,0.89539,2,2C11,12.10455,10.10455,13,9,13z"></path></g></svg>
	</span>
</a>
<a href="" class="button">
	<span class="icon is-16">
		<svg version="1.1" viewBox="0 0 16 16" role="img"><title>List icon</title><circle data-color="color-2" fill="#444444" cx="2" cy="2" r="2"></circle> <circle data-color="color-2" fill="#444444" cx="2" cy="8" r="2"></circle> <circle data-color="color-2" fill="#444444" cx="2" cy="14" r="2"></circle> <rect x="6" y="1" fill="#444444" width="10" height="2"></rect> <rect x="6" y="7" fill="#444444" width="10" height="2"></rect> <rect x="6" y="13" fill="#444444" width="10" height="2"></rect></g></svg>
	</span>
</a>
<button class="button is-success">
	<span class="icon is-16">
		<svg version="1.1" viewBox="0 0 16 16" role="img"><title>Save icon</title><path fill="#ffffff" d="M11.7,0.3C11.5,0.1,11.3,0,11,0h-1v3c0,0.6-0.4,1-1,1H4C3.4,4,3,3.6,3,3V0H1C0.4,0,0,0.4,0,1v14 c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1V5c0-0.3-0.1-0.5-0.3-0.7L11.7,0.3z M13,14H3v-3c0-0.6,0.4-1,1-1h8c0.6,0,1,0.4,1,1V14z"></path> <rect data-color="color-2" x="7" fill="#ffffff" width="2" height="3"></rect></g></svg>
	</span>
	<span>Save</span>
</button>