# Button color change based on a specific condition

**URL:** https://community.glideapps.com/t/button-color-change-based-on-a-specific-condition/2553
**Category:** Feature Requests
**Created:** [December 1, 2019, 11:46am UTC](https://community.glideapps.com/t/button-color-change-based-on-a-specific-condition/2553 "2019-12-01T11:46:10Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![gangyao](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gangyao/32/51_2.png) [@gangyao](https://community.glideapps.com/u/gangyao)
#### Post date: [December 1, 2019, 11:46am UTC](https://community.glideapps.com/t/button-color-change-based-on-a-specific-condition/2553/1 "2019-12-01T11:46:10Z")

</div>

Currently, we can only use a condition to **hide or show** the button. Would love to see the feature that **the color** of “Button” (like “submit”) changes based on a specific condition. For example, if a previous condition is met, the color of the button will turn from light to dark (pretty similar to the last step of “Buy button”—“Place order”). And of course, users can’t submit when the button has a light color while if the colors turns to dark, users will be allowed to perform the action.

---

<div class="post-metadata">

### Author: ![spencersRus](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/spencersrus/32/69_2.png) [@spencersRus](https://community.glideapps.com/u/spencersRus)
#### Post date: [December 1, 2019, 12:04pm UTC](https://community.glideapps.com/t/button-color-change-based-on-a-specific-condition/2553/2 "2019-12-01T12:04:53Z")

</div>

This may not be what you are EXACTLY looking for, but you can make a button show when the customer is ready.  
Create a “Buy” button (possibly an image)  
Then under the “Features” add a Condition -  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/a/a2dddea3f84326de869faa279458a66bc1a71ac4.png)

I have a mockup here that uses a Switch to get the next thing to show.

Here is the app - the next step is not shown until the user clicks/switches the component.  
[https://9emis.glideapp.io](https://9emis.glideapp.io)

---

<div class="post-metadata">

### Author: ![Christophe\_HK](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/christophe_hk/32/4161_2.png) [@Christophe\_HK](https://community.glideapps.com/u/Christophe_HK)
#### Post date: [December 1, 2019, 8:43pm UTC](https://community.glideapps.com/t/button-color-change-based-on-a-specific-condition/2553/3 "2019-12-01T20:43:07Z")

</div>

Yep, I did the same, using a switch. It works fine.

---

<div class="post-metadata">

### Author: ![gangyao](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gangyao/32/51_2.png) [@gangyao](https://community.glideapps.com/u/gangyao)
#### Post date: [December 1, 2019, 9:58pm UTC](https://community.glideapps.com/t/button-color-change-based-on-a-specific-condition/2553/4 "2019-12-01T21:58:14Z")

</div>

@spencersRus @Christophe_HK Thanks for the reply. I know we can use a condition to hide/show the next thing/action. Like this:

 ![mp4](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/2/257e442549dd53957d48d1861d1c365ae20a05df.gif)

But I would like to see the feature that the button color changes when a condition is met. Like this:

 ![mp4](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/a/afd0f211540985b3eaa21fc7491a960f1dbb4718.gif)

---

<div class="post-metadata">

### Author: ![Christophe\_HK](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/christophe_hk/32/4161_2.png) [@Christophe\_HK](https://community.glideapps.com/u/Christophe_HK)
#### Post date: [December 1, 2019, 10:35pm UTC](https://community.glideapps.com/t/button-color-change-based-on-a-specific-condition/2553/5 "2019-12-01T22:35:39Z")

</div>

There’s a workaround, I think. You need two buttons, one with the first color and linked to “no action”. This button would be displayed as long as the checkbox is not checked, via a display condition. And once checked, the second button, linked to checkbox = true, would appear.

---

<div class="post-metadata">

### Author: ![gangyao](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gangyao/32/51_2.png) [@gangyao](https://community.glideapps.com/u/gangyao)
#### Post date: [December 1, 2019, 10:59pm UTC](https://community.glideapps.com/t/button-color-change-based-on-a-specific-condition/2553/6 "2019-12-01T22:59:22Z")

</div>

@Christophe_HK That’s a fantastic idea! It works!!

---

<div class="post-metadata">

### Author: ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [December 3, 2019, 3:25am UTC](https://community.glideapps.com/t/button-color-change-based-on-a-specific-condition/2553/7 "2019-12-03T03:25:55Z")

</div>

How do you set a button to ‘no action’?

---

<div class="post-metadata">

### Author: ![gangyao](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gangyao/32/51_2.png) [@gangyao](https://community.glideapps.com/u/gangyao)
#### Post date: [December 3, 2019, 10:29am UTC](https://community.glideapps.com/t/button-color-change-based-on-a-specific-condition/2553/8 "2019-12-03T10:29:23Z")

</div>

Hi, @Jeff_Hager

Here is what I did: for the action of the “Button”, I chose “Open as link”; and the link is directed to a **text**. In the end, users can see the button with light color but can’t click on it. Hope it makes sense to you 🙂

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/6/6f8a75a08c221dbf3b4d66c437ab8c10f3bd6f8a.jpeg)
