Floating Form Button

Feature Requests
120

This is the CSS I’m currently using.

<pre><span><style>
[data-test=app-button-view] {position:fixed;
                 width:60px;
                 height:60px;
                 right:5%;
                 border-radius:50px;
                 text-align:center;
                 box-shadow: 2px 2px 3px #999 !important;
                 font-size:40px;
                 font-weight: normal;
                 background-color: rgba(41, 87, 122, 0.118) !important;
                 backdrop-filter: blur(4px);}
.ctLXSv{bottom:10%;}
.llngAz{bottom:20%;}
.ivGfwB{bottom:10%;}
.egCsbX{bottom:20%;}
</style></span></pre>

Each button has to have a different transparency level set so that each button has a unique class name. I need the unique class name so I can set different bottom positions for each button.

image

A couple of things that I have changed so far in the CSS is the setting of the background color so all buttons match each other and match my theme, even though they have different transparency levels set. I also added a backdrop filter with a blur, so they have that glassy blurred look to stand out more.

image

The classes I’m using for the bottom positions work for Chrome on windows and Chrome on Android. I’m not entirely sure how it looks on Apple/IOS devices, so they may need additional class names added to set the bottom positions.

As for the button’s use, one is a form button and the other is a Link to Screen button.

6 Likes