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