# How to create a floating button

**URL:** <https://community.glideapps.com/t/how-to-create-a-floating-button/72457>\
**Category:** Community Resources\
**Tags:** custom-css\
**Created:** [April 10, 2024, 12:34pm UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457 "2024-04-10T12:34:43Z")\
**Posts on this page:** 16\
**Page:** 2

<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:** [May 4, 2024, 2:18am UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/21 "2024-05-04T02:18:05Z")

</div>

Would suggest messing around with the configurations here.

> [@How to create a floating button](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/10):
>
> Might have figured it out. .fixed is used to set it to the bottom of a non-scrolling screen. .sticky is used to set it to the bottom of a scrolling screen. .blur is used to blur the background of the sticky button, so the content is slightly visible. I found that creating a separate container that only housed the button and apply the CSS to the container, not the button gave me the best results. div[class\*="main-content\_\_\_StyledDiv"] \>:last-child { padding-bottom: 60px! important; } .fixed…

Your screen on desktop and mobile might require different types of snippet (scrolling or non-scrolling).

---

<div class="post-metadata">

**Author:** ![Dan76](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dan76/32/15696_2.png) [@Dan76](https://community.glideapps.com/u/Dan76)\
**Post date:** [May 4, 2024, 2:19am UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/22 "2024-05-04T02:19:02Z")

</div>

Ok I’ll have a play around. Thank you

---

<div class="post-metadata">

**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\
**Post date:** [May 4, 2024, 1:36pm UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/23 "2024-05-04T13:36:41Z")

</div>

sure

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/a/2a6fa232f2faae82bee167c298ac470b80f6803d.png)

---

