# Custom floating buttons: 3 in a row at the bottom of the screen + one with text?

**URL:** <https://community.glideapps.com/t/custom-floating-buttons-3-in-a-row-at-the-bottom-of-the-screen-one-with-text/41186>\
**Category:** Ask for Help\
**Created:** [April 24, 2022, 9:56pm UTC](https://community.glideapps.com/t/custom-floating-buttons-3-in-a-row-at-the-bottom-of-the-screen-one-with-text/41186 "2022-04-24T21:56:54Z")\
**Posts on this page:** 1\
**Showing post:** 10

<div class="post-metadata">

**Author:** ![Tamara\_Didenko](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/tamara_didenko/32/42215_2.png) [@Tamara\_Didenko](https://community.glideapps.com/u/Tamara_Didenko)\
**Post date:** [May 1, 2022, 4:25pm UTC](https://community.glideapps.com/t/custom-floating-buttons-3-in-a-row-at-the-bottom-of-the-screen-one-with-text/41186/10 "2022-05-01T16:25:11Z")

</div>

Ok, so, went on quite an adventure to figure this out. In the end, [this post](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/80) with the [prototype linked](https://custom-floating-btn.glideapp.io/) put me on the right path.

![CleanShot 2022-05-01 at 12.03.13](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/3/c3588a1731a93da0de12171b8f1918f9daf84042.gif)

## Use Floating buttons to target them by `title`

> [@Tell Glide how you use CSS](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/79):
>
> Due to the fact that the float button has the customizable title attribute which is normally used as a tooltip, we can use this to select exactly that element.

Using this insight, I created 3 floating buttons and named them. It allows you to target a **specific** floating button (not dependent on where it is on the page).  
As far as I can tell, the underlying HTML for floating buttons looks like this:

```auto
<button title="Your title">
   <div class="floating-btn-style">
      <div>
         <svg>...</svg>
      </div> 
   </div>
</button>

```

So, knowing that, I was able to place and

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

/* adjust button component here: position, size, shadows, etc. */
[title="Mark complete"] {
position: fixed;
bottom:50px;
left:23%;
width:54%;
height: 60px;
filter: drop-shadow(0px 2px 16px rgba(6, 51, 54, 0.1));
}

/* "visible" part of styling goes here: button color, border, border-radius, etc. */
[title="Mark complete"] > div.floating-btn-style {
background: #53B7AD;
border-radius: 16px;
}

/* adding text to the middle button */
[title="Mark complete"] > div.floating-btn-style::before {
content: "Mark completed";
color: white;
font-size: 16px;
margin-right: 8px;
font-weight: 600;
}

/* style the icon here */
[title="Mark complete"] > div > div > svg {
fill: white;
width: 24px;
}

```

* * *

## Still some problems with the placement though…

So far, this was the most stable CSS structure as far as the sizing/placement of the buttons goes. Except for when I try to style a list above to have margins, I run into issues again.

 ![CleanShot 2022-05-01 at 12.20.22@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/0/e07a90472af9dcf7c885165dfabaa16fdcb3dec2.png)

I’m not sure how to enable copying apps with the new team structure. I’d be happy to share it if anyone wants to dig in…  
[https://joyous-turkey-6842.glideapp.io/dl/ewAiAHQAIgA6ADAALAAiAHMAIgA6ACIAYwBsAGEAcwBzAC0AbgBhAHQAaQB2AGUALQB0AGEAYgBsAGUALQA5AHcAVwBUAFIAOABWAFIAbABiAGEAQgBtAGoAWAA0AFkAYwBSAHIAIgAsACIAcgAiADoAIgA5AFIAYQBVAGoAVQBoAG0AUgAuAGUAYwBSAGUAQgBJAEMARQBXAFkANAB3ACIALAAiAG4AIgA6ACIATwB2AGEAbAAiAH0A](https://joyous-turkey-6842.glideapp.io/dl/ewAiAHQAIgA6ADAALAAiAHMAIgA6ACIAYwBsAGEAcwBzAC0AbgBhAHQAaQB2AGUALQB0AGEAYgBsAGUALQA5AHcAVwBUAFIAOABWAFIAbABiAGEAQgBtAGoAWAA0AFkAYwBSAHIAIgAsACIAcgAiADoAIgA5AFIAYQBVAGoAVQBoAG0AUgAuAGUAYwBSAGUAQgBJAEMARQBXAFkANAB3ACIALAAiAG4AIgA6ACIATwB2AGEAbAAiAH0A)

---

_[View the full topic](https://community.glideapps.com/t/custom-floating-buttons-3-in-a-row-at-the-bottom-of-the-screen-one-with-text/41186)._