# CSS to add text next to floating button?

**URL:** <https://community.glideapps.com/t/css-to-add-text-next-to-floating-button/27203>\
**Category:** Ask for Help\
**Created:** [May 25, 2021, 1:10pm UTC](https://community.glideapps.com/t/css-to-add-text-next-to-floating-button/27203 "2021-05-25T13:10:41Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Adam\_Crossley](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adam_crossley/32/24083_2.png) [@Adam\_Crossley](https://community.glideapps.com/u/Adam_Crossley)\
**Post date:** [May 25, 2021, 1:10pm UTC](https://community.glideapps.com/t/css-to-add-text-next-to-floating-button/27203/1 "2021-05-25T13:10:41Z")

</div>

Is it possible to add text next to a floating button? Often the icons are insufficient to describe what the button will do.

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [May 25, 2021, 1:13pm UTC](https://community.glideapps.com/t/css-to-add-text-next-to-floating-button/27203/2 "2021-05-25T13:13:29Z")

</div>

> [@Floating Buttons, Tooltip, CSS](https://community.glideapps.com/t/floating-buttons-tooltip-css/26814):
>
> Hello, my original idea was to create tooltips for the floating buttons. Because despite many icons available, it is not always easy for some users. Except that I forgot that it doesn’t work with a mobile face_with_raised_eyebrow neutral_face thinking, so I made a version with additional text. Well, it still works in desktop mode. This is not ideal if you are using visibility. But hey in the meantime, it can still be used. \<pre\>\<span\>\<style\> .fab-target \> :hover:nth-chi…

The 3rd button

---

<div class="post-metadata">

**Author:** ![18\_acres](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/18_acres/32/50385_2.png) [@18\_acres](https://community.glideapps.com/u/18_acres)\
**Post date:** [November 13, 2022, 1:21pm UTC](https://community.glideapps.com/t/css-to-add-text-next-to-floating-button/27203/3 "2022-11-13T13:21:44Z")

</div>

Tried but not working .

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [November 13, 2022, 11:29pm UTC](https://community.glideapps.com/t/css-to-add-text-next-to-floating-button/27203/4 "2022-11-13T23:29:47Z")

</div>

tooltips code sample:

> **[Code BOOK - Desktop](https://code-book-desktop.glideapp.io/dl/da19fa/s/04a872/r/EiSKJm1HS6ut0Wf5Lkl0Pw)**
>
> share cool CSS, scripts and links

---

<div class="post-metadata">

**Author:** ![saucy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/saucy/32/21556_2.png) [@saucy](https://community.glideapps.com/u/saucy)\
**Post date:** [December 16, 2022, 2:24pm UTC](https://community.glideapps.com/t/css-to-add-text-next-to-floating-button/27203/5 "2022-12-16T14:24:45Z")

</div>

This didn’t work for me at all - like it made no difference to my floating button. Any idea why?

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 16, 2022, 2:30pm UTC](https://community.glideapps.com/t/css-to-add-text-next-to-floating-button/27203/6 "2022-12-16T14:30:34Z")

</div>

can i see the screenshot of your Glide editor? show me rich text, and position of the floating button

---

<div class="post-metadata">

**Author:** ![saucy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/saucy/32/21556_2.png) [@saucy](https://community.glideapps.com/u/saucy)\
**Post date:** [December 16, 2022, 2:32pm UTC](https://community.glideapps.com/t/css-to-add-text-next-to-floating-button/27203/7 "2022-12-16T14:32:08Z")

</div>

Thanks for the speedy reply.

 ![Screenshot 2022-12-16 at 14.31.27](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/1/c17668e7ffae29f2b0a9bb54e59b97df25097e52.jpeg)  
 ![Screenshot 2022-12-16 at 14.31.36](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/c/8ca26220fe8902af54149ba2c3ccc1b08b1078b5.png)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 16, 2022, 2:34pm UTC](https://community.glideapps.com/t/css-to-add-text-next-to-floating-button/27203/8 "2022-12-16T14:34:00Z")

</div>

and is not showing, when you are hovering mouse over it? i just test it, and it works…  
maybe you are looking for non hover?.. here you have both:

```auto
<pre><span><style>

.fab-target > :nth-child(1):after { 
content: "this is button 1"; 
font-family: Arial;
position: absolute;
top: -10;
right:50px;
width: 110px;
height: 1.25rem;   
background-color: yellow;
color: black; 
}

.fab-target >:hover:nth-child(1):after { 
content: "HOVER button 1"; 
font-family: Arial;
position: absolute;
top: -10;
right:50px;
width: 110px;
height: 1.25rem;   
background-color: blue;
color: white; 
}

</style></span></pre>

```

---

<div class="post-metadata">

**Author:** ![saucy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/saucy/32/21556_2.png) [@saucy](https://community.glideapps.com/u/saucy)\
**Post date:** [December 16, 2022, 2:48pm UTC](https://community.glideapps.com/t/css-to-add-text-next-to-floating-button/27203/9 "2022-12-16T14:48:11Z")

</div>

thank you, it’s sorted!

question - do you know how to change the shape of a floating button by any chance? I checked your code book but couldn’t see it covered

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 16, 2022, 2:48pm UTC](https://community.glideapps.com/t/css-to-add-text-next-to-floating-button/27203/10 "2022-12-16T14:48:50Z")

</div>

what kind of shape? Do you know that you can simply use any image as a floating button?

---

<div class="post-metadata">

**Author:** ![saucy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/saucy/32/21556_2.png) [@saucy](https://community.glideapps.com/u/saucy)\
**Post date:** [December 16, 2022, 2:49pm UTC](https://community.glideapps.com/t/css-to-add-text-next-to-floating-button/27203/11 "2022-12-16T14:49:47Z")

</div>

An oval shape with text… a bit like the button you’ve created here: [Code BOOK - Desktop](https://code-book-desktop.glideapp.io/dl/da19fa/s/04a872/r/uyywGcGBQEmB6m3W03n5cg)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 16, 2022, 2:52pm UTC](https://community.glideapps.com/t/css-to-add-text-next-to-floating-button/27203/12 "2022-12-16T14:52:40Z")

</div>

the one you are looking at… is from Ann… not mine… i belive he used regular button… i did post how to make your own buttons:

 ![buttons](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/6/86c6aed7d97e347f21e11b6d38371cd0b3ea86ee.png)

> **[Code BOOK - Desktop](https://code-book-desktop.glideapp.io/dl/da19fa/s/04a872/r/HDSjDvjBRgGUSdanXHKHdg)**
>
> share cool CSS, scripts and links