# Trigger Buttons

![Before](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MbwBb_P8y8pY7-1MqnM%2F-MbwFyOt0luOPmLs-ank%2Fimage.png?alt=media\&token=0f0c39b5-fa71-4999-b169-f4a778c0b711)

![As a Button](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MbwBb_P8y8pY7-1MqnM%2F-MbwFaFtyn3SuW7zM8mz%2Fimage.png?alt=media\&token=f59836c8-1209-4c0c-86bd-b8ab07233f67)

### The CSS

We define the stylings below so they mimic the look of Knack menu buttons

```
/***************************************/
/*********** Trigger Buttons ***********/
/***************************************/
.trigger-button {
  border-style: solid;
  border-width: 1px;
  border-color: #dddddd;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 0px gray;
  background-color: #ebebeb;
  color: #163f6e;
  padding: 5px 10px;
  font-size: 1.1em;
  text-align: center;
  display: inline-block;
}

.trigger-button:hover {
  cursor: pointer;
  opacity: 0.9;
  border-color: gray;
}
```

### The HTML

We call the button class we have above, include an fa icon, and set the button label

```
<button class="trigger-button"><i class="fa fa-plus-square"></i> New Record</button>
```

### How to Implement

{% tabs %}
{% tab title="1️⃣" %}
Copy pasta the CSS. This styling will apply to all trigger buttons where you apply the html

```
.trigger-button {
  border-style: solid;
  border-width: 1px;
  border-color: #dddddd;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 0px gray;
  background-color: #ebebeb;
  color: #163f6e;
  padding: 5px 10px;
  font-size: 1.1em;
  text-align: center;
  display: inline-block;
}

.trigger-button:hover {
  cursor: pointer;
  opacity: 0.9;
  border-color: gray;
}
```

{% endtab %}

{% tab title="2️⃣" %}
Select the Trigger you want to update with html

![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MbwBb_P8y8pY7-1MqnM%2F-MbwHBhb0bCfOY27swzU%2Fimage.png?alt=media\&token=ed8eb5bd-726b-4a94-9552-2ec184300ebe)

Use a `<button>` tag to set the button class

```
<button class="trigger-button">
```

{% endtab %}

{% tab title="3️⃣" %}
Set your fa icon

```
<i class="fa fa-plus-square"></i>
```

{% endtab %}

{% tab title="4️⃣" %}
Set your trigger text after your icon if not already present

```
New Record
```

Lastly, be sure to close your `<button>` tag

```
</button>
```

{% endtab %}
{% endtabs %}