# Icon floating button

**URL:** https://community.glideapps.com/t/icon-floating-button/39467
**Category:** Ask for Help
**Created:** [March 10, 2022, 12:42pm UTC](https://community.glideapps.com/t/icon-floating-button/39467 "2022-03-10T12:42:33Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![scorpio](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/scorpio/32/38799_2.png) [@scorpio](https://community.glideapps.com/u/scorpio)
#### Post date: [March 10, 2022, 12:42pm UTC](https://community.glideapps.com/t/icon-floating-button/39467/1 "2022-03-10T12:42:33Z")

</div>

hi, Is there any Css code to change the icon of a floating button?

Thank you

---

<div class="post-metadata">

### Author: ![Roldy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roldy/32/36068_2.png) [@Roldy](https://community.glideapps.com/u/Roldy)
#### Post date: [March 10, 2022, 8:13pm UTC](https://community.glideapps.com/t/icon-floating-button/39467/2 "2022-03-10T20:13:18Z")

</div>

Yes, this is possible using the title of the button as reference.  
Name the button. For example if the button name is “help”, write this example code in the rich text component:

```auto
<pre><span><style>
[title="help"] {
border: 4px solid;
border-color: #45e38b;
background-color: transparent;
animation: splendid 1s linear infinite;
}

[title="help"] div {
background-color: transparent !important;
}

@keyframes splendid {
    0% { border-color: #45e38b; }
    50% { border-color: yellow; }
    100% { border-color: #45e38b; }
}

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

```

In this example I change the background to transparent, but you can change the background with an image as well.

```auto
[title="help"] div {
background-image: URL("--->YOUR URL<--") !important;
}

```

As you can see, you can do a lot of beautiful things with floating buttons!

👋

---

<div class="post-metadata">

### Author: ![scorpio](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/scorpio/32/38799_2.png) [@scorpio](https://community.glideapps.com/u/scorpio)
#### Post date: [March 11, 2022, 8:12am UTC](https://community.glideapps.com/t/icon-floating-button/39467/3 "2022-03-11T08:12:07Z")

</div>

Thank you, friend

---

<div class="post-metadata">

### Author: ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)
#### Post date: [March 12, 2022, 8:12am UTC](https://community.glideapps.com/t/icon-floating-button/39467/4 "2022-03-12T08:12:32Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.