# Primary and Secondary Button Style

**URL:** <https://forum.inductiveautomation.com/t/primary-and-secondary-button-style/23832>\
**Category:** Ignition Early Access\
**Created:** [April 3, 2019, 9:45pm UTC](https://forum.inductiveautomation.com/t/primary-and-secondary-button-style/23832 "2019-04-03T21:45:44Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![apgilber](https://avatars.discourse-cdn.com/v4/letter/a/eb9ed0/32.png) [@apgilber](https://forum.inductiveautomation.com/u/apgilber)\
**Post date:** [April 3, 2019, 9:45pm UTC](https://forum.inductiveautomation.com/t/primary-and-secondary-button-style/23832/1 "2019-04-03T21:45:44Z")

</div>

There was a recent update to the button object that created a property called Primary which toggles between the primary and secondary style. How/where do you define what the secondary style is?

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [April 3, 2019, 9:50pm UTC](https://forum.inductiveautomation.com/t/primary-and-secondary-button-style/23832/2 "2019-04-03T21:50:50Z")

</div>

Windows:

```auto
C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes

```

macOS (similar for Linux):

```auto
/usr/local/ignition/data/modules/com.inductiveautomation.perspective/themes

```

Without any changes to that file, you want line 146:

```auto
.button-secondary {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  color: #000000;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  background-clip: padding-box;
  border: 1px solid #C1C9D0;
  background-color: #D7DBDE;
  background-size: 101% 101%;
  color: #70757A;
  font-weight: 700;
  display: inline-block;
  text-decoration: none; }
  .button-secondary img {
    vertical-align: middle; }
  .button-secondary.icon-left img {
    padding-right: 0.25rem; }
  .button-secondary.icon-right img {
    padding-left: 0.25rem; }
  .button-secondary svg {
      fill: #70757A; }  
  .button-secondary:hover, .button-secondary:active {
    background-color: #D6DBDE; 
    cursor: pointer; }
  .button-secondary:hover {
    box-shadow: 0 2px 4px 0 rgba(34,34,34,0.4); }
  .button-secondary:active {
    box-shadow: inset 0 0 8px 4px rgba(34,34,34,0.4); }
  .button-secondary:disabled {
    pointer-events: none;
    background-color: #DDE1E4; }

```

---

<div class="post-metadata">

**Author:** ![SBL\_MC](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/sbl_mc/32/56813_2.png) [@SBL\_MC](https://forum.inductiveautomation.com/u/SBL_MC)\
**Post date:** [November 14, 2019, 1:35pm UTC](https://forum.inductiveautomation.com/t/primary-and-secondary-button-style/23832/3 "2019-11-14T13:35:11Z")

</div>

Hi there,

is this the only solution to change how a button responds to mouse gestures? Hover and click is defined in our customers design guide, and Id like to change them to alter background color related to the border color.

Cheers.

---

<div class="post-metadata">

**Author:** ![andytimc](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/andytimc/32/11938_2.png) [@andytimc](https://forum.inductiveautomation.com/u/andytimc)\
**Post date:** [February 5, 2020, 10:35pm UTC](https://forum.inductiveautomation.com/t/primary-and-secondary-button-style/23832/4 "2020-02-05T22:35:10Z")

</div>

You can create “styles” which allows you to have a hover state.