> For the complete documentation index, see [llms.txt](https://owwwlab.gitbook.io/chaos-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://owwwlab.gitbook.io/chaos-docs/els/buttons.md).

# buttons

A typical button can be added to page using following markup:

```
<a href="#" class="btn">--caption on button---</a>
```

### Size

By adding size related classes to `.btn` class-name, various sizes of buttons can be achieved:

* `.btn-extra-small` stans for a very small button
* `.btn-small` stans for a small button
* `.btn-medium` stans for a medium button
* `.btn-large` stans for a large button

![](/files/-LLV0AJKDGnhhiDfYqsO)

### Shape

Various shapes for your buttons are availabe.

#### Rounded corner

Just add `.btn-round`

![](/files/-LLV0AJMOXErXzIWC1Mf)

#### Circle

Just add `.btn-circle`

![](/files/-LLV0AJO5IxGBSYkW_xs)

#### Wide

Just add `.btn-wide`

![](/files/-LLV0AJQh1sKcZceJ2G3)

#### Thick border

Just add `.btn-thick-border`

![](/files/-LLV0AJSpf4Jfj15A5N4)

### Coloring and Skin

Sometime you would want to add ad shiny button to grab your visitor's attention.

#### Transparent buttons

In some cases you would wish to use a button with transparent background. The it is already there and you can use three classes

`.btn-trans` which is notmal transparency

there are tow class-names that can be added to this class in order to acheive a better visual for dark and white scenarios:

* `.btn-tans .btn-skin-dark` to use the botton in light and white backgrounds.
* `.btn-tans .btn-skin-white` if you want to use the botton in dark backgrounds.

#### Skins

You can choose from 6 color variations by adding these classes to the element.

* `.btn-skin-red`
* `.btn-skin-green`
* `.btn-skin-cyan`
* `.btn-skin-yellow`
* `.btn-skin-dark`
* `.btn-skin-blue`

eg: here is the code sample for the below image:

```
<a href="#" class="hidden-sm hidden-xs btn btn-medium btn-round btn-skin-purple">read more</a>
<a href="#" class="btn btn-large btn-thick-border btn-circle btn-skin-purple">read more</a>
<a href="#" class="btn btn-medium btn-round btn-skin-purple">read more</a>
```

![](/files/-LLV0AJU5TIaIchcQ9zz)

### Button with Icon

You can add any icon to the **right** or **left** of a button using the followign markup:

```
<a href="#" class="hidden-sm hidden-xs btn btn-medium btn-round">
  <i class="oli oli-like"></i>
  <span>read more</span>
 </a>
```

Above code will generate the following:

![](/files/-LLV0AJWVH4KfLefUY3y)

To add the icon to the right side of the button you will need to add `.btn-icon-right` class to the button:

```
<a href="#" class="hidden-sm hidden-xs btn btn-medium btn-round btn-icon-right">
  <i class="oli oli-like"></i>
  <span>read more</span>
 </a>
```

![](/files/-LLV0AJYy6v4Yl0LYHjm)

### Animated Icons

To get the icon to anomate on hover use the following code sample

```
<a href="#" class="btn btn-medium btn-round btn-anim-i">
  <i class="oli oli-forward"></i>
  <span>read more</span>
</a>
```

As you can see the only difference is the addition of `.btn-anim-i` class.

You can achieve the simillar effect on the right of icons by simply adding `.btn-icon-right`:

```
<a href="#" class="btn btn-medium btn-round btn-icon-right btn-anim-i">
  <i class="oli oli-forward"></i>
  <span>read more</span>
</a>
```

### Drawer Effect

Just add the `.btn-anim-drawer` class to the btn

```
<a href="#" class="btn btn-medium btn-round btn-anim-drawer">read more</a>
```

Simply add `.btn-skin-dark` to get above effect at dark containers

```
<a href="#" class="btn btn-medium btn-round btn-anim-drawer btn-skin-dark">read more</a>
```

### Split Effect

The markup for this special effect of button is as bellow:

```
<a href="#" data-text="Read More" class="btn btn-medium btn-round btn-an-split">
  <span>read more</span>
</a>
```

Note the additional `data-text` and class of `.btn-an-split`

## Boootstrap Default Buttons

You can use the built-in bootstrap buttons if you want. Justo go to the [bootstrap documentation](http://getbootstrap.com/css/#buttons) and learn how.