# CSS to change button color

**URL:** <https://community.glideapps.com/t/css-to-change-button-color/60958>\
**Category:** Ask for Help\
**Created:** [April 25, 2023, 2:36pm UTC](https://community.glideapps.com/t/css-to-change-button-color/60958 "2023-04-25T14:36:24Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dvir](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dvir/32/50196_2.png) [@Dvir](https://community.glideapps.com/u/Dvir)\
**Post date:** [April 25, 2023, 2:36pm UTC](https://community.glideapps.com/t/css-to-change-button-color/60958/1 "2023-04-25T14:36:24Z")

</div>

Hey all,

I’m trying to change the colors of buttons using CSS. I know it was possible in classic Glide apps, can it also be done in the new apps?

Thanks  
Dvir

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [April 25, 2023, 5:00pm UTC](https://community.glideapps.com/t/css-to-change-button-color/60958/2 "2023-04-25T17:00:48Z")

</div>

Do you have a Business Plan?

---

<div class="post-metadata">

**Author:** ![Dvir](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dvir/32/50196_2.png) [@Dvir](https://community.glideapps.com/u/Dvir)\
**Post date:** [April 25, 2023, 5:15pm UTC](https://community.glideapps.com/t/css-to-change-button-color/60958/3 "2023-04-25T17:15:20Z")

</div>

Yes, I’ve done some very basic use of css but so far couldn’t figure out button colors.

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [April 25, 2023, 5:34pm UTC](https://community.glideapps.com/t/css-to-change-button-color/60958/4 "2023-04-25T17:34:18Z")

</div>

Try

> .filled {  
> background-color: #color;  
> }

Or try

> data-testid=“wbb-button” {  
> background-color: #color;  
> }

Quotes might need to be fixed if you c/p

---

<div class="post-metadata">

**Author:** ![Dvir](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dvir/32/50196_2.png) [@Dvir](https://community.glideapps.com/u/Dvir)\
**Post date:** [May 3, 2023, 3:42pm UTC](https://community.glideapps.com/t/css-to-change-button-color/60958/5 "2023-05-03T15:42:57Z")

</div>

Thanks Joe.

First one colored the entire background of the button block, not the button itself.

I wasn’t sure how to use the second one.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 3, 2023, 11:33pm UTC](https://community.glideapps.com/t/css-to-change-button-color/60958/6 "2023-05-03T23:33:14Z")

</div>

> [@CSS for Buttons Background](https://community.glideapps.com/t/css-for-buttons-background/61161/2):
>
> div[data-testid\*="test-tiles"] button[aria-label="Primary"].tiles { background-color: gold; } div[data-testid\*="test-tiles"] button[aria-label="Secondary"].tiles { background-color: green; color: white; } div[data-testid\*="test-tiles"] button[aria-label="Go!"].tiles { background-color: magenta; color: white; } The custom CSS class here is “test-tiles”. If you have a sole “open link” action, it should change from “button[aria-label…]” to “a[aria-label…”.

Please try this.