# Creating a Sticky Button

**URL:** <https://community.glideapps.com/t/creating-a-sticky-button/58588>\
**Category:** Ask for Help\
**Created:** [February 28, 2023, 2:35pm UTC](https://community.glideapps.com/t/creating-a-sticky-button/58588 "2023-02-28T14:35:15Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [February 28, 2023, 2:35pm UTC](https://community.glideapps.com/t/creating-a-sticky-button/58588/1 "2023-02-28T14:35:15Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 1, 2023, 12:12am UTC](https://community.glideapps.com/t/creating-a-sticky-button/58588/2 "2023-03-01T00:12:14Z")

</div>

> [@Joe\_Gabriele](#):
>
> I believe Rich Text components can have actions still tied to them in Pages, correct?

Yes.

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

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [March 4, 2023, 5:29pm UTC](https://community.glideapps.com/t/creating-a-sticky-button/58588/3 "2023-03-04T17:29:57Z")

</div>

I found this to work:

```auto
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…

```auto
<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:

```auto
<img src="https://freepngimg.com/thumb/categories/1428.png" style="position: fixed; bottom: 0px; left: 50%; transform: translateX(-50%); padding: 10px;"/>

```

![Screenshot 2023-03-04 at 12.30.22 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/4/84bb60f7334a54b0287ca54df824b2c88b074da5.png)

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [March 4, 2023, 7:41pm UTC](https://community.glideapps.com/t/creating-a-sticky-button/58588/4 "2023-03-04T19:41:51Z")

</div>

Actually found out a way:

 ![Screenshot 2023-03-04 at 2.38.29 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/4/b4622d70cb4c0f14a43fef2baf80adc94c15bd86.png)

 ![Screenshot 2023-03-04 at 3.01.56 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/8/d8be4b9c52048bc98200bffd3e103d497794309d.png)

```auto
<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%);">
Submit</a>

```

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

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [March 4, 2023, 8:30pm UTC](https://community.glideapps.com/t/creating-a-sticky-button/58588/5 "2023-03-04T20:30:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [March 4, 2023, 8:35pm UTC](https://community.glideapps.com/t/creating-a-sticky-button/58588/6 "2023-03-04T20:35:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [March 4, 2023, 8:38pm UTC](https://community.glideapps.com/t/creating-a-sticky-button/58588/7 "2023-03-04T20:38:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [March 5, 2023, 8:39pm UTC](https://community.glideapps.com/t/creating-a-sticky-button/58588/8 "2023-03-05T20:39:04Z")

</div>

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