# How to create a floating button

**URL:** <https://community.glideapps.com/t/how-to-create-a-floating-button/72457>\
**Category:** Community Resources\
**Tags:** custom-css\
**Created:** [April 10, 2024, 12:34pm UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457 "2024-04-10T12:34:43Z")\
**Posts on this page:** 1\
**Showing post:** 10

<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:** [April 11, 2024, 12:28pm UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457/10 "2024-04-11T12:28:49Z")

</div>

Might have figured it out.

.fixed is used to set it to the bottom of a non-scrolling screen.  
.sticky is used to set it to the bottom of a scrolling screen.  
.blur is used to blur the background of the sticky button, so the content is slightly visible.

I found that creating a separate container that only housed the button and apply the CSS to the container, not the button gave me the best results.

```auto
div[class*="main-content___StyledDiv"] >:last-child {
padding-bottom: 60px! important;
}

.fixed {
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1999;
    position: absolute;
}

.sticky {
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1999;
    position: sticky;
}

.blur {
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

```

 ![IMG_8374](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/d/dd7515b441b73bbd1b6fa4a46e52d690d91ece9f.jpeg)

 ![IMG_8375](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/9/7935df86cc125081b4588cb4a9845e8bd6924317.jpeg)

---

_[View the full topic](https://community.glideapps.com/t/how-to-create-a-floating-button/72457)._