# How to make side-by-side floating buttons

**URL:** <https://community.glideapps.com/t/how-to-make-side-by-side-floating-buttons/47294>\
**Category:** Ask for Help\
**Created:** [August 20, 2022, 3:30am UTC](https://community.glideapps.com/t/how-to-make-side-by-side-floating-buttons/47294 "2022-08-20T03:30:06Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Michael\_Zaps](https://avatars.discourse-cdn.com/v4/letter/m/c5a1d2/32.png) [@Michael\_Zaps](https://community.glideapps.com/u/Michael_Zaps)\
**Post date:** [August 20, 2022, 3:30am UTC](https://community.glideapps.com/t/how-to-make-side-by-side-floating-buttons/47294/1 "2022-08-20T03:30:06Z")

</div>

I’m trying to use multiple floating buttons that sit side-by-side toward the bottom of the screen so that my users can choose from multiple options when viewing profile cards. Any advice on building that out? @MegannLock

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [August 20, 2022, 3:32am UTC](https://community.glideapps.com/t/how-to-make-side-by-side-floating-buttons/47294/2 "2022-08-20T03:32:58Z")

</div>

use CSS images, not buttons…

> **[Code BOOK - Desktop](https://code-book-desktop.glideapp.io/)**
>
> share cool CSS, scripts and links

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [August 20, 2022, 3:42am UTC](https://community.glideapps.com/t/how-to-make-side-by-side-floating-buttons/47294/3 "2022-08-20T03:42:17Z")

</div>

make your own buttons… copy and paste this code into the rich text component… you will get a nice go-back button…  
adjust position and with to your own needs… change image URL… add a custom action to that rich text component… that’s all…

```auto
<div style="
position: fixed;
bottom: 6vh; 
right :0.5%; 
width:8%;
z-index:1;
" target="_blank">
<img class="back_image3" src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/u19DNGizzna5AzRcPZbM/pub/OZv3CI60Em1RKyayl5PC.png">

```

and if you put this code in a template… you can have these parameters as variables… that will make your buttons more cool 😉

---

<div class="post-metadata">

**Author:** ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)\
**Post date:** [August 20, 2022, 9:35am UTC](https://community.glideapps.com/t/how-to-make-side-by-side-floating-buttons/47294/4 "2022-08-20T09:35:36Z")

</div>

If you want to stick to standard Glide features, you can add multiple button components, set them as floating, and they will display on top of one another (instead of side by side).

---

<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:** [August 20, 2022, 11:14am UTC](https://community.glideapps.com/t/how-to-make-side-by-side-floating-buttons/47294/5 "2022-08-20T11:14:58Z")

</div>

You can adjust the position of floating buttons with CSS.

Example:

```auto
<pre><span><style>
  .fab-target >:nth-child(1) {
  position: fixed;
  right: 25% !important;
}

```

…results in:

![Screen Shot 2022-08-20 at 7.11.22 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/c/dc575f9b4bd3500248c10e7cb63155de09e764e9.png)

You can use `right`, `left`, `top` & `bottom` to move them around as you like.  
And if you have multiple buttons, you should address them individually using `nth-child()`

---

<div class="post-metadata">

**Author:** ![Michael\_Zaps](https://avatars.discourse-cdn.com/v4/letter/m/c5a1d2/32.png) [@Michael\_Zaps](https://community.glideapps.com/u/Michael_Zaps)\
**Post date:** [August 24, 2022, 1:00am UTC](https://community.glideapps.com/t/how-to-make-side-by-side-floating-buttons/47294/6 "2022-08-24T01:00:24Z")

</div>

> [@Uzo](#):
>
> ```auto
> <div style="
> position: fixed;
> bottom: 6vh; 
> right :0.5%; 
> width:8%;
> z-index:1;
> " target="_blank">
> <img class="back_image3" src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/u19DNGizzna5AzRcPZbM/pub/OZv3CI60Em1RKyayl5PC.png">
> 
> ```

Where do you add the code?

---

<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:** [August 24, 2022, 1:02am UTC](https://community.glideapps.com/t/how-to-make-side-by-side-floating-buttons/47294/7 "2022-08-24T01:02:22Z")

</div>

In a [Rich Text](https://www.glideapps.com/docs/reference/app-components/rich-text) component.

---

<div class="post-metadata">

**Author:** ![Michael\_Zaps](https://avatars.discourse-cdn.com/v4/letter/m/c5a1d2/32.png) [@Michael\_Zaps](https://community.glideapps.com/u/Michael_Zaps)\
**Post date:** [August 24, 2022, 1:03am UTC](https://community.glideapps.com/t/how-to-make-side-by-side-floating-buttons/47294/8 "2022-08-24T01:03:04Z")

</div>

> [@Darren\_Murphy](#):
>
> ```auto
> <pre><span><style>
> .fab-target >:nth-child(1) {
> position: fixed;
> right: 25% !important;
> }
> 
> ```

so something like this:

```
.fab-target \>:nth-child(1) { position: fixed; right: 25% !important; }
```
.fab-target \>:nth-child(2) { position: fixed; right: 25% !important; }
```
.fab-target \>:nth-child(3) { position: fixed; right: 25% !important; }
```
```
```

---

<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:** [August 24, 2022, 1:06am UTC](https://community.glideapps.com/t/how-to-make-side-by-side-floating-buttons/47294/9 "2022-08-24T01:06:26Z")

</div>

That would result in all 3 buttons floating in exactly the same position, 25% from the right margin. So you would only see one button.

Experiment with it a bit and you’ll soon work out what you need for your use case.

---

<div class="post-metadata">

**Author:** ![Michael\_Zaps](https://avatars.discourse-cdn.com/v4/letter/m/c5a1d2/32.png) [@Michael\_Zaps](https://community.glideapps.com/u/Michael_Zaps)\
**Post date:** [August 24, 2022, 2:54am UTC](https://community.glideapps.com/t/how-to-make-side-by-side-floating-buttons/47294/10 "2022-08-24T02:54:55Z")

</div>

> [@Darren\_Murphy](#):
>
> ```auto
> <pre><span><style>
> .fab-target >:nth-child(1) {
> position: fixed;
> right: 25% !important;
> }
> 
> ```

 ![Screen Shot 2022-08-23 at 6.11.07 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/c/5c5441f3db9524e09a281b1992b68954cdb4b7a5.png)

I’m getting this despite the following css:

```
.fab-target \>:nth-child(1) { position: fixed; right: 25% !important; }
```
.fab-target \>:nth-child(2) { position: fixed; right: 50% !important; }
```
.fab-target \>:nth-child(3) { position: fixed; right: 75% !important; } Any advice? I'm trying to get the buttons to be centered at the bottom.
```
```
```

---

<div class="post-metadata">

**Author:** ![Michael\_Zaps](https://avatars.discourse-cdn.com/v4/letter/m/c5a1d2/32.png) [@Michael\_Zaps](https://community.glideapps.com/u/Michael_Zaps)\
**Post date:** [August 24, 2022, 3:15am UTC](https://community.glideapps.com/t/how-to-make-side-by-side-floating-buttons/47294/11 "2022-08-24T03:15:42Z")

</div>

nvm - figured it out. I had to add them to separate rich text components. Also, another heads up for anyone else doing the same thing, if you want to adjust the position either top, bottom, left, or right, you will need to create separate components for that as well.