Hi,
I’ve been trying to make a floating circular (action) button, similar to the one seen in android apps and the one in the screenshot below. I’m wondering how I can recreate this in Bubble.
Does anyone have any ideas?!
Done this on a few native apps so here’s my workaround… create a floating group with vertical align set to bottom. Then create your button and sit it in the floating group. On the buttons ‘Y’ vertical axis, apply a negative coordinate i.e. -50 (ensuring that the negative number is greater then the floating groups height. Then right click on the button and set the element as ‘Bring to front’. There are better ways with JS and CSS but bubble renders these slightly differently.
2 Likes
Here’s a quick screenshot of the output 
Thanks for your reply!
Sorry if this is a stupid or obvious question but I can’t try your solution atm.
Will I have to make any changes to border styles or anything like that or is that it?
With regards to button styling yes… set your button height and width equal i.e. 40px x 40px and border radius to at least 50% of the buttons height i.e. if your button is 40px, set the border radius to 20px… or as a good fallback, just set the button radius to 100px… both options will give your button a circle appearance.
1 Like
Thanks! This worked perfectly!
This topic was automatically closed after 70 days. New replies are no longer allowed.