Trigger Buttons

How to style action triggers like Knack Buttons instead of a text link

Before

As a Button

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

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;
}

2️⃣

3️⃣

4️⃣