# Buttons

There are twelve variants of buttons based on the colors used in this template with an option to change the color of the button just by replacing`btn-primary`with`btn-defaultbtn-infobtn-successbtn-warningbtn-danger`in the code below.

**1) Radiused Buttons:**

we can change effect of any button by replacing`hvr-buzz`with the effect we would like `hvr-hang hvr-sink hvr-pop`and other in the code below.

![](https://1275878305-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJhvqUp0E7nX4ru%2F-M4TuQ3skilUUFDlqqah%2F-M4TuSYSpMhM7s6P0xz2%2Fcore7.png?generation=1586435322142557\&alt=media)It has the following Structure:

```
<button class="button button-rounded button-flat hvr-buzz">Button</button>
```

**2) Rounded Buttons:**

we can change effect of any button by replacing`hvr-shrink`with the effect we effect we want like`hvr-pulse hvr-grow hvr-push`and other in the code below.

![](https://1275878305-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJhvqUp0E7nX4ru%2F-M4TuQ3skilUUFDlqqah%2F-M4TuSYaLtzoz6exSJXt%2Fcore8.png?generation=1586435322416576\&alt=media)

It has the following Structure:

```
<button class="button button-pill button-primary-flat hvr-shrink">shrink</button>
```

**3) Rectangle Buttons:**

![](https://1275878305-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJhvqUp0E7nX4ru%2F-M4TuQ3skilUUFDlqqah%2F-M4TuSYcfyQOsvYMMvbZ%2Fcore9.png?generation=1586435321613345\&alt=media)

It has the following Structure:

```
<button class="button button-primary-flat hvr-wobble-bottom">Button</button>
```

**4) Circle Buttons:**

![](https://1275878305-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJhvqUp0E7nX4ru%2F-M4TuQ3skilUUFDlqqah%2F-M4TuSYeLFEvVZk7adfP%2Fcore10.png?generation=1586435321226713\&alt=media)

It has the following Structure:

```
<button class="button button-circle button-primary-flat hvr-skew">Button</button>
```

**5) Shadow and Glow Transitions Buttons:**

![](https://1275878305-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJhvqUp0E7nX4ru%2F-M4TuQ3skilUUFDlqqah%2F-M4TuSYgOVJvXLu7F4QC%2Fclear4.png?generation=1586435321972885\&alt=media)

It has the following Structure:

```
<button class="button button-glow button-rounded button-flat hvr-float-shadow">Button</button>
```

**6) Quick Shortcuts:**

![](https://1275878305-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJhvqUp0E7nX4ru%2F-M4TuQ3skilUUFDlqqah%2F-M4TuSYi-X0ArMfylCXT%2Fclear5.png?generation=1586435322341412\&alt=media)

It has the following Structure:

```
<div class="btn btn-danger btn-sm btn-responsive"  role="button">
     <span class="glyphicon glyphicon-list-alt">Apps</span>
</div>
```

**7) 3-D Buttons:**

![](https://1275878305-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJhvqUp0E7nX4ru%2F-M4TuQ3skilUUFDlqqah%2F-M4TuSYkmRjpJywZBdYz%2Fclear7.png?generation=1586435322068689\&alt=media)

It has the following Structure:

```
<button class="button button-3d">Button</button>
```

**8) Spinner Buttons:**

![](https://1275878305-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJhvqUp0E7nX4ru%2F-M4TuQ3skilUUFDlqqah%2F-M4TuSYmegUF0ZdRbwXP%2Fclear8.png?generation=1586435321452626\&alt=media)

It has the following Structure:

```
<button class="ladda-button btn btn-primary button_normal"  data-style="expand-left">
     <span class="ladda-label">Expand Left</span>
     <span class="ladda-spinner"></span>
</button>
```

**9) Icon Button & Dropdown:**

![](https://1275878305-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJhvqUp0E7nX4ru%2F-M4TuQ3skilUUFDlqqah%2F-M4TuSYotbCamidXO4E0%2Fcore15.png?generation=1586435321860289\&alt=media)

It has the following Structure:

```
<button type="button" class="btn btn-icon btn-default m-r-50">
     <i class="icon fa fa-fw fa-map-marker" aria-hidden="true"></i>
</button>
```

**10) Button Animation:**

![](https://1275878305-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJhvqUp0E7nX4ru%2F-M4TuQ3skilUUFDlqqah%2F-M4TuSYqrjFUT9uTvnb5%2Fcore16.png?generation=1586435321507833\&alt=media)

It has the following Structure:

```
<button type="button" class="btn btn-animate btn-animate-side btn-success m-r-50">
    <span>
        <i class="icon fa fa-fw fa-map-marker" aria-hidden="true"></i>Side Animation
    </span>
</button>
```

**11) Group Buttons:**

![](https://1275878305-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJhvqUp0E7nX4ru%2F-M4TuQ3skilUUFDlqqah%2F-M4TuSYsM_JBVh3aD0Sc%2Fclear6.png?generation=1586435326824745\&alt=media)

It has the following Structure:

```
<div class="ui-group-buttons">
   <a href="#" class="btn btn-success" role="button">
      <span class="glyphicon glyphicon-thumbs-up">........</span>
   </a>
   ...
   ...
</div>
```

**12) Buttons With Labels:**

![](https://1275878305-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJhvqUp0E7nX4ru%2F-M4TuQ3skilUUFDlqqah%2F-M4TuSYu8kRvD9goSpvW%2Fclear9.png?generation=1586435330838386\&alt=media)

It has the following Structure:

```
<button type="button" class="btn btn-labeled btn-success">
    <span class="btn-label">
        <i class="glyphicon glyphicon-ok" aria-hidden="true"></i>Success
    </span>
</button>
```


---

# 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://lorvent.gitbook.io/clear/html-structure/main-content/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.