# 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:** 20\
**Page:** 1

<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:** [April 10, 2024, 12:34pm UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/1 "2024-04-10T12:34:43Z")

</div>

if you need top floating buttons in your apps …  
it is very simple to create them using custom css

[![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/7/b755b9e0962c281f9f12a827e78805c1fef7b1dd.jpeg "Glide Apps - How to create a floating button") ](https://www.youtube.com/watch?v=by2hy0hnbYU)

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

```

you can also style the button & the svg using custom css

```auto
.floating button {
   border: 2px solid black;
}
.floating svg {
   color: black;
}

```

```auto

```

---

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

</div>

Hopefully I’ll be able to organize a library for videos like this soon.

---

<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:** [April 10, 2024, 2:29pm UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/3 "2024-04-10T14:29:34Z")

</div>

Very nice. Any chance you could copy-paste your CSS into the thread?

---

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

</div>

i added it to the original post

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [April 10, 2024, 11:51pm UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/5 "2024-04-10T23:51:33Z")

</div>

Nice! Any suggestion on getting a button be sticky to the bottom of the screen for custom forms?

---

<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:** [April 11, 2024, 6:00am UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/6 "2024-04-11T06:00:23Z")

</div>

Styling a custom edit form (overlay screen)

 ![Screenshot 2024-04-11 at 8.58.56 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/9/19da82aab5672497855a3c4cccc120cfacf478da.jpeg)

> **[Styling a custom edit screen — Tella](https://www.tella.tv/video/cluutrvdg00ic0fk17t306wxd/view)**
>
> Video recording for work

---

<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:** [April 11, 2024, 6:01am UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/7 "2024-04-11T06:01:42Z")

</div>

like this? in overlay you mean?

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [April 11, 2024, 10:40am UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/8 "2024-04-11T10:40:41Z")

</div>

I was thinking more of just a button on a normal screen thats fixed to the bottom and centered. That way when they scroll down the button remains visible at all times.

---

<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:** [April 11, 2024, 11:03am UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/9 "2024-04-11T11:03:58Z")

</div>

On overlay its a bit easier… i think it would be harder on a normal screen. but will give it a try later.

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [April 11, 2024, 12:28pm UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/10 "2024-04-11T12:28:49Z")

</div>

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.

```auto
div[class*="main-content___StyledDiv"] >:last-child {
padding-bottom: 60px! important;
}

.fixed {
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1999;
    position: absolute;
}

.sticky {
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1999;
    position: sticky;
}

.blur {
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

```

 ![IMG_8374](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/d/dd7515b441b73bbd1b6fa4a46e52d690d91ece9f.jpeg)

 ![IMG_8375](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/9/7935df86cc125081b4588cb4a9845e8bd6924317.jpeg)

---

<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:** [April 17, 2024, 12:07pm UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/11 "2024-04-17T12:07:07Z")

</div>

Nicely done. Bookmarking!

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [April 17, 2024, 4:32pm UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/12 "2024-04-17T16:32:15Z")

</div>

@ThinhDinh 🙏

---

<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:** [April 17, 2024, 11:17pm UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/13 "2024-04-17T23:17:00Z")

</div>

Yep, it has been added. Thanks Eric.

---

<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 3, 2024, 10:08am UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/14 "2024-05-03T10:08:46Z")

</div>

Love this idea but having some trouble

I’m trying to add a floating ‘comment on this page’ button. if i create the button in a container and apply the class to the container i get this

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

and if i have the button standalone with the CSS class applied to the button i get this

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

CSS code is

```auto
.comment{
       margin: 0px;
       padding: 0px;
       background-color:rgba(0, 102, 255, 0.6);
       top:66%;
       left:100%;
       width:35px;
       height: 35px;
       border-radius: 10px;
       position: -webkit-sticky;
       position: sticky;
       z-index: 999;
       margin-top: -0px;
}

```

I’d like the speech bubble icon to appear in the centre of the blue square rather than annoyingly offset - any ideas?

also like it to be white!

---

<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 3, 2024, 2:26pm UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/15 "2024-05-03T14:26:06Z")

</div>

I haven’t tried, but probably the issue is because you haven’t styled the SVG that goes with the button. The width and height of the parent element was changed, so probably you need to adjust the SVG a bit as well.

---

<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 3, 2024, 3:08pm UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/16 "2024-05-03T15:08:08Z")

</div>

thanks…how? 🙂

---

<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 3, 2024, 11:38pm UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/17 "2024-05-03T23:38:39Z")

</div>

Can you me your settings forr the button?

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/8/78a348eda82dcf12bdb35c0e18eb428f9a5eda84.png)

---

<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:12am UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/18 "2024-05-04T02:12:28Z")

</div>

I have this working in the Glide Builder but it doesn’t work on my phone. Is there a setting I need to change?

---

<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:14am UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/19 "2024-05-04T02:14:58Z")

</div>

Which snippet did you use?

---

<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:15am UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/20 "2024-05-04T02:15:23Z")

</div>

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

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