How to create a floating button

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.

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);
}

5 Likes