<a class="button">Anchor</a>
<button class="button">Button</button>
<input type="submit" value="Submit input" class="button"/>
<input type="reset" value="Reset input" class="button"/>a.button Anchor
button.button Button
input.button(type='submit', value='Submit input')
input.button(type='reset', value='Reset input')<a class="button is-tiny"> .is-tiny </a>
<a class="button is-small"> .is-small </a>
<a class="button is-normal"> .is-normal </a>
<a class="button is-large"> .is-large </a>
<a class="button is-massive"> .is-massive </a>a(class="button is-tiny") .is-tiny
a(class="button is-small") .is-small
a(class="button is-normal") .is-normal
a(class="button is-large") .is-large
a(class="button is-massive") .is-massive<a class="button is-primary"> .is-primary </a>
<a class="button is-secondary"> .is-secondary </a>
<a class="button is-info"> .is-info </a>
<a class="button is-success"> .is-success </a>
<a class="button is-warning"> .is-warning </a>
<a class="button is-danger"> .is-danger </a>
<a class="button is-black"> .is-black </a>
<a class="button is-white"> .is-white </a>a(class="button is-primary") .is-primary
a(class="button is-secondary") .is-secondary
a(class="button is-info") .is-info
a(class="button is-success") .is-success
a(class="button is-warning") .is-warning
a(class="button is-danger") .is-danger
a(class="button is-black") .is-black
a(class="button is-white") .is-white<a class="button is-primary is-rounded">.is-rounded</a>
<a class="button is-secondary is-rounded">.is-rounded</a>
<a class="button is-info is-rounded">.is-rounded</a>
<a class="button is-success is-rounded">.is-rounded</a>
<a class="button is-warning is-rounded">.is-rounded</a>
<a class="button is-danger is-rounded">.is-rounded</a>
<a class="button is-black is-rounded">.is-rounded</a>
<a class="button is-white is-rounded">.is-rounded</a>a(class="button is-primary is-rounded") .is-rounded
a(class="button is-secondary is-rounded") .is-rounded
a(class="button is-info is-rounded") .is-rounded
a(class="button is-success is-rounded") .is-rounded
a(class="button is-warning is-rounded") .is-rounded
a(class="button is-danger is-rounded") .is-rounded
a(class="button is-black is-rounded") .is-rounded
a(class="button is-white is-rounded") .is-rounded<a class="button is-primary is-inverse">.is-inverse</a>
<a class="button is-secondary is-inverse">.is-inverse</a>
<a class="button is-info is-inverse">.is-inverse</a>
<a class="button is-success is-inverse">.is-inverse</a>
<a class="button is-warning is-inverse">.is-inverse</a>
<a class="button is-danger is-inverse">.is-inverse</a>
<a class="button is-black is-inverse">.is-inverse</a>
<a class="button is-white is-inverse">.is-inverse</a>a(class="button is-primary is-inverse") .is-inverse
a(class="button is-secondary is-inverse") .is-inverse
a(class="button is-info is-inverse") .is-inverse
a(class="button is-success is-inverse") .is-inverse
a(class="button is-warning is-inverse") .is-inverse
a(class="button is-danger is-inverse") .is-inverse
a(class="button is-black is-inverse") .is-inverse
a(class="button is-white is-inverse") .is-inverse<a class="button is-tiny">
<svg viewBox="0 0 24 24" class="icon">
<path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path>
</svg>
<span>.is-tiny</span>
</a>
<a class="button is-small">
<svg viewBox="0 0 24 24" class="icon">
<path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path>
</svg>
<span>.is-small</span>
</a>
<a class="button is-normal">
<svg viewBox="0 0 24 24" class="icon">
<path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path>
</svg>
<span>.is-normal</span>
</a>
<a class="button is-large">
<svg viewBox="0 0 24 24" class="icon">
<path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path>
</svg>
<span>.is-large</span>
</a>
<a class="button is-massive">
<span>.is-massive</span>
<svg viewBox="0 0 24 24" class="icon">
<path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path>
</svg>
</a>
<br>
<a class="button is-tiny">
<svg viewBox="0 0 24 24" class="icon">
<path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path>
</svg>
</a>
<a class="button is-small">
<svg viewBox="0 0 24 24" class="icon">
<path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path>
</svg>
</a>
<a class="button is-normal">
<svg viewBox="0 0 24 24" class="icon">
<path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path>
</svg>
</a>
<a class="button is-large">
<svg viewBox="0 0 24 24" class="icon">
<path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path>
</svg>
</a>
<a class="button is-massive">
<svg viewBox="0 0 24 24" class="icon">
<path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path>
</svg>
</a>a(class="button is-tiny")
svg(class="icon" viewbox='0 0 24 24')
path( d='M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z')
span .is-tiny
a(class="button is-small")
svg(class="icon" viewbox='0 0 24 24')
path( d='M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z')
span .is-small
a(class="button is-normal")
svg(class="icon" viewbox='0 0 24 24')
path( d='M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z')
span .is-normal
a(class="button is-large")
svg(class="icon" viewbox='0 0 24 24')
path( d='M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z')
span .is-large
a(class="button is-massive")
span .is-massive
svg(class="icon" viewbox='0 0 24 24')
path( d='M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z')
br
a(class="button is-tiny")
svg(class="icon" viewbox="0 0 24 24")
path( d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z")
a(class="button is-small")
svg(class="icon" viewbox='0 0 24 24')
path( d='M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z')
a(class="button is-normal")
svg(class="icon" viewbox='0 0 24 24')
path( d='M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z')
a(class="button is-large")
svg(class="icon" viewbox='0 0 24 24')
path( d='M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z')
a(class="button is-massive")
svg(class="icon" viewbox='0 0 24 24')
path( d='M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z')<a class="button is-block">.is-block</a>
<a class="button is-active">.is-active</a>
<a class="button is-disabled">.is-disabled</a>
<a class="button is-link">.is-link</a>
<a class="button is-clean">.is-clean</a>a(class="button is-block") .is-block
a(class="button is-active") .is-active
a(class="button is-disabled") .is-disabled
a(class="button is-link") .is-link
a(class="button is-clean") .is-clean| Modifier | Description | Class |
|---|---|---|
| Color | indicates the element state | .is-black .is-white .is-primary .is-secondary .is-info .is-success .is-warning .is-danger |
| Size | changes the element size based on font-size | .is-tiny .is-small .is-normal .is-large .is-massive |
| Block | the button takes all the container width | .is-block |
| Inverse | reverses background and text color | .is-inverse |
| Rounded | add rounded corners to a button | .is-rounded |
| Link | changes a button to the link shape | .is-link |
| Clean | removes button border and background | .is-clean |
| Active | indicates active state, equivalent to `button:active` | .is-active |
| Disabled | indicates that a button is disabled, equivalent to `button[disabled]` | .is-disabled |