# HTML for floating button - here you go!

**URL:** <https://community.glideapps.com/t/html-for-floating-button-here-you-go/18321>\
**Category:** Community Resources\
**Created:** [November 12, 2020, 5:55pm UTC](https://community.glideapps.com/t/html-for-floating-button-here-you-go/18321 "2020-11-12T17:55:38Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lisa](https://avatars.discourse-cdn.com/v4/letter/l/f08c70/32.png) [@Lisa](https://community.glideapps.com/u/Lisa)\
**Post date:** [November 12, 2020, 5:55pm UTC](https://community.glideapps.com/t/html-for-floating-button-here-you-go/18321/1 "2020-11-12T17:55:38Z")

</div>

I saw a lot of posts about floating buttons. I usually try not to toy with HTML or CSS but couldn’t help myself after being inspired by @Lucas_Pires @Robert_Petitto and others! If you want to implement a floating button using the Rich Text Component, the code is below.

Important Notes:

- Glide does not officially support HTML/CSS so use this as you see fit for your own projects
- This code works on the button component - most likely you will need to change the class in the code (bolded) so that it applies specifically to the button within your app
- Your button should be placed last after all of your other components - including the rich text component.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/6/b67b4ec90b9a0d30fa5e78fcd5ac952a3919bafc.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/d/dda6446c9ce18213186b2057cdb16748b45c11d3.jpeg)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/3/2345b8ebd56a6409318ab8045549bdaac296cf91.jpeg)

Code:

```
.kBLmTq.kBLmTq { background-color: rgb(244 67 54 / 85%) !important; position: fixed !important; width: 60px !important; height: 60px !important; bottom: 40px !important; right: 20px !important; color: #FFF !important; border-radius: 50px !important; text-align: center !important; box-shadow: 2px 2px 3px #999 !important; margin-bottom: 60px !important; font-size: 1.5rem !important; } \<--BUTTON--\>
```

---

<div class="post-metadata">

