HTML for floating button - here you go!

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.



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

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

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

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

Nice! That should be the background-color

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

.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

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

2 Likes

Hello can you send me details too please?

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.

Hi Lisa

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

image

1 Like

I could use a video or class on this myself.

I think @ThinhDinh is the right person for this

This looks like javascript.

Meaning it can’t be used?

1 Like

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:

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