> For the complete documentation index, see [llms.txt](https://lorvent.gitbook.io/admire/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lorvent.gitbook.io/admire/html/html-structure/main-content/buttons.md).

# Buttons

There are twelve variants of buttons based on the colors used in this template, we can change the color of the button just by replacing `btn-primary`with `btn-secondary , btn-info, btn-success, btn-warning, btn-danger`.

Since this template is based on Bootstrap4`btn-default`is depricated and `btn-secondary`is brought into act.

**1) Basic Buttons:**

![](https://2744120822-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJbH6fevdwDEJ2u%2F-M4TuRpnVefLKP77JKOd%2F-M4TuZB43ztGuZW-yiiB%2Famire1.png?generation=1586435352147532\&alt=media)

It has the following Structure:

```
<button class="btn btn-primary">Button</button>
```

**2) Disabled Buttons:**

![](https://2744120822-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJbH6fevdwDEJ2u%2F-M4TuRpnVefLKP77JKOd%2F-M4TuZB6mAIpxgk5AmYe%2Fadmire2.png?generation=1586435351263062\&alt=media)

It has the following Structure::

```
<button class="btn btn-primary disabled">Button</button>
```

**3) Outline Buttons:**

![](https://2744120822-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJbH6fevdwDEJ2u%2F-M4TuRpnVefLKP77JKOd%2F-M4TuZB8LDhY3fvwECfS%2Fadmire3.png?generation=1586435351749653\&alt=media)

It has the following Structure:

```
<button class="btn btn-outline-primary">Button</button>
```

**4) Rounded Buttons:**

![](https://2744120822-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJbH6fevdwDEJ2u%2F-M4TuRpnVefLKP77JKOd%2F-M4TuZBAtry9lmRlV815%2Fadmire4.png?generation=1586435351559292\&alt=media)

It has the following Structure:

```
<button class="btn btn-primary button-rounded">Button</button>
```

**5) Rectangle Buttons:**

![](https://2744120822-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJbH6fevdwDEJ2u%2F-M4TuRpnVefLKP77JKOd%2F-M4TuZBCSUAoZs1lDt68%2Fadmire5.png?generation=1586435351152904\&alt=media)

It has the following Structure:

```
<button class="btn btn-primary button-rectangle">Button</button>
```

**6) Button Group:**

![](https://2744120822-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJbH6fevdwDEJ2u%2F-M4TuRpnVefLKP77JKOd%2F-M4TuZBE67d8PS0YTsgW%2Fadmire6.png?generation=1586435351994412\&alt=media)

It has the following Structure:

```
<div class="btn-group"  role="group">
     <button class="btn btn-primary">Button</button>
     ......
     ......
</div>
```

**7) Glow Buttons:**

![](https://2744120822-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJbH6fevdwDEJ2u%2F-M4TuRpnVefLKP77JKOd%2F-M4TuZBGQqQn8AhmPzOL%2Fadmire7.png?generation=1586435352266964\&alt=media)

It has the following Structure:

```
<button class="btn btn-primary button_glow_buttons">Button</button>
```

**8) Dropdown Buttons:**

![](https://2744120822-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJbH6fevdwDEJ2u%2F-M4TuRpnVefLKP77JKOd%2F-M4TuZBIO44Eqz1wC_zR%2Fadmire8.png?generation=1586435351857264\&alt=media)

It has the following Structure:

```
<div class="dropdown">
     <button class="btn btn-primary dropdown-toggle"  type="button"  id="about-us2"  data-toggle="dropdown"  aria-haspopup="true"  aria-expanded="false">Button</button>
     <div class="dropdown-menu" aria-labelledby="about-us2">
     <a class="dropdown-item" href="#">....</a>
     ....
     ....
     </div>
</div>
```

**9) Dropup Buttons:**

![](https://2744120822-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJbH6fevdwDEJ2u%2F-M4TuRpnVefLKP77JKOd%2F-M4TuZBKmXnS7bg7G3Hf%2Fadmire9.png?generation=1586435351347447\&alt=media)

It has the following Structure:

```
<div class="dropup">
     <button class="btn btn-primary dropdown-toggle"  type="button"  id="up1"  data-toggle="dropdown"  aria-haspopup="true"  aria-expanded="false">Button</button>
     <div class="dropdown-menu" aria-labelledby="up1">
     <a class="dropdown-item" href="#">....</a>
     ....
     ....
     </div>
</div>
```

**10) Button Wrapper:**

![](https://2744120822-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJbH6fevdwDEJ2u%2F-M4TuRpnVefLKP77JKOd%2F-M4TuZBMIcDth-qfhGMK%2Fadmire10.png?generation=1586435351880035\&alt=media)

It has the following Structure:

```
<span class="button-wrap">
   <a href="#"  class="button button-pill button-primary">Button</a>
</span>
```

**11) Social Buttons:**

![](https://2744120822-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJbH6fevdwDEJ2u%2F-M4TuRpnVefLKP77JKOd%2F-M4TuZBO4vwLPAMNSOIu%2Fadmire11.png?generation=1586435351495409\&alt=media)

It has the following Structure:

```
<a class="btn btn-block btn-social btn-bitbucket">
   <i  class="fa fa-bitbucket"  >........</i>
</a>
```

**12) cool Buttons:**

![](https://2744120822-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJbH6fevdwDEJ2u%2F-M4TuRpnVefLKP77JKOd%2F-M4TuZBQ7wkqz85cq0Uk%2Fadmire12.png?generation=1586435351613933\&alt=media)

It has the following Structure:

```
<button type="button" class="btn btn-labelled btn-success">
     <span class="btn-label">
          <i class="fa fa-check">  </i>....
     </span>
</button>
```