Developer-Guide/cssOMS/buttons/buttons.md

Buttons

The following default button styles are available for the different user interactions. Buttons can be created with the button tag or the a link tag with a button class.

Examples

Normal

<button>Test Button</button>
<button><i class="fa fa-lightbulb-o"></i> Test Button</button>

Alternative:

<a href="#" class="button">Test Button</a>
<a href="#" class="button"><i class="fa fa-lightbulb-o"></i> Test Button</a>

Cancel

<button class="cancel">Test Button</button>
<button class="cancel"><i class="fa fa-lightbulb-o"></i> Test Button</button>

Alternative:

<a href="#" class="button cancel">Test Button</a>
<a href="#" class="button cancel"><i class="fa fa-lightbulb-o"></i> Test Button</a>

Save

<button class="save">Test Button</button>
<button class="save"><i class="fa fa-lightbulb-o"></i> Test Button</button>

Alternative:

<a href="#" class="button save">Test Button</a>
<a href="#" class="button save"><i class="fa fa-lightbulb-o"></i> Test Button</a>

Close

<button class="close">Test Button</button>
<button class="close"><i class="fa fa-lightbulb-o"></i> Test Button</button>

Alternative:

<a href="#" class="button close">Test Button</a>
<a href="#" class="button close"><i class="fa fa-lightbulb-o"></i> Test Button</a>

Disabled

<button class="disabled">Test Button</button>
<button class="disabled"><i class="fa fa-lightbulb-o"></i> Test Button</button>

Alternative:

<a href="#" class="button disabled">Test Button</a>
<a href="#" class="button disabled"><i class="fa fa-lightbulb-o"></i> Test Button</a>