HTML for floating button - here you go!

Community Resources
1

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
image1728×843 113 KB

image
image1728×843 110 KB

image
image1920×1080 162 KB

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-->
19 Likes
2

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

3 Likes
3

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

4

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

5

Nice! That should be the background-color

6

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

7

.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.

1 Like
8

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

2 Likes
9

Hello can you send me details too please?

10

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.

11

Hi Lisa

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

image

1 Like
12

I could use a video or class on this myself.

13

I think @ThinhDinh is the right person for this

14

This looks like javascript.

15

Meaning it can’t be used?

1 Like
16

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! :slight_smile:

17

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 👀

2 Likes
18

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; }

1 Like
19

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

20

What do you mean by “regular CSS”?