# 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:** 19

<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, 7:12pm UTC](https://community.glideapps.com/t/custom-floating-buttons-3-in-a-row-at-the-bottom-of-the-screen-one-with-text/41186/19 "2022-05-01T19:12:44Z")

</div>

> [@11183](#):
>
> If only we could wrap these three buttons with a div… Flexbox would solve this in a couple of lines. Ah dreams dreams dreams)

That said… we actually don’t need to, because there is already a `div` wrapped around it, and it has a class name 🤯

![CleanShot 2022-05-01 at 15.09.26@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/6/c6a96c1c7d23fa89742b8bb1296ebfbdaad1a6a8.png)

So, after realizing it and overriding a few properties, voila! Worked like a charm! \

![CleanShot 2022-05-01 at 15.07.09](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/7/771310176c83357656fac42d59696e490a02ca91.gif)

Final code:

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

/* This is the code for floating buttons container: adjust position, margins, flex, etc */
.fab-target {
flex-direction: row !important;
left:16px !important;
right:16px !important;
bottom:16px !important;
justify-content: space-between;
gap:8px;
}

/* css button of: Prev */
[title="Prev"] {
display: inline;
width:60px;
height: 60px;
order:0;
margin:0px !important;
filter: drop-shadow(0px 2px 16px rgba(6, 51, 54, 0.1)); 
}

[title="Prev"] > div.floating-btn-style {
background-color: white;
border-radius:1vw;
border: 1px solid #E0E0E0;
}

[title="Prev"] > div > div > svg {
fill: #53B7AD;
}

/* CSS code for "Mark completed" */

/* adjust button component here */
[title="Mark complete"] {
height:60px;
order:1;
flex-grow:4;
margin:0px !important;
filter: drop-shadow(0px 2px 16px rgba(6, 51, 54, 0.1));
}

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

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

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

/* css button of: Next */
[title="Next"] {
width:60px;
height:60px;
order:2;
margin:0px !important;
filter: drop-shadow(0px 2px 16px rgba(6, 51, 54, 0.1)); 
}

[title="Next"] > div.floating-btn-style {
background-color: white;
border-radius:1vw;
border: 1px solid #E0E0E0;
}

[title="Next"] > div > div > svg {
fill: #53B7AD;
}

```

---

_[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)._