Buttons

Default buttons

Use zui-button class and optionally add a class that defines the style, color or size.

Element
Anchor
Source
<a class="zui-button" href="#">Anchor</a>
<button>Button</button>
<input type="submit" value="Submit" />
<input type="button" value="Button" />

Subtle buttons

Use subtle class to remove the background color and show only the border.

Element
Anchor
Source
<a class="zui-button subtle" href="#">Anchor</a>
<button class="zui-button subtle">Button</button>
<input class="zui-button subtle" type="submit" value="Submit" />
<input class="zui-button subtle" type="button" value="Button" />

Subtle white text

Use subtle white-text classes to remove the background color, show only the border and make the text white.

Element
Anchor
Source
<a class="zui-button subtle white-text" href="#">Anchor</a>
<button class="zui-button subtle white-text">Button</button>
<input class="zui-button subtle white-text" type="submit" value="Submit" />
<input class="zui-button subtle white-text" type="button" value="Button" />

Extra Colors

The following example applies the color scheme to create various buttons styles.

Element
Source
<a class="zui-button" href="#">Default</a>
<a class="zui-button hot" href="#">Hot</a>
<a class="zui-button cold" href="#">Cold</a>
<a class="zui-button hard" href="#">Hard</a>

More subtle colors

Yeah, these subtle colors.

Element
Source
<a class="zui-button subtle" href="#">Default</a>
<a class="zui-button subtle hot" href="#">Hot</a>
<a class="zui-button subtle cold" href="#">Cold</a>
<a class="zui-button subtle hard" href="#">Hard</a>

More subtle colors with white text

Yeah, these subtle colors.

Element
Source
<a class="zui-button subtle white-text" href="#">Default</a>
<a class="zui-button subtle hot white-text" href="#">Hot</a>
<a class="zui-button subtle cold white-text" href="#">Cold</a>

And just white, of course...

Ideally this may be used on dark backgrounds

Element
Source
<a class="zui-button white" href="#">White</a>
<a class="zui-button subtle white" href="#">White subtle</a>

Disabled

Make buttons disabled.

Element
Source
<a class="zui-button disabled" href="#">Default</a>
<a class="zui-button subtle disabled" href="#">Subtle</a>
<a class="zui-button subtle cold disabled" href="#">Subtle Cold</a>
<a class="zui-button white disabled" href="#">White</a>
<button disabled="disabled">Button</button>
<input type="button" disabled="disabled" value="Input" />
<input type="submit" disabled="disabled" value="Submit" />

Size

Make the buttons larger or smaller.

Element
Source
<a class="zui-button small" href="#">Small</a>
<a class="zui-button" href="#">Default</a>
<a class="zui-button large" href="#">Large</a>

Block

Display the buttons as blocks.

Element
Source
<a class="zui-button block" href="#">My button</a>
<a class="zui-button subtle block" href="#">My button</a>

George Smith

Molestias odit magni non doloremque vel eaque magnam quod officiis velit consequuntur voluptatem sint dolorem harum, reprehenderit.