# 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

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0AJKDGnhhiDfYqsO%2Fbtn-size.png?generation=1535987996027736\&alt=media)

### Shape

Various shapes for your buttons are availabe.

#### Rounded corner

Just add `.btn-round`

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0AJMOXErXzIWC1Mf%2Fbtn-corner.png?generation=1535987996638310\&alt=media)

#### Circle

Just add `.btn-circle`

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0AJO5IxGBSYkW_xs%2Fbtn-circle.png?generation=1535987998494432\&alt=media)

#### Wide

Just add `.btn-wide`

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0AJQh1sKcZceJ2G3%2Fbtn-wide.png?generation=1535987997206285\&alt=media)

#### Thick border

Just add `.btn-thick-border`

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0AJSpf4Jfj15A5N4%2Fbtn-thick-border1.png?generation=1535987989058266\&alt=media)

### 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>
```

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0AJU5TIaIchcQ9zz%2Fbtn-purple-.png?generation=1535987989075770\&alt=media)

### 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:

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0AJWVH4KfLefUY3y%2Fbtn-icon-left.png?generation=1535987995514942\&alt=media)

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>
```

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0AJYy6v4Yl0LYHjm%2Fbtn-icon-right.png?generation=1535987996029565\&alt=media)

### 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://owwwlab.gitbook.io/chaos-docs/els/buttons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.