<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:** [May 4, 2024, 2:05pm UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/24 "2024-05-04T14:05:39Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/1/711186bcdcf5b113e0c8d38d1fcd00aa9352cfb2.png)

You can play around with variations of this.

```auto
.comment {
  margin: 0px;
  padding: 0px;
  background-color: none;
  top: 66%;
  left: 100%;
  width: 35px;
  height: 35px;
  position: -webkit-sticky;
  position: sticky;
  z-index: 999;
  margin-top: -0px;
}

.comment button div {
  width: 30px;
  height: 30px;
}

.comment svg {
padding-left: 10px;
  width: 30px;
  height: 30px;
}

```

---

<div class="post-metadata">

**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\
**Post date:** [May 6, 2024, 3:13pm UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/25 "2024-05-06T15:13:39Z")

</div>

> [@ThinhDinh](#):
>
> ```auto
> padding-left: 10px;
> width: 30px;
> height: 30px;
> 
> ```

you absolute legend. thanks.

Added in a button styling part, works perfectly:

```auto
//floating comment box
.comment {
  margin: 0px;
  padding: 0px;
  background-color: none;
  top: 14%;
  left: 100%;
  width: 35px;
  height: 35px;
  position: -webkit-sticky;
  position: sticky;
  z-index: 999;
  margin-top: -70px;
}

.comment button div {
  width: 30px;
  height: 30px;
}

.comment svg {
padding-left: 10px;
  width: 30px;
  height: 30px;
       color: white;
}
.comment button {
       background-color: rgba(255, 0, 102,0.5);
       width: 80px;
}

```

---

<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:** [May 6, 2024, 11:34pm UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/26 "2024-05-06T23:34:26Z")

</div>

Added to [the library](https://css-library.glide.page/dl/library/s/8836b3/r/4zN0jjiCSsqrlxUZ0OpKDQ), thank you!

---

<div class="post-metadata">

**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\
**Post date:** [May 7, 2024, 5:57am UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/27 "2024-05-07T05:57:10Z")

</div>

Ooh I’m famous! 😀

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [May 19, 2024, 6:05am UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/28 "2024-05-19T06:05:03Z")

</div>

Thank you… loved this post.

My application is to add a ‘new message alert’ that appears when needed and directs users to their inbox.

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

---

<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:** [May 19, 2024, 8:37am UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/29 "2024-05-19T08:37:04Z")

</div>

So has the code been helpful for you to achieve that? I assume thee “message” button is the one?

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [May 19, 2024, 9:25am UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/30 "2024-05-19T09:25:02Z")

</div>

Yes the code was super helpful - in particular the video from the original post. I learned for the first time how to use the CSS code by defining the properties of the project. Something I have never seen in action before.

I will say I read all the extra replies beneath and noticed the discussion about being able to format the button but my button worked first time using the original post code. Looked fine, behaves fine and so I did not bother to understand the rest of the formatting replies.

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [May 19, 2024, 9:33am UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/31 "2024-05-19T09:33:16Z")

</div>

Just to add I particularly liked this since I was trying to achieve the same thing by having a twin tab called ‘🔔MyJourney’ with visibility controlled by the need to flag new message alerts. But this has a couple of disadvantages:

- you have duplicate and synch any changes made to the tab to keep the twin identical

- as soon as the user visits the new tab and then views their new message, the condition for the tab visibility changes and the user is kicked out. Very annoying and this was difficult to fix without some tricky programing.

The floating button is workaround solution (the button is replicated across tabs). Not ideal but it works. Long term I wish Glide would hurry up and allow the Title of a tab to be dynamic. It’s sooooo overdue.

---

<div class="post-metadata">

**Author:** ![DarrenHumphries](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darrenhumphries/32/91715_2.png) [@DarrenHumphries](https://community.glideapps.com/u/DarrenHumphries)\
**Post date:** [January 20, 2025, 11:54pm UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/32 "2025-01-20T23:54:20Z")

</div>

Is this still working? I can’t get it to work on an app I just created. It only seems to bump up a bit to the component just above it. I can change the sizing and such just can’t get it sticky on the screen.

I’m using a chromebook for the builder which I am not sure is 100% webkit compatible but tested it on android which is.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [January 21, 2025, 12:06am UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/33 "2025-01-21T00:06:13Z")

</div>

Here’s what I do that works for a floating action button:

1. add a button to a container
2. add a css style to the container. I call mine `fab`
3. add this styling in appearances

```auto
.fab {
position: absolute;
bottom: 0px;
right: 0px;
}

```

From there, you can style the button however you want.

Example:  
 ![CleanShot 2025-01-20 at 19.05.05](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/5/e58104ab7e83d18ad1e9265680e7790476583274.gif)

---

<div class="post-metadata">

**Author:** ![DarrenHumphries](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darrenhumphries/32/91715_2.png) [@DarrenHumphries](https://community.glideapps.com/u/DarrenHumphries)\
**Post date:** [January 21, 2025, 12:30am UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/34 "2025-01-21T00:30:29Z")

</div>

Oh, good lord, that’s way too easy! 😃. I’ll try it shortly

---

<div class="post-metadata">

**Author:** ![abdo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/abdo/32/36540_2.png) [@abdo](https://community.glideapps.com/u/abdo)\
**Post date:** [January 21, 2025, 8:16am UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/35 "2025-01-21T08:16:29Z")

</div>

if you place the css on the button, it will float accordingly with its parent container.  
If you want it to float relatively on the entire screen, place the css on the container or put the button outside the container.

---

<div class="post-metadata">

**Author:** ![Grop85](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/grop85/32/94304_2.png) [@Grop85](https://community.glideapps.com/u/Grop85)\
**Post date:** [March 4, 2026, 5:06am UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/36 "2026-03-04T05:06:03Z")

</div>

> [@Robert\_Petitto](#):
>
> ```auto
> .fab {
> position: absolute;
> bottom: 0px;
> right: 0px;
> }
> 
> ```

how cannot i fix that button on a scrolling page?  
That CSS does not work for me:

.floating {  
position: -webkit-sticky;  
position: sticky;  
top: 10px;  
z-index: 9999;  
}

[Previous page](https://community.glideapps.com/t/how-to-create-a-floating-button/72457.md?page=1)