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.

Quick Links

Default

Button
Submit
Reset
Top

Enhanced

Input value
Top

Corners

Has corners by default
Unset corners
Enhanced

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

Icon only
Enhanced - Icon only
Top

Shadow

Has shadow by default
Unset shadow
Enhanced
Top

Inline

Input
Enhanced
Top

Theme

Input - Inherit
Input - Theme swatch A
Input - Theme swatch B
Enhanced - Inherit
Enhanced - Theme swatch A
Enhanced - Theme swatch B
Top

Mini

Input
Enhanced
Top

Icons

Input
Enhanced
Top

Icon position

Left (default)
Right
Top
Bottom
Icon only
Enhanced - Left
Enhanced - Right
Enhanced - Top
Enhanced - Bottom
Enhanced - Icon only
Top

Icon shadow

Input
Enhanced
Top

Disabled

Input button with disabled attribute
Enhanced
Top

Native inputs