# Button Bar different colours for left and right

**URL:** <https://community.glideapps.com/t/button-bar-different-colours-for-left-and-right/22494>\
**Category:** Ask for Help\
**Created:** [February 9, 2021, 3:52pm UTC](https://community.glideapps.com/t/button-bar-different-colours-for-left-and-right/22494 "2021-02-09T15:52:19Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Marra](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@Marra](https://community.glideapps.com/u/Marra)\
**Post date:** [February 9, 2021, 3:52pm UTC](https://community.glideapps.com/t/button-bar-different-colours-for-left-and-right/22494/1 "2021-02-09T15:52:19Z")

</div>

How can I change the colour of the Button Bar right and left independently i.e. right to be red and left to be blue?

/Regards

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [February 9, 2021, 3:59pm UTC](https://community.glideapps.com/t/button-bar-different-colours-for-left-and-right/22494/2 "2021-02-09T15:59:12Z")

</div>

Hola @Marra,

You might have to use CSS to achieve this. As of right now there’s no native way to do it.

Try and see if something like this helps

> [@Beautiful Design App](https://community.glideapps.com/t/beautiful-design-app/16191/223):
>
> Here you go! By the way, this might be a solution for you too, @Jeff_Hager, to target different FABs \<pre\>\<span\>\<style\> .fab-target :nth-child(1) \> \* { background-color: red !important; } .fab-target :nth-child(2) \> \* { background-color: green !important; }

---

<div class="post-metadata">

**Author:** ![Marra](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@Marra](https://community.glideapps.com/u/Marra)\
**Post date:** [February 10, 2021, 7:59am UTC](https://community.glideapps.com/t/button-bar-different-colours-for-left-and-right/22494/3 "2021-02-10T07:59:03Z")

</div>

Hey @SantiagoPerez,

Thank you, I will have a look, guess that is why my search did not find any ‘hits’ because if search “colour” and not “color” which is the US spelling :-). Anyway let me scratch around.

/M

---

<div class="post-metadata">

**Author:** ![Marra](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@Marra](https://community.glideapps.com/u/Marra)\
**Post date:** [February 10, 2021, 2:40pm UTC](https://community.glideapps.com/t/button-bar-different-colours-for-left-and-right/22494/4 "2021-02-10T14:40:49Z")

</div>

Just reporting back: right and left different colours

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/9/b99e460814c2d631d8565630ff1bcec3e90806c2.png)

You need to set right button to “Transparent” to trigger the different class name  
I also added extra colour change when button is pressed  
Suggestions are encouraged

Next challenge to to change to top 2 Buttom Bars to “addopt” the colour of when either Left or Right is pressed.

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/b/cb464984e318fbeac1a07858bbd50dcb89da9cf4.png)

CSS:

```
[data-test="app-button-view"] {position:center; width:30%; height:40px; border-radius:50px; text-align:center; font-size:15px; font-weight: normal;} [data-test="app-button-view"]:active {background-color: #bf0606 !important; border-color: #bf0606 !important;} .dqKUll.dqKUll { background-color: grey; border-color: grey; color: white; } .fdrRBb.fdrRBb { background-color: grey; border-color: grey; color: white; }
```

---

<div class="post-metadata">

**Author:** ![Errcomp](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/errcomp/32/13195_2.png) [@Errcomp](https://community.glideapps.com/u/Errcomp)\
**Post date:** [February 10, 2021, 11:18pm UTC](https://community.glideapps.com/t/button-bar-different-colours-for-left-and-right/22494/5 "2021-02-10T23:18:17Z")

</div>

Are these buttons an inline list? If so, you can set the color when clicked by using an if statement that switches between two different colored images when clicked. The if statements checks if you submitted an entry with that button via a relation and lookup. Does that help?

---

<div class="post-metadata">

**Author:** ![Marra](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@Marra](https://community.glideapps.com/u/Marra)\
**Post date:** [February 11, 2021, 8:09am UTC](https://community.glideapps.com/t/button-bar-different-colours-for-left-and-right/22494/6 "2021-02-11T08:09:46Z")

</div>

Hi @Errcomp, I was also thinking the same, but first wanted to give it a try with buttons. I might explore this route, as the CSS classes used to make buttons work might break at any time.

---

<div class="post-metadata">

**Author:** ![Marra](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@Marra](https://community.glideapps.com/u/Marra)\
**Post date:** [February 11, 2021, 8:51pm UTC](https://community.glideapps.com/t/button-bar-different-colours-for-left-and-right/22494/7 "2021-02-11T20:51:28Z")

</div>

Update: still using Button Bar. Setting the left side to “Bordered”

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/c/0c2a27976c235633fcfadeb60677856242d38420.png)

CSS:

```
[data-test="app-button-view"] {position:center; width:30%; height:40px; border-radius:50px; color: white !important; background-color: #1798a3 !important; border-color: #1798a3 !important; text-align:center; box-shadow: 0px 0px 0px 4px yellow; font-size:15px; font-weight: bold;} [data-test="app-button-view"]:active {background-color: red !important; border-color: red !important;}
```

---

<div class="post-metadata">

**Author:** ![Marra](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@Marra](https://community.glideapps.com/u/Marra)\
**Post date:** [February 11, 2021, 9:10pm UTC](https://community.glideapps.com/t/button-bar-different-colours-for-left-and-right/22494/8 "2021-02-11T21:10:04Z")

</div>

Or you can use “INSET” to change the color of the Button set to Bordered

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/0/a0053d0949ef5f9459ea1589d937b9d797d61859.png)

```
[data-test="app-button-view"] {position:center; width:30%; height:40px; border-radius:50px; color: white !important; background-color: #1798a3 !important; border-color: #1798a3 !important; text-align:center; box-shadow:20px 20px 50px 20px blue inset; font-size:15px; font-weight: bold;} [data-test="app-button-view"]:active {background-color: red !important; border-color: red !important;}
```

---

<div class="post-metadata">

**Author:** ![christoph](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/christoph/32/22794_2.png) [@christoph](https://community.glideapps.com/u/christoph)\
**Post date:** [April 29, 2021, 7:12pm UTC](https://community.glideapps.com/t/button-bar-different-colours-for-left-and-right/22494/9 "2021-04-29T19:12:02Z")

</div>

Hi @Marra,  
have you ever tried to change the alignment of the text inside the button to the left or right?  
It seems that [data-test=“app-button-view”]{text-align:left;} work.

I’m using a standard button, not a button bar.  
Thanks.

---

<div class="post-metadata">

**Author:** ![Marra](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@Marra](https://community.glideapps.com/u/Marra)\
**Post date:** [April 29, 2021, 8:14pm UTC](https://community.glideapps.com/t/button-bar-different-colours-for-left-and-right/22494/10 "2021-04-29T20:14:23Z")

</div>

Hi @christoph have you tried “justify-content: left;” ?

---

<div class="post-metadata">

**Author:** ![christoph](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/christoph/32/22794_2.png) [@christoph](https://community.glideapps.com/u/christoph)\
**Post date:** [April 30, 2021, 6:00am UTC](https://community.glideapps.com/t/button-bar-different-colours-for-left-and-right/22494/11 "2021-04-30T06:00:01Z")

</div>

Perfect, this works. Thank you.

---

<div class="post-metadata">

**Author:** ![abe.sherman](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/abe.sherman/32/11260_2.png) [@abe.sherman](https://community.glideapps.com/u/abe.sherman)\
**Post date:** [June 18, 2021, 1:00am UTC](https://community.glideapps.com/t/button-bar-different-colours-for-left-and-right/22494/12 "2021-06-18T01:00:40Z")

</div>

> [@Marra](#):
>
> ```auto
> [data-test="app-button-view"]
> {position:center;
> width:30%;
> height:40px;
> border-radius:50px;
> color: white !important;
> background-color: #1798a3 !important;
> border-color: #1798a3 !important;
> text-align:center;
> box-shadow:20px 20px 50px 20px blue inset;
> font-size:15px;
> font-weight: bold;}
> [data-test="app-button-view"]:active 
> {background-color: red !important;
> border-color: red !important;}
> 
> ```

Is this supposed to change colors when click as static? If not can it be done? For instance change colors when on pressed between each other. Or whatever method we can use. Like reset, and now i left/right is colored selected.

---

<div class="post-metadata">

**Author:** ![Marra](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@Marra](https://community.glideapps.com/u/Marra)\
**Post date:** [June 18, 2021, 7:25am UTC](https://community.glideapps.com/t/button-bar-different-colours-for-left-and-right/22494/13 "2021-06-18T07:25:50Z")

</div>

Hi @abe.sherman

Correct when you click it it change colour for a brief moment, this give you an visual indication as that the click was registered. However it reverts back to the original static colour. Hope this answers your question.

---

<div class="post-metadata">

**Author:** ![NoCodeAndy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nocodeandy/32/62530_2.png) [@NoCodeAndy](https://community.glideapps.com/u/NoCodeAndy)\
**Post date:** [January 17, 2024, 4:51pm UTC](https://community.glideapps.com/t/button-bar-different-colours-for-left-and-right/22494/15 "2024-01-17T16:51:48Z")

</div>