> For the complete documentation index, see [llms.txt](https://docs.pages.revox.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.pages.revox.io/ui-elements/buttons.md).

# Buttons

## **Colors**

Pages buttons use the same contextual classes introduced in Bootstrap

![](https://3396288764-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDBWrdKcsIL5-tSGnv_%2F-M2K-Jp5AINPjIyu0qKw%2F-M2K-ZXFjhXDOqtem2jk%2FScreenshot%202020-03-13%20at%2011.17.31%20PM.png?alt=media\&token=72e18bde-f8e9-4637-95a6-d075de6e44bf)

```markup
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-complete">Complete</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
```

## **Button animation**

Content inside a button can be animate on hover. Simply include the classes `.btn-animated` together with `.from-top` or `.from-left` to specify the animation direction, You can wish to have any icon you want in side the "hidden-block" div

![](https://3396288764-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDBWrdKcsIL5-tSGnv_%2F-M2K-Jp5AINPjIyu0qKw%2F-M2K-qK7mZPHkewMShMJ%2FScreenshot%202020-03-13%20at%2011.18.24%20PM.png?alt=media\&token=5a3a6a52-d2da-42d3-a45f-da0998d221cd)

```markup
<button
  aria-label=""
  type="button"
  class="btn btn-primary btn-cons btn-animated from-left"
>
  <span>Follow us</span>
  <span class="hidden-block">
    <i class="pg-icon">mail</i>
  </span>
</button>
<button
  aria-label=""
  type="button"
  class="btn btn-primary btn-cons btn-animated from-top"
>
  <span>Download</span>
  <span class="hidden-block">
    <i class="pg-icon">cloud</i>
  </span>
</button>
```

## **Default Dropdown**

Tired of seeing the standard Bootstrap dropdown? Wrap your dropdown toggle button and dropdown menu within `.dropdown-default` to get a modern and clean feel

![](https://3396288764-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDBWrdKcsIL5-tSGnv_%2F-M2K-Jp5AINPjIyu0qKw%2F-M2K0MaRIva8277NCJAB%2FScreenshot%202020-03-13%20at%2011.20.59%20PM.png?alt=media\&token=73d0e6bc-dbe8-43e0-aab3-365118a0cb1d)

```markup
<div class="btn-group dropdown-default">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <span class="caret"></span> </a>
    <ul class="dropdown-menu ">
        <li><a href="#">Arial</a>
        </li>
        <li><a href="#">Helvetica</a>
        </li>
        <li><a href="#">SegeoUI</a>
        </li>
    </ul>
</div>
<!-- Upside dropdown -->
<div class="btn-group dropdown-default dropup">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <span class="caret"></span> </a>
    <ul class="dropdown-menu ">
        <li><a href="#">Arial</a>
        </li>
        <li><a href="#">Helvetica</a>
        </li>
        <li><a href="#">SegeoUI</a>
        </li>
    </ul>
</div>
```

## **Tag Options**

Add `.btn-tag` followed by `.btn-tag-light` or `.btn-tag-dark` to have tag options with color variations for buttons. Additionally, rounded tags can be achieved by adding `.btn-tag-rounded`

![](https://3396288764-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDBWrdKcsIL5-tSGnv_%2F-M2K-Jp5AINPjIyu0qKw%2F-M2K0VqrG04AmSTJVwRu%2FScreenshot%202020-03-13%20at%2011.21.35%20PM.png?alt=media\&token=a14ccc42-1ad6-4267-88a6-4bfd8d34c22f)

```markup
<!-- Tag with a light background -->
<button class="btn btn-tag  btn-tag-light m-r-20">Link me</button>
<!-- Tag with a dark background -->
<button class="btn btn-tag  btn-tag-dark">Link me</button>
<!-- Rounded tag with a light background -->
<button class="btn btn-tag   btn-tag-light btn-tag-rounded m-r-20">Link me</button>
<!-- Rounded tag with a dark background -->
<button class="btn btn-tag   btn-tag-dark btn-tag-rounded">Link me</button>
```

## **Rounded buttons**

Any button can be made to have rounded corners by adding `.btn-rounded`

![](https://3396288764-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDBWrdKcsIL5-tSGnv_%2F-M2K-Jp5AINPjIyu0qKw%2F-M2K0Z4H8g0J34UugbQM%2FScreenshot%202020-03-13%20at%2011.21.38%20PM.png?alt=media\&token=cdccae04-0473-4ee0-8ce1-a0165d95232a)

```markup
<!-- Large rounded button -->
<button class="btn btn-lg btn-rounded">Large rounded</button>

<!-- Regular rounded button -->
<button class="btn btn-rounded">Regular</button>

<!-- Small rounded button -->
<button class="btn btn-sm btn-rounded">Small</button>
```