# Floating button shadow

**URL:** <https://community.glideapps.com/t/floating-button-shadow/21808>\
**Category:** Ask for Help\
**Created:** [January 27, 2021, 3:25am UTC](https://community.glideapps.com/t/floating-button-shadow/21808 "2021-01-27T03:25:49Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [January 27, 2021, 3:25am UTC](https://community.glideapps.com/t/floating-button-shadow/21808/1 "2021-01-27T03:25:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![PabloMFalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablomfalero/32/31166_2.png) [@PabloMFalero](https://community.glideapps.com/u/PabloMFalero)\
**Post date:** [January 27, 2021, 6:31am UTC](https://community.glideapps.com/t/floating-button-shadow/21808/2 "2021-01-27T06:31:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [January 27, 2021, 8:19am UTC](https://community.glideapps.com/t/floating-button-shadow/21808/3 "2021-01-27T08:19:48Z")

</div>

Thank you [Pablo\_Miguel\_Martine](https://community.glideapps.com/u/Pablo_Miguel_Martine)  
I’ll ask them.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [January 27, 2021, 9:56am UTC](https://community.glideapps.com/t/floating-button-shadow/21808/4 "2021-01-27T09:56:20Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/4/44c235c28f79d50ed7f979f198fecb7f1ae0255d.jpeg)

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

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [January 27, 2021, 10:04am UTC](https://community.glideapps.com/t/floating-button-shadow/21808/5 "2021-01-27T10:04:49Z")

</div>

Thank you [ThinhDinh](https://community.glideapps.com/u/ThinhDinh)  
This makes it look simple and refreshing.

 ![スクリーンショット 2021-01-27 19.04.14](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/8/784a797986e4561f774c10bbdcaec9870f306439.jpeg)

> **[E-Book-ver.2](https://average-activity-1257.glideapp.io/)**

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [January 27, 2021, 10:05am UTC](https://community.glideapps.com/t/floating-button-shadow/21808/6 "2021-01-27T10:05:30Z")

</div>

Amazing work 😉

---

<div class="post-metadata">

**Author:** ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)\
**Post date:** [January 27, 2021, 12:00pm UTC](https://community.glideapps.com/t/floating-button-shadow/21808/7 "2021-01-27T12:00:19Z")

</div>

BTW…

Is there any CSS trick to put the buttons horizontally?

Saludos Thinh!

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [January 27, 2021, 2:51pm UTC](https://community.glideapps.com/t/floating-button-shadow/21808/8 "2021-01-27T14:51:45Z")

</div>

It’s amazing, but in my iphone 7

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/e/2ec400625a8e7f8b0a3259d829e58d28cff7b340.jpeg)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [January 27, 2021, 4:16pm UTC](https://community.glideapps.com/t/floating-button-shadow/21808/9 "2021-01-27T16:16:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)\
**Post date:** [January 27, 2021, 6:43pm UTC](https://community.glideapps.com/t/floating-button-shadow/21808/10 "2021-01-27T18:43:44Z")

</div>

Thinh… the floating buttons!

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

Bye

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [January 27, 2021, 7:40pm UTC](https://community.glideapps.com/t/floating-button-shadow/21808/11 "2021-01-27T19:40:41Z")

</div>

@gvalero

Do you mean like this?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/e/ae50f46a338630f60e7b682522717ac0fdc84e7e.jpeg)

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

---

<div class="post-metadata">

**Author:** ![ehdubya](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ehdubya/32/24087_2.png) [@ehdubya](https://community.glideapps.com/u/ehdubya)\
**Post date:** [January 27, 2021, 7:50pm UTC](https://community.glideapps.com/t/floating-button-shadow/21808/12 "2021-01-27T19:50:02Z")

</div>

Sweet looking UI!

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

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

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [January 27, 2021, 7:53pm UTC](https://community.glideapps.com/t/floating-button-shadow/21808/13 "2021-01-27T19:53:52Z")

</div>

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](https://docs.google.com/document/d/1F0iwtlecciW8hlk84nA5hLDXroxhhPTvSZkKDDZIn8o/edit?usp=sharing)**
>
> PROFILE LAYOUT \<img src="COVER" width="100%" style="object-fit: cover; opacity:0.9;border-top-left-radius:20px;border-top-right-radius:20px;margin-bottom:30px;"\> \<p\>\<div style=" background-image: url(AVATAR); -moz-border-radius: 50%; ...

Make sure to change the URLs for you pic URL

---

<div class="post-metadata">

**Author:** ![ehdubya](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ehdubya/32/24087_2.png) [@ehdubya](https://community.glideapps.com/u/ehdubya)\
**Post date:** [January 27, 2021, 8:21pm UTC](https://community.glideapps.com/t/floating-button-shadow/21808/14 "2021-01-27T20:21:29Z")

</div>

Awesome - thank you Santiago for finding that! Cheers!

![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/f/efccee1640c2fd0d08cdf0f460f5a9ab7d292868.gif)

---

<div class="post-metadata">

**Author:** ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)\
**Post date:** [January 27, 2021, 8:36pm UTC](https://community.glideapps.com/t/floating-button-shadow/21808/15 "2021-01-27T20:36:57Z")

</div>

No @SantiagoPerez,

Something like this

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/9/296b54835f77a67ccda513072dcf2ca46defa971.png)

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [January 27, 2021, 8:42pm UTC](https://community.glideapps.com/t/floating-button-shadow/21808/16 "2021-01-27T20:42:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Nadir\_Abdelrahman\_MD](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nadir_abdelrahman_md/32/5237_2.png) [@Nadir\_Abdelrahman\_MD](https://community.glideapps.com/u/Nadir_Abdelrahman_MD)\
**Post date:** [January 28, 2021, 1:37am UTC](https://community.glideapps.com/t/floating-button-shadow/21808/17 "2021-01-28T01:37:19Z")

</div>

**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;
> 
> [](https://api.whatsapp.com/send?phone=17163100156&text=Hello%21%20I%20want%20to%20share%20this%20app%20with%20you.%20Please%20click%20on%20this%20link%20to%20contact%20Dr.%20Abdelrahman%20https://doctora.glideapp.io/) ![Whatsapp 1](upload://w1bAfD6jQDeF4ZPX0pZ1esVTAz.png) ![Whatsapp 1](upload://w1bAfD6jQDeF4ZPX0pZ1esVTAz.png) ![Whatsapp 1](upload://w1bAfD6jQDeF4ZPX0pZ1esVTAz.png) ![Whatsapp 1](upload://w1bAfD6jQDeF4ZPX0pZ1esVTAz.png)

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [January 28, 2021, 2:16am UTC](https://community.glideapps.com/t/floating-button-shadow/21808/18 "2021-01-28T02:16:09Z")

</div>

Oops! I forgot to check the mobile view.

I made a correction.  
Thank you [Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [January 28, 2021, 2:17am UTC](https://community.glideapps.com/t/floating-button-shadow/21808/19 "2021-01-28T02:17:27Z")

</div>

Awesome!!

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [January 28, 2021, 2:50am UTC](https://community.glideapps.com/t/floating-button-shadow/21808/20 "2021-01-28T02:50:20Z")

</div>

Floating buttons in parallel can be achieved with this CSS.

This is the CSS presented by [Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto).

![スクリーンショット 2021-01-28 11.43.09](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/b/6bdc9b90f679e2a75ac8b8d5398f1f4b9d538b39.png)

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

[Next page](https://community.glideapps.com/t/floating-button-shadow/21808.md?page=2)