Floating button shadow

[hisashi.fujita]

Is it possible to remove the shadow of the floating button?
Does anyone know how to do it?

[PabloMFalero]

Probably @Robert_Petitto, @Lucas_Pires or @ThinhDinh, catch their attention with a cool message and they’ll help

[hisashi.fujita]

Thank you Pablo_Miguel_Martine
I’ll ask them.

[ThinhDinh]

<pre><span><style>
.fab-target >* {
filter: none;
}

[hisashi.fujita]

Thank you ThinhDinh
This makes it look simple and refreshing.

E-Book-ver.2

[ThinhDinh]

Amazing work

[gvalero]

BTW…

Is there any CSS trick to put the buttons horizontally?

Saludos Thinh!

[Lucas_Pires]

It’s amazing, but in my iphone 7

[ThinhDinh]

Can I have a visual image of what you want to achieve? Thanks a lot.

[gvalero]

Thinh… the floating buttons!

Is it possible to have more than 2 floating buttons horizontally?

Bye

[SantiagoPerez]

@gvalero

Do you mean like this?

If so, you just have to add them to your screen.

[ehdubya]

Sweet looking UI!

How’d you get a background image (speakers) there???

I feel like I’m really missing something here??!! haha

[SantiagoPerez]

I used the CSS that has been shared here.

Edit: here’s a Google doc with some CSS codes

RICH TEXT CSS / CODE FOR GLIDE

Make sure to change the URLs for you pic URL

[ehdubya]

Awesome - thank you Santiago for finding that! Cheers!

[gvalero]

No @SantiagoPerez,

Something like this

[SantiagoPerez]

Oops!!! That’s why I’m not a pilot.

[Nadir_Abdelrahman_MD]

Perhaps using something like this:

Summary

.float{
position:fixed;
bottom:10%;
right:220px;
background-color:#29958d00;
color:#FFF;
border-radius:50px;
text-align:center;
font-size:30px;

   

[hisashi.fujita]

Oops! I forgot to check the mobile view.

I made a correction.
Thank you Lucas_Pires

[Lucas_Pires]

Awesome!!

[hisashi.fujita]

Floating buttons in parallel can be achieved with this CSS.

This is the CSS presented by Robert_Petitto.

<pre><span><style>
.fab-target >* {
	 position:fixed;
	 width:50px;
	 height:50px;
	 bottom:19%;
}
.fab-target >:nth-child(1) {
left: 35% !important;
}
.fab-target >:nth-child(2) {
left: 52% !important;
}