# How to make the button float on the screen when scrolling

**URL:** <https://community.glideapps.com/t/how-to-make-the-button-float-on-the-screen-when-scrolling/31697>\
**Category:** Ask for Help\
**Created:** [September 13, 2021, 4:40am UTC](https://community.glideapps.com/t/how-to-make-the-button-float-on-the-screen-when-scrolling/31697 "2021-09-13T04:40:16Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![phong\_tran](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/phong_tran/32/32160_2.png) [@phong\_tran](https://community.glideapps.com/u/phong_tran)\
**Post date:** [September 13, 2021, 4:40am UTC](https://community.glideapps.com/t/how-to-make-the-button-float-on-the-screen-when-scrolling/31697/1 "2021-09-13T04:40:16Z")

</div>

how to make the button float on the screen when scrolling

---

<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 13, 2021, 4:56am UTC](https://community.glideapps.com/t/how-to-make-the-button-float-on-the-screen-when-scrolling/31697/2 "2021-09-13T04:56:19Z")

</div>

In the Button → General → Design Show as → the floating A round icon

---

<div class="post-metadata">

**Author:** ![phong\_tran](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/phong_tran/32/32160_2.png) [@phong\_tran](https://community.glideapps.com/u/phong_tran)\
**Post date:** [September 13, 2021, 4:59am UTC](https://community.glideapps.com/t/how-to-make-the-button-float-on-the-screen-when-scrolling/31697/3 "2021-09-13T04:59:21Z")

</div>

Is there a way for a long button to float on the screen?

---

<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 13, 2021, 5:06am UTC](https://community.glideapps.com/t/how-to-make-the-button-float-on-the-screen-when-scrolling/31697/4 "2021-09-13T05:06:37Z")

</div>

Currently no.  
You can do something with CSS, but it is applied to all buttons in the detail screen because it is not very easy to select one or more specific buttons.  
What do you need? Do you need a modal window? In this case, there is something already done by others that maybe you can use.

---

<div class="post-metadata">

**Author:** ![phong\_tran](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/phong_tran/32/32160_2.png) [@phong\_tran](https://community.glideapps.com/u/phong_tran)\
**Post date:** [September 13, 2021, 5:10am UTC](https://community.glideapps.com/t/how-to-make-the-button-float-on-the-screen-when-scrolling/31697/5 "2021-09-13T05:10:16Z")

</div>

> [@Roldy](#):
>
> Bạn có cần một cửa sổ phương thức không? Tro

Thanks! i just need 1 floating button on the screen when scrolling

---

<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 13, 2021, 5:13am UTC](https://community.glideapps.com/t/how-to-make-the-button-float-on-the-screen-when-scrolling/31697/6 "2021-09-13T05:13:05Z")

</div>

Now I’ll take a look, in the meantime if you want to explore these possibilities of doing things with CSS, I recommend this repository:

> **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://www.notion.so/glidecommunity/33d5984960d04785b38eeae6c5121001?v=5662bb67cd994c53ae87737ab952ddb2)**
>
> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

Most of the contributions here are by @ThinhDinh and @Lucas_Pires

---

<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 13, 2021, 5:32am UTC](https://community.glideapps.com/t/how-to-make-the-button-float-on-the-screen-when-scrolling/31697/7 "2021-09-13T05:32:09Z")

</div>

Put a Rich Text component in your detail screen and inside that component enter this code:

```auto
<pre><span><style>
[data-test="app-button-view"] { 
position: fixed;
margin-left:0px;
left: 50%;
bottom: 10%; 
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width:60%;
z-index: 10;
}
</style></span></pre>

```

If you need a different positioning just change the “bottom” parameter.  
Could this be right for you? Remember that it acts on all buttons!

---

<div class="post-metadata">

**Author:** ![phong\_tran](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/phong_tran/32/32160_2.png) [@phong\_tran](https://community.glideapps.com/u/phong_tran)\
**Post date:** [September 13, 2021, 8:26am UTC](https://community.glideapps.com/t/how-to-make-the-button-float-on-the-screen-when-scrolling/31697/8 "2021-09-13T08:26:24Z")

</div>

> [@Roldy](#):
>
> ```auto
> <pre><span><style>
> [data-test="app-button-view"] { 
> position: fixed;
> margin-left:0px;
> left: 50%;
> bottom: 10%; 
> -ms-transform: translate(-50%, -50%);
> transform: translate(-50%, -50%);
> width:60%;
> z-index: 10;
> }
> </style></span></pre>
> 
> ```

Thanks!

---

<div class="post-metadata">

**Author:** ![phong\_tran](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/phong_tran/32/32160_2.png) [@phong\_tran](https://community.glideapps.com/u/phong_tran)\
**Post date:** [September 13, 2021, 8:27am UTC](https://community.glideapps.com/t/how-to-make-the-button-float-on-the-screen-when-scrolling/31697/9 "2021-09-13T08:27:22Z")

</div>

I am very happy to have your help

---

<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 13, 2021, 8:33am UTC](https://community.glideapps.com/t/how-to-make-the-button-float-on-the-screen-when-scrolling/31697/10 "2021-09-13T08:33:23Z")

</div>

You’re welcome.

This is a very generous community, you will see that you will also get help from others when there is a problem. We are very proud and excited about this development platform.  
Please assign “solution” to my previous suggestion if you think it met your needs.  
Hi, good job 🙂

---

<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, 8:55pm UTC](https://community.glideapps.com/t/how-to-make-the-button-float-on-the-screen-when-scrolling/31697/11 "2022-11-13T20:55:26Z")

</div>

> [@Roldy](#):
>
> ```auto
> <pre><span><style>
> [data-test="app-button-view"] { 
> position: fixed;
> margin-left:0px;
> left: 50%;
> bottom: 10%; 
> -ms-transform: translate(-50%, -50%);
> transform: translate(-50%, -50%);
> width:60%;
> z-index: 10;
> }
> </style></span></pre>
> 
> ```

Not working .

 ![send](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/4/845236bbaf1cd373b3c7ff52cd778396997d9943.jpeg)

---

<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:** [November 14, 2022, 12:05am UTC](https://community.glideapps.com/t/how-to-make-the-button-float-on-the-screen-when-scrolling/31697/12 "2022-11-14T00:05:40Z")

</div>

create your own 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 14, 2022, 9:06am UTC](https://community.glideapps.com/t/how-to-make-the-button-float-on-the-screen-when-scrolling/31697/13 "2022-11-14T09:06:46Z")

</div>

Example please ? I have no Idea .

---

<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:** [November 14, 2022, 5:48pm UTC](https://community.glideapps.com/t/how-to-make-the-button-float-on-the-screen-when-scrolling/31697/14 "2022-11-14T17:48:56Z")

</div>

You can click my profile and go to Code BOOK App, or make a screenshot of what are you looking for, and i make it for you.

---

<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 17, 2022, 3:17pm UTC](https://community.glideapps.com/t/how-to-make-the-button-float-on-the-screen-when-scrolling/31697/15 "2022-11-17T15:17:48Z")

</div>

Sure . Thank you

---

<div class="post-metadata">

**Author:** ![NoCodeAndy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nocodeandy/32/62530_2.png) [@NoCodeAndy](https://community.glideapps.com/u/NoCodeAndy)\
**Post date:** [January 17, 2024, 4:49pm UTC](https://community.glideapps.com/t/how-to-make-the-button-float-on-the-screen-when-scrolling/31697/16 "2024-01-17T16:49:24Z")

</div>