# CSS help please - how to change a Button Bar component

**URL:** <https://community.glideapps.com/t/css-help-please-how-to-change-a-button-bar-component/32028>\
**Category:** Ask for Help\
**Created:** [September 20, 2021, 7:47am UTC](https://community.glideapps.com/t/css-help-please-how-to-change-a-button-bar-component/32028 "2021-09-20T07:47:25Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [September 20, 2021, 7:47am UTC](https://community.glideapps.com/t/css-help-please-how-to-change-a-button-bar-component/32028/1 "2021-09-20T07:47:25Z")

</div>

I have searched the CodeBook and the Notion for the CSS, but I have missed it somehow.

Use case:

- I have a button bar at the bottom of my onboarding screens
- I would like to make the distance between the tow buttons larger - so they are not really in the middle, but more towards the side.

Any ideas? Thanks!

 ![Screenshot 2021-09-20 at 09.45.42](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/1/e1e2dc3f01d64a3f384791d1d56889cc7e50158a.png)

---

<div class="post-metadata">

**Author:** ![Luther](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/luther/32/17929_2.png) [@Luther](https://community.glideapps.com/u/Luther)\
**Post date:** [September 20, 2021, 8:52am UTC](https://community.glideapps.com/t/css-help-please-how-to-change-a-button-bar-component/32028/2 "2021-09-20T08:52:09Z")

</div>

Not the response you are looking for but just an input on the text displayed on the screen…

It should be

“It is contains a QR code connected to our database, so you can PROVE its validity”

“The whole process TAKES less than 30 Min”.

Just to correct the grammar. I hope you don’t take this otherwise…

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [September 20, 2021, 8:59am UTC](https://community.glideapps.com/t/css-help-please-how-to-change-a-button-bar-component/32028/3 "2021-09-20T08:59:35Z")

</div>

Just correcting your correction…

> [@Luther](#):
>
> “It is contains a QR code connected to our database, so you can PROVE its validity”

“It is” should be “It”

😝😂

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [September 20, 2021, 9:06am UTC](https://community.glideapps.com/t/css-help-please-how-to-change-a-button-bar-component/32028/4 "2021-09-20T09:06:49Z")

</div>

None taken! 🙂 thank you 🙂

---

<div class="post-metadata">

**Author:** ![Roldy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roldy/32/36068_2.png) [@Roldy](https://community.glideapps.com/u/Roldy)\
**Post date:** [September 20, 2021, 9:13am UTC](https://community.glideapps.com/t/css-help-please-how-to-change-a-button-bar-component/32028/5 "2021-09-20T09:13:54Z")

</div>

Controlling a double button via CSS is really difficult; if after your buttons there are no other components further down (which I currently don’t see), an idea might be to use two separate float buttons and place them towards the bottom corners of the screen. Left and bottom right I mean.  
I’ve never done this but it might work, let me know if it’s a solution that can work for you then I’ll experiment.

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [September 20, 2021, 9:24am UTC](https://community.glideapps.com/t/css-help-please-how-to-change-a-button-bar-component/32028/6 "2021-09-20T09:24:48Z")

</div>

The float buttons are a good idea 🙂 I had floating buttons on the right side to start with forward and back, but I changed my mind about the UX at some point. I will have a quick go and see if I have any success - thanks for the idea!

And this screen is always fixed, so I could reference a nth component quite easily.

---

<div class="post-metadata">

**Author:** ![Roldy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roldy/32/36068_2.png) [@Roldy](https://community.glideapps.com/u/Roldy)\
**Post date:** [September 20, 2021, 9:27am UTC](https://community.glideapps.com/t/css-help-please-how-to-change-a-button-bar-component/32028/7 "2021-09-20T09:27:55Z")

</div>

you’re welcome

---

<div class="post-metadata">

**Author:** ![Luther](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/luther/32/17929_2.png) [@Luther](https://community.glideapps.com/u/Luther)\
**Post date:** [September 20, 2021, 9:44am UTC](https://community.glideapps.com/t/css-help-please-how-to-change-a-button-bar-component/32028/8 "2021-09-20T09:44:42Z")

</div>

That one is not mine actually but it’s the forum that did that…

My corrections are in “UPPERCASE” but thank you for pointing that out 😜😊🤗😂

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [September 20, 2021, 9:48am UTC](https://community.glideapps.com/t/css-help-please-how-to-change-a-button-bar-component/32028/9 "2021-09-20T09:48:55Z")

</div>

> [@Mark\_Turrell](#):
>
> but I changed my mind about the UX at some point.

Just while we’re all in grammar nazi mode…

UX = User Experience  
UI = User Interface

Every time you type UX when you really mean UI, a kitten dies somewhere 😛

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [September 20, 2021, 9:53am UTC](https://community.glideapps.com/t/css-help-please-how-to-change-a-button-bar-component/32028/10 "2021-09-20T09:53:01Z")

</div>

actually I was thinking of the experience navigating (UX) which was being translated into the interface (I). So no kittens have died (this time) 😉

---

<div class="post-metadata">

**Author:** ![PabloMFalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablomfalero/32/31166_2.png) [@PabloMFalero](https://community.glideapps.com/u/PabloMFalero)\
**Post date:** [September 20, 2021, 11:40am UTC](https://community.glideapps.com/t/css-help-please-how-to-change-a-button-bar-component/32028/11 "2021-09-20T11:40:33Z")

</div>

I’ll send you some CSS in a bit, the issue comes again between tablet and phone view

---

<div class="post-metadata">

**Author:** ![Luther](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/luther/32/17929_2.png) [@Luther](https://community.glideapps.com/u/Luther)\
**Post date:** [September 20, 2021, 12:31pm UTC](https://community.glideapps.com/t/css-help-please-how-to-change-a-button-bar-component/32028/12 "2021-09-20T12:31:07Z")

</div>

😂🤗 “No kittens have died…”

---

<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:** [September 20, 2021, 1:56pm UTC](https://community.glideapps.com/t/css-help-please-how-to-change-a-button-bar-component/32028/13 "2021-09-20T13:56:09Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/3/13fa18b7aaae8ed80f87f06d50512f47a8a370a6.jpeg)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/0/50f4afdaff9270b57acd9e6ff857ce267e049afc.jpeg)

I built this a while ago. Hope it helps. It’s 2 floating buttons.

```auto
<pre><span><style>

.fab-target >* {
	 position:fixed;
	 width:50px;
	 height:50px;
	 bottom: 10%;
}

.fab-target >:nth-child(1) {
left: 70% !important;
}

.fab-target >:nth-child(2) {
right: 70% !important;
}

```

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [September 20, 2021, 2:51pm UTC](https://community.glideapps.com/t/css-help-please-how-to-change-a-button-bar-component/32028/14 "2021-09-20T14:51:35Z")

</div>

This works - but then I have the problem of background color (easy) and icon foreground color (seems to be harder).

In the end, @PabloMFalero helped me out with some CSS for the button bar - works a treat!

Thanks all 🙂

```auto
<pre><span><style>
[data-test = "app-button-view"]> div> div {
}
div[id*='screenScrollView'] > div > :nth-child(7) {
margin-top:10px;
margin-left:-4%;
transform: translateX(-20%);
width:180%;
height:50px;
}

```

 ![Screenshot 2021-09-20 at 16.47.06](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/b/2ba5c22c29aa65740c2ccb333f7f7bc87e36f662.jpeg)  
 ![Screenshot 2021-09-20 at 16.46.58](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/3/23eed02d262eceaf9048ba3796e6f46f48da9bcf.jpeg)

---

<div class="post-metadata">

**Author:** ![PabloMFalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablomfalero/32/31166_2.png) [@PabloMFalero](https://community.glideapps.com/u/PabloMFalero)\
**Post date:** [September 20, 2021, 2:53pm UTC](https://community.glideapps.com/t/css-help-please-how-to-change-a-button-bar-component/32028/15 "2021-09-20T14:53:42Z")

</div>

Always happy to help 🙂

---

<div class="post-metadata">

**Author:** ![18\_acres](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/18_acres/32/50385_2.png) [@18\_acres](https://community.glideapps.com/u/18_acres)\
**Post date:** [November 13, 2022, 1:09pm UTC](https://community.glideapps.com/t/css-help-please-how-to-change-a-button-bar-component/32028/16 "2022-11-13T13:09:15Z")

</div>

I want custom icon to my floating button . Can any CSS expert assist me please ?

---

<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:** [November 13, 2022, 1:37pm UTC](https://community.glideapps.com/t/css-help-please-how-to-change-a-button-bar-component/32028/17 "2022-11-13T13:37:47Z")

</div>

Dont think thats possible. You’ll need to create a custom button, but you’ll lose the ability to add an action other that open an external link.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/8/18ca82e818dffddb8df8e4232852fed71a3fe871.jpeg)

---

<div class="post-metadata">

**Author:** ![18\_acres](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/18_acres/32/50385_2.png) [@18\_acres](https://community.glideapps.com/u/18_acres)\
**Post date:** [November 13, 2022, 6:59pm UTC](https://community.glideapps.com/t/css-help-please-how-to-change-a-button-bar-component/32028/18 "2022-11-13T18:59:23Z")

</div>

Ok sir Thank you . But How to create custom button ? .I don’t know the CSS . But I’m good in Adobe work. Actually I want to button design in adobe and add the actions to it . Can you please tell me on your free time about custom button ?

---

<div class="post-metadata">

**Author:** ![18\_acres](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/18_acres/32/50385_2.png) [@18\_acres](https://community.glideapps.com/u/18_acres)\
**Post date:** [November 13, 2022, 7:00pm UTC](https://community.glideapps.com/t/css-help-please-how-to-change-a-button-bar-component/32028/19 "2022-11-13T19:00:07Z")

</div>

> **[18 acres](https://18-acres-u2d7.glideapp.io)**

---

<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:** [November 13, 2022, 7:02pm UTC](https://community.glideapps.com/t/css-help-please-how-to-change-a-button-bar-component/32028/20 "2022-11-13T19:02:50Z")

</div>

Not sure how to create a button using Adobe. I just used HTML to create the button and CSS to style is. You might be able to add an image created in Adobe via html in Richtext and add an Action to that?

[Next page](https://community.glideapps.com/t/css-help-please-how-to-change-a-button-bar-component/32028.md?page=2)