Need help: Floating Action Button

Hello and “Moin!” from Hamburg, Germany!

I am looking for some help from brighter code minds.

I seek to implement a floating action button on one of my projects.

Has anyone here ever done that? Could any of you assist me?

Best,
Daniel

1 Like

Hi @Daniel_Kaesmacher,

congratulation to your first community post!

You can find and use the examples from codepen:

2 Likes

@Daniel_Kaesmacher,

What I have done on some of my sites is place button element the page and set the positioning to Fixed. You can then change set the property to percent, and tell it where to go. Play with different values until you get it where you want. You can set the background to a color, the border radius to 100%. If you want a nice animation on hover then add a class to the element i.e.: floating_element_zoom

Then add this code to your CSS
.floating_element_zoom:hover {
transform: scale(.90);
transition: transform .5s ease;
}

This will give you a button that stays on the page. If you want to make this show on all pages, create a reference and paste it on every page you want to show it on.
You can view a short how-to video I did at: CleanShot 2022-02-22 at 22.23.53 · CleanShot Cloud

4 Likes