Input buttons

Examples of how to style input buttons; input elements with type="button", type="submit", or type="reset". See button markup for examples of a and button elements.

Note that in 1.4 data- attributes will still work, but the style options are deprecated.

Default

Enhanced

Input value

Corners

Enhanced

Icon-only buttons are round by default. Here we show how you can set the same border-radius as other buttons.

Enhanced - Icon only

Shadow

Enhanced

Inline

Enhanced

Theme

Enhanced - Inherit
Enhanced - Theme swatch A
Enhanced - Theme swatch B

Mini

Enhanced

Icons

Enhanced

Icon position

Inline:

Enhanced - Left
Enhanced - Right
Enhanced - Top
Enhanced - Bottom
Enhanced - Icon only

Icon shadow

Theme B:

Enhanced

Disabled

Enhanced

Native inputs