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

![](/files/-M4TuZB43ztGuZW-yiiB)

It has the following Structure:

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

**2) Disabled Buttons:**

![](/files/-M4TuZB6mAIpxgk5AmYe)

It has the following Structure::

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

**3) Outline Buttons:**

![](/files/-M4TuZB8LDhY3fvwECfS)

It has the following Structure:

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

**4) Rounded Buttons:**

![](/files/-M4TuZBAtry9lmRlV815)

It has the following Structure:

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

**5) Rectangle Buttons:**

![](/files/-M4TuZBCSUAoZs1lDt68)

It has the following Structure:

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

**6) Button Group:**

![](/files/-M4TuZBE67d8PS0YTsgW)

It has the following Structure:

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

**7) Glow Buttons:**

![](/files/-M4TuZBGQqQn8AhmPzOL)

It has the following Structure:

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

**8) Dropdown Buttons:**

![](/files/-M4TuZBIO44Eqz1wC_zR)

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

![](/files/-M4TuZBKmXnS7bg7G3Hf)

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

![](/files/-M4TuZBMIcDth-qfhGMK)

It has the following Structure:

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

**11) Social Buttons:**

![](/files/-M4TuZBO4vwLPAMNSOIu)

It has the following Structure:

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

**12) cool Buttons:**

![](/files/-M4TuZBQ7wkqz85cq0Uk)

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