if you need top floating buttons in your apps …
it is very simple to create them using custom css
.floating {
position: -webkit-sticky;
position: sticky;
top: 10px;
z-index: 9999;
}
you can also style the button & the svg using custom css
.floating button {
border: 2px solid black;
}
.floating svg {
color: black;
}
Hopefully I’ll be able to organize a library for videos like this soon.
Very nice. Any chance you could copy-paste your CSS into the thread?
i added it to the original post
Nice! Any suggestion on getting a button be sticky to the bottom of the screen for custom forms?
like this? in overlay you mean?
I was thinking more of just a button on a normal screen thats fixed to the bottom and centered. That way when they scroll down the button remains visible at all times.
On overlay its a bit easier… i think it would be harder on a normal screen. but will give it a try later.
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);
}
Nicely done. Bookmarking!
Yep, it has been added. Thanks Eric.
