# Odd behavior with Style Class on button **URL:** \ **Category:** Ignition\ **Tags:** ignition81, perspective\ **Created:** [November 4, 2025, 3:56pm UTC](https://forum.inductiveautomation.com/t/odd-behavior-with-style-class-on-button/111933 "2025-11-04T15:56:24Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![ingraham](https://avatars.discourse-cdn.com/v4/letter/i/3ab097/32.png) [@ingraham](https://forum.inductiveautomation.com/u/ingraham)\ **Post date:** [November 4, 2025, 3:56pm UTC](https://forum.inductiveautomation.com/t/odd-behavior-with-style-class-on-button/111933/1 "2025-11-04T15:56:24Z")
HI all. I’m trying to use a style class on a button. In particular, trying to use `--qual-2` for the background color. When I do, it goes transparent. This happens for anything with a -number on the end, e.g. `--neutral-10`. If I use any color that DOESN'T have a -number on the end, it works, e.g. `--success` or `--info` work fine. If I use direct styling, any color works fine. Am I doing something wrong? Thanks. ![Screenshot 2025-11-04 094326](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/7/e7074e315cefd38158820464cfd28e9963dbf809.png) ![Screenshot 2025-11-04 094441](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/e/8e2065f0152283cb4f0504ab9a2e9aea8e0de8f2.png) ---
**Author:** ![Samuel\_Sueur](https://avatars.discourse-cdn.com/v4/letter/s/e36b37/32.png) [@Samuel\_Sueur](https://forum.inductiveautomation.com/u/Samuel_Sueur)\ **Post date:** [November 4, 2025, 4:00pm UTC](https://forum.inductiveautomation.com/t/odd-behavior-with-style-class-on-button/111933/2 "2025-11-04T16:00:01Z")
Hey, You have to surround your text with `var()` If that doesn’t work, make sure the css variable `--qual-2` really exists. ---
**Author:** ![ingraham](https://avatars.discourse-cdn.com/v4/letter/i/3ab097/32.png) [@ingraham](https://forum.inductiveautomation.com/u/ingraham)\ **Post date:** [November 4, 2025, 4:03pm UTC](https://forum.inductiveautomation.com/t/odd-behavior-with-style-class-on-button/111933/3 "2025-11-04T16:03:12Z")
That worked! Thanks. ---
**Author:** ![ingraham](https://avatars.discourse-cdn.com/v4/letter/i/3ab097/32.png) [@ingraham](https://forum.inductiveautomation.com/u/ingraham)\ **Post date:** [November 4, 2025, 4:12pm UTC](https://forum.inductiveautomation.com/t/odd-behavior-with-style-class-on-button/111933/4 "2025-11-04T16:12:16Z")
Well, I spoke too soon. It works for the -number, but doesn't work for `--word`, e.g. `var(--callToAction--disabled)`. Oddly, it seems to go to the default color, rather than transparent. ---
**Author:** ![Samuel\_Sueur](https://avatars.discourse-cdn.com/v4/letter/s/e36b37/32.png) [@Samuel\_Sueur](https://forum.inductiveautomation.com/u/Samuel_Sueur)\ **Post date:** [November 4, 2025, 4:26pm UTC](https://forum.inductiveautomation.com/t/odd-behavior-with-style-class-on-button/111933/5 "2025-11-04T16:26:05Z")
Hmmm Really interesting. Just had a go at it and this is what I observe: When directly specifying `var(--callToAction--disabled)` in the style properties of an element, it works: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/0/70a1603f3dfd2dd638a5cb31f985cddc24a4aecc.png) But when specifying a class where the background color is set to `var(--callToAction--disabled)`, it is automatically interpreted as `var(--callToActio-var(n--disabled))` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/9/e9aa7a3a4ae4948bed9bca51b05b80558b7a730f.png) This is maybe a bug on Ignition side ? **EDIT :** Whilst I think it’s a bug, there is a workaround !! Specify `var(--callToAction\-\-disabled)` in your style, note the `\` ---
**Author:** ![ingraham](https://avatars.discourse-cdn.com/v4/letter/i/3ab097/32.png) [@ingraham](https://forum.inductiveautomation.com/u/ingraham)\ **Post date:** [November 4, 2025, 4:49pm UTC](https://forum.inductiveautomation.com/t/odd-behavior-with-style-class-on-button/111933/6 "2025-11-04T16:49:48Z")
Thanks again!