# Buttons

## **Colors**

Pages buttons use the same contextual classes introduced in Bootstrap

![](/files/-M2K-ZXFjhXDOqtem2jk)

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

![](/files/-M2K-qK7mZPHkewMShMJ)

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

![](/files/-M2K0MaRIva8277NCJAB)

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

![](/files/-M2K0VqrG04AmSTJVwRu)

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

![](/files/-M2K0Z4H8g0J34UugbQM)

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


---

# 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://docs.pages.revox.io/ui-elements/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.