Floating button shadow

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

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

2 Likes

Thank you Pablo_Miguel_Martine
I’ll ask them.

1 Like

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

Thank you ThinhDinh
This makes it look simple and refreshing.

7 Likes

Amazing work :wink:

1 Like

BTW…

Is there any CSS trick to put the buttons horizontally?

Saludos Thinh!

It’s amazing, but in my iphone 7

image

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

Thinh… the floating buttons!

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

Bye

@gvalero

Do you mean like this?

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

1 Like

Sweet looking UI!

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

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

I used the CSS that has been shared here.

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

Make sure to change the URLs for you pic URL

2 Likes

Awesome - thank you Santiago for finding that! Cheers!

1 Like

No @SantiagoPerez,

Something like this

image

1 Like

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

1 Like

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;

![Whatsapp 1](upload://w1bAfD6jQDeF4ZPX0pZ1esVTAz.png) ![Whatsapp 1](upload://w1bAfD6jQDeF4ZPX0pZ1esVTAz.png) ![Whatsapp 1](upload://w1bAfD6jQDeF4ZPX0pZ1esVTAz.png) ![Whatsapp 1](upload://w1bAfD6jQDeF4ZPX0pZ1esVTAz.png)
1 Like

Oops! I forgot to check the mobile view.

I made a correction.
Thank you Lucas_Pires

1 Like

Awesome!!

1 Like

Floating buttons in parallel can be achieved with this CSS.

This is the CSS presented by Robert_Petitto.

スクリーンショット 2021-01-28 11.43.09

<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;
}
5 Likes