Creating a Sticky Button

Looking to see if anybody knows some HTML and Inline CSS to create a button component that is sticky to the bottom of a screen using Pages?

I believe Rich Text components can have actions still tied to them in Pages, correct?


I have played around a bit with -webkit-sticky and sticky but haven’t had any luck.

I found this to work:

style="position: fixed; bottom: 0px; left: 50%; transform: translateX(-50%);

However, when I apply it to a button type, it doesnt treat it like a button and doesnt apply any of the inline styling. Very strange…

<button style="position: fixed; bottom: 0px; left: 50%; transform: translateX(-50%);">Hello</button>

Only got it to work using an image of a submit button using:

<img src="" style="position: fixed; bottom: 0px; left: 50%; transform: translateX(-50%); padding: 10px;"/>

Screenshot 2023-03-04 at 12.30.22 PM

Actually found out a way:

<a style="padding-top: 15px; 
padding-bottom: 15px; 
padding-left: 40px; 
padding-right: 40px;
text-decoration: none; 
justify-content: center; 
border-radius: .5rem; 
border-width: 0px; 
background-color: #817CFC; 
font-size: 1rem; 
color: #FFF; 
line-height: 18px; 
margin-top: 20px; 
margin-bottom: 50px; 
width: 90%; 
text-shadow: none; 
font-weight: 600; 
flex-direction: row-reverse; 
box-shadow: none; 
align-items: center; 
text-align: center; 
position: fixed; 
bottom: 0px; 
left: 50%; 
transform: translateX(-50%);">

Only really works well on Mobile View, but in my use case it should only be used on Mobile.


Your solution is just a ilusion, it wont work on different screen resolutions, use pisition fixed 90vh top, and other elements with the scroll y overflow… But mine solution, wil not work on iphones… So you have to write many variants depending on system navigator

Yes thats correct, this is only for mobile and works on iPhones. Not sure if it works on Android. For my usecase, I will only have Mobile users so it fits for now.

I did use Google Chrome’s Dev Tools to test using a Samsung Galaxy and appears the buttons stayed sticky. Also there is no Y axis scrolling involved on mobile.

1 Like

I hope glide will give us fixed containers for pages… If they really wanna make pages better then apps lol


This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.