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 normal](Developer-Guide/frontend/elements/buttons/normal.png)

![Button normal icon](Developer-Guide/frontend/elements/buttons/normal_icon.png)

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

Alternative:

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

### Cancel

![Button cancel](Developer-Guide/frontend/elements/buttons/cancel.png)

![Button cancel icon](Developer-Guide/frontend/elements/buttons/cancel_icon.png)

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

Alternative:

```html
<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 save](Developer-Guide/frontend/elements/buttons/save.png)

![Button save icon](Developer-Guide/frontend/elements/buttons/save_icon.png)

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

Alternative:

```html
<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 close](Developer-Guide/frontend/elements/buttons/close.png)

![Button close icon](Developer-Guide/frontend/elements/buttons/close_icon.png)

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

Alternative:

```html
<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 disabled](Developer-Guide/frontend/elements/buttons/disabled.png)

![Button disabled icon](Developer-Guide/frontend/elements/buttons/disabled_icon.png)

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

Alternative:

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