Button Bar different colours for left and right

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

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

Hey @Santiago_Perez1,

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

1 Like

Just reporting back: right and left different colours

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

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;
}
4 Likes

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?

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.

1 Like

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

image

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;}
2 Likes

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

image


[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;}
6 Likes

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.

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

Perfect, this works. Thank you.