**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\
**Post date:** [November 12, 2020, 6:49pm UTC](https://community.glideapps.com/t/html-for-floating-button-here-you-go/18321/2 "2020-11-12T18:49:03Z")

</div>

Never got to understand how to find my classes. If you have a couple of min will love to do a quick zoom with you to show me

---

<div class="post-metadata">

**Author:** ![Lisa](https://avatars.discourse-cdn.com/v4/letter/l/f08c70/32.png) [@Lisa](https://community.glideapps.com/u/Lisa)\
**Post date:** [November 12, 2020, 8:00pm UTC](https://community.glideapps.com/t/html-for-floating-button-here-you-go/18321/3 "2020-11-12T20:00:12Z")

</div>

Send me your email. I’ll be free in the next hour or so!

---

<div class="post-metadata">

**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\
**Post date:** [November 12, 2020, 8:05pm UTC](https://community.glideapps.com/t/html-for-floating-button-here-you-go/18321/4 "2020-11-12T20:05:26Z")

</div>

Thanks, I think I got it to work, now need to figure out how to change the color 😉

---

<div class="post-metadata">

**Author:** ![Lisa](https://avatars.discourse-cdn.com/v4/letter/l/f08c70/32.png) [@Lisa](https://community.glideapps.com/u/Lisa)\
**Post date:** [November 12, 2020, 8:50pm UTC](https://community.glideapps.com/t/html-for-floating-button-here-you-go/18321/5 "2020-11-12T20:50:01Z")

</div>

Nice! That should be the background-color

---

<div class="post-metadata">

**Author:** ![Amal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/amal/32/15421_2.png) [@Amal](https://community.glideapps.com/u/Amal)\
**Post date:** [November 12, 2020, 8:57pm UTC](https://community.glideapps.com/t/html-for-floating-button-here-you-go/18321/6 "2020-11-12T20:57:33Z")

</div>

Dont know what i am doing wrong. when i put this is rich text, it just shows up as normal text

---

<div class="post-metadata">

**Author:** ![Lisa](https://avatars.discourse-cdn.com/v4/letter/l/f08c70/32.png) [@Lisa](https://community.glideapps.com/u/Lisa)\
**Post date:** [November 12, 2020, 9:21pm UTC](https://community.glideapps.com/t/html-for-floating-button-here-you-go/18321/7 "2020-11-12T21:21:23Z")

</div>

**.kBLmTq.kBLmTq**

That part above is in the code and should be changed to the class for the specific button in your app.

The screenshots in the post show how to get your class. When you preview the app on desktop (not Glide editor) right-click the page and select ”inspect” then you’ll be able to see the view shown in the screen shots.

---

<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:** [November 12, 2020, 9:26pm UTC](https://community.glideapps.com/t/html-for-floating-button-here-you-go/18321/8 "2020-11-12T21:26:16Z")

</div>

Fair warning though…those unnamed classes can change at a moments notice and break the styling.

---

<div class="post-metadata">

**Author:** ![Bahadir\_Kaya](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bahadir_kaya/32/14065_2.png) [@Bahadir\_Kaya](https://community.glideapps.com/u/Bahadir_Kaya)\
**Post date:** [November 12, 2020, 9:58pm UTC](https://community.glideapps.com/t/html-for-floating-button-here-you-go/18321/9 "2020-11-12T21:58:59Z")

</div>

Hello can you send me details too please?

---

<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:** [November 12, 2020, 10:39pm UTC](https://community.glideapps.com/t/html-for-floating-button-here-you-go/18321/10 "2020-11-12T22:39:02Z")

</div>

Sorry I didn’t have time for a call in the past weeks, have you been able to figure out the way? Probably I have some extensions that would make your life easier.

---

<div class="post-metadata">

**Author:** ![Valentine\_Madzhie](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/valentine_madzhie/32/11453_2.png) [@Valentine\_Madzhie](https://community.glideapps.com/u/Valentine_Madzhie)\
**Post date:** [November 13, 2020, 6:29pm UTC](https://community.glideapps.com/t/html-for-floating-button-here-you-go/18321/11 "2020-11-13T18:29:32Z")

</div>

Hi Lisa

How would I add an HTML code for a Push notification something like this code here:

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/d/6d3b825528e6fce199b6dc71c3419b3cb4334de1.png)

---

<div class="post-metadata">

**Author:** ![Tim\_Sullivan](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/tim_sullivan/32/3461_2.png) [@Tim\_Sullivan](https://community.glideapps.com/u/Tim_Sullivan)\
**Post date:** [November 13, 2020, 6:58pm UTC](https://community.glideapps.com/t/html-for-floating-button-here-you-go/18321/12 "2020-11-13T18:58:53Z")

</div>

> [@yinon\_raviv](#):
>
> Never got to understand how to find my classes. If you have a couple of min will love to do a quick zoom with you to show me

I could use a video or class on this myself.

---

<div class="post-metadata">

**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\
**Post date:** [November 15, 2020, 6:23am UTC](https://community.glideapps.com/t/html-for-floating-button-here-you-go/18321/13 "2020-11-15T06:23:39Z")

</div>

I think @ThinhDinh is the right person for this

---

<div class="post-metadata">

**Author:** ![Lisa](https://avatars.discourse-cdn.com/v4/letter/l/f08c70/32.png) [@Lisa](https://community.glideapps.com/u/Lisa)\
**Post date:** [November 16, 2020, 6:10am UTC](https://community.glideapps.com/t/html-for-floating-button-here-you-go/18321/14 "2020-11-16T06:10:44Z")

</div>

This looks like javascript.

---

<div class="post-metadata">

**Author:** ![Valentine\_Madzhie](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/valentine_madzhie/32/11453_2.png) [@Valentine\_Madzhie](https://community.glideapps.com/u/Valentine_Madzhie)\
**Post date:** [November 16, 2020, 11:16pm UTC](https://community.glideapps.com/t/html-for-floating-button-here-you-go/18321/15 "2020-11-16T23:16:23Z")

</div>

Meaning it can’t be used?

---

<div class="post-metadata">

**Author:** ![Nico](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nico/32/3616_2.png) [@Nico](https://community.glideapps.com/u/Nico)\
**Post date:** [November 23, 2020, 9:41pm UTC](https://community.glideapps.com/t/html-for-floating-button-here-you-go/18321/16 "2020-11-23T21:41:08Z")

</div>

Hey @Lisa is there a way to make the floating button also slowly pop up similiar like the calender switch button glide gave us in the new calender views?

Thanks! 🙂

---

<div class="post-metadata">

**Author:** ![Lisa](https://avatars.discourse-cdn.com/v4/letter/l/f08c70/32.png) [@Lisa](https://community.glideapps.com/u/Lisa)\
**Post date:** [December 15, 2020, 11:19pm UTC](https://community.glideapps.com/t/html-for-floating-button-here-you-go/18321/17 "2020-12-15T23:19:27Z")

</div>

Hi @Nico - not with HTML. But I just spotted the floating button in staging - so maybe the component Glide is working on will share similarities to the calendar views floating button.

[I spy a floating button in staging 👀](https://community.glideapps.com/t/i-spy-a-floating-button-in-staging/19926)

---

<div class="post-metadata">

**Author:** ![Bob\_SPAN](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bob_span/32/41514_2.png) [@Bob\_SPAN](https://community.glideapps.com/u/Bob_SPAN)\
**Post date:** [October 12, 2022, 11:01pm UTC](https://community.glideapps.com/t/html-for-floating-button-here-you-go/18321/18 "2022-10-12T23:01:49Z")

</div>

updated for 2022, this works… `<pre><span><style> .floating-btn-style { background-color: rgb(244 67 54 / 85%) !important; position: fixed !important; width: 60px !important; height: 60px !important; bottom: 40px !important; right: 20px !important; color: #FFF !important; border-radius: 50px !important; text-align: center !important; box-shadow: 2px 2px 3px #999 !important; margin-bottom: 60px !important; font-size: 1.5rem !important; }`

---

<div class="post-metadata">

**Author:** ![panda](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/panda/32/49438_2.png) [@panda](https://community.glideapps.com/u/panda)\
**Post date:** [October 18, 2022, 11:59pm UTC](https://community.glideapps.com/t/html-for-floating-button-here-you-go/18321/19 "2022-10-18T23:59:08Z")

</div>

THANK YOU! Do you mind explaining why it’s changed to be this way instead of regular CSS?

---

<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:** [October 19, 2022, 1:34am UTC](https://community.glideapps.com/t/html-for-floating-button-here-you-go/18321/20 "2022-10-19T01:34:34Z")

</div>

What do you mean by “regular CSS”?

[Next page](https://community.glideapps.com/t/html-for-floating-button-here-you-go/18321.md?page=2)