# CSS: Can I make this button glow?

**URL:** <https://community.glideapps.com/t/css-can-i-make-this-button-glow/33546>\
**Category:** Ask for Help\
**Created:** [October 24, 2021, 4:17pm UTC](https://community.glideapps.com/t/css-can-i-make-this-button-glow/33546 "2021-10-24T16:17:33Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\
**Post date:** [October 24, 2021, 4:17pm UTC](https://community.glideapps.com/t/css-can-i-make-this-button-glow/33546/1 "2021-10-24T16:17:33Z")

</div>

I have a previous glowing floating button. It’s working & clickable.  
I’d like to replace it by this large “eclipse” button (the half black round + “Entrée” and an arrow icon inside). Technically, it’s a button component.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/6/1662515edb0fcc0556f8085b62df434c1b08e8b0.jpeg)

Can’t figure out how to combine the CSS used in my former glowing floating button.  
Can you help with this, pls? Thanks. 🌸

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

[data-test=app-button-view] {
position:fixed; 
width:280px; height:280px; 
top:35%;
bottom:0%;
right:0%;
left:55%;
padding:0px;
border-radius:360px; 
text-align: right; 
box-shadow: 0px 0px 100px 10px #8F6072 !important; 
font-size:19px; 
font-weight: bold; background-color: rgba(143, 96, 114, 0.14);
backdrop-filter: blur;
z-index:1;
}

.fab-target{ 
animation: glowing 4000ms infinite;
        background-color: black;
opacity:30%;
             }
      @keyframes glowing {
        0% {
          background-color: black;
opacity:50%;
          box-shadow: 0 0 5px pink;
        }
  25% {
          background-color: black;
opacity:70%;
          box-shadow: 0 0 10px pink;
        }
        50% {
          background-color: black;
opacity:100%;
          box-shadow: 0 0 20px pink;
        }
75% {
          background-color: black;
opacity:70%;
          box-shadow: 0 0 40px pink;
        }
        100% {
          background-color: ​black;
opacity:50%;
          box-shadow: 0 0 80px pink;
        }
}

```

---

<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:** [October 25, 2021, 9:00am UTC](https://community.glideapps.com/t/css-can-i-make-this-button-glow/33546/2 "2021-10-25T09:00:32Z")

</div>

since glide made action on rich text components, there is no need to use floating buttons as a base for CSS, just create an object from scr image

---

<div class="post-metadata">

**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\
**Post date:** [October 25, 2021, 9:26am UTC](https://community.glideapps.com/t/css-can-i-make-this-button-glow/33546/3 "2021-10-25T09:26:21Z")

</div>

Hi, Uzo, thks for the idea.  
I don’t need a floating, I already have one.  
I know a Rich Text can be actionable now, I’m using that for cliquable images.  
But I don’t know how to make that object glow. I don’t know how to “call” it to animate it.  
Maybe I’m using Edge and don’t easily see the objects and classes as obviously?

---

<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:** [October 25, 2021, 9:34am UTC](https://community.glideapps.com/t/css-can-i-make-this-button-glow/33546/4 "2021-10-25T09:34:19Z")

</div>

recently Glide change classes names, forced me to redo a few apps… so I will strongly recommend using CSS on non-class objects… or just refer to a child number

---

<div class="post-metadata">

**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\
**Post date:** [October 25, 2021, 11:12am UTC](https://community.glideapps.com/t/css-can-i-make-this-button-glow/33546/5 "2021-10-25T11:12:56Z")

</div>

Thks for your feedback, Uzo 🙂  
Sorry to know you have to rework 😕Must be tedious, time-consuming & frustrating  
It helps me prioritize.  
And wait for safer solutions.  
I’m prototyping, so I can afford to take as much risk as I want.  
And taking in all insights meanwhile to collect the right things.  
Bon Courage, Uzo, for your projects and rework 🥊🧩⏱💦

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 25, 2021, 1:50pm UTC](https://community.glideapps.com/t/css-can-i-make-this-button-glow/33546/6 "2021-10-25T13:50:55Z")

</div>

I’m not a programmer. I’m just doing trial and error. This can make your buttons glow. Is this what you mean?

```auto
<pre><span><style>
[data-test=app-button-view] {
position:fixed; 
animation: glowing 1200ms infinite;
width:280px; height:280px; 
top:35%;
bottom:0%;
right:0%;
left:55%;
padding:0px;
border-radius:360px; 
text-align: right; 
box-shadow: 0px 0px 100px 10px #8F6072 !important; 
font-size:19px; 
font-weight: bold; background-color: rgba(143, 96, 114, 0.14);
backdrop-filter: blur;
z-index:1;
}     
      @keyframes glowing {
        0% {
          background-color: darkviolet;
          box-shadow: 0 0 5px darkviolet;
          border: 2px solid darkviolet;
        }
        50% {
          background-color: #eebdff;
          box-shadow: 0 0 20px #eebdff;
          border: 2px solid #f8e4ff;
        }
        100% {
          background-color: #9400D3;
          box-shadow: 0 0 5px #9400D3;
          border: 2px solid #9400D3;
        }
      }

```

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [October 25, 2021, 2:01pm UTC](https://community.glideapps.com/t/css-can-i-make-this-button-glow/33546/7 "2021-10-25T14:01:26Z")

</div>

Usually you should be able to create a div tag that wraps around your image/text with your own class name in your rich text, then follow it with the CSS that targets the div tag class name you created. So instead of targeting a glide object, you are targeting your own object. I don’t exactly have a ready example, but I’ve done it with html tables in my app and then added some extra styling. I’ve also done it with some animations that are controlled by by sheet data. There’s probably a few other example somewhere in the forum.

Take a look at how I added the clock in the app in this thread. It’s animated and within a rich text component. I don’t have an action on it, but I could if I needed. I think that will give you a general idea of what I’m talking about.

> [@clock3 System/GMT Time - Solved!](https://community.glideapps.com/t/system-gmt-time-solved/27524):
>
> This is an extension of the request for [System Time, please](https://community.glideapps.com/t/system-time-please/26837). There’s been a lot of questions for a while about how to get a universal time that can be shared for multiple users across multiple time zones. Most of you will know that any time your get a date/time from one of the glide special values, it will always be the user’s local time. But if you don’t know which time zone they are in, then you have no easy way to convert that date/time into something standard, like Greenwich Mean Time, to…

---

<div class="post-metadata">

**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\
**Post date:** [October 25, 2021, 3:39pm UTC](https://community.glideapps.com/t/css-can-i-make-this-button-glow/33546/8 "2021-10-25T15:39:02Z")

</div>

Thks so much, Himaladin, it’s working 💜🌗✨  
I need some time to adjust the glow as smooth as possible, and I’ll share the result.  
I’ll have a look at other’s Best Practices too, just in case.

---

<div class="post-metadata">

**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\
**Post date:** [October 25, 2021, 3:40pm UTC](https://community.glideapps.com/t/css-can-i-make-this-button-glow/33546/9 "2021-10-25T15:40:56Z")

</div>

Oh, that’s good news if I can simply use div as reliable rule. Thks, Jeff 🌸

---

<div class="post-metadata">

**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\
**Post date:** [October 25, 2021, 4:42pm UTC](https://community.glideapps.com/t/css-can-i-make-this-button-glow/33546/10 "2021-10-25T16:42:55Z")

</div>

Et Voilà! @Himaladin !  
You can hear my voice in the video.

![](https://play.vidyard.com/Xjswkp5TRdhSBLdujD2q3D.jpg)  
[My Glowing Eclipse Door](https://share.vidyard.com/watch/Xjswkp5TRdhSBLdujD2q3D)?  
Screen Cap for the HD Feel

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/1/11b55fe8aa70fbf65159fe830658f670c026b6f1.jpeg)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 25, 2021, 5:17pm UTC](https://community.glideapps.com/t/css-can-i-make-this-button-glow/33546/11 "2021-10-25T17:17:33Z")

</div>

I am glad that it help @L.M.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 25, 2021, 5:23pm UTC](https://community.glideapps.com/t/css-can-i-make-this-button-glow/33546/12 "2021-10-25T17:23:47Z")

</div>

Your door look great. 👍

---

<div class="post-metadata">

**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\
**Post date:** [October 25, 2021, 6:20pm UTC](https://community.glideapps.com/t/css-can-i-make-this-button-glow/33546/13 "2021-10-25T18:20:12Z")

</div>

Thks, but the thread is very long, do I have to inspect the code in browser to find your html for the clock?  
I’ll try tomorrow.  
It’s 20:18 now, Paris Time.  
I’d better rest my eyes.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [October 25, 2021, 6:22pm UTC](https://community.glideapps.com/t/css-can-i-make-this-button-glow/33546/14 "2021-10-25T18:22:47Z")

</div>

No, you don’t have to read the whole thread. Just copy the app and take a look to see how I have it set up.

---

<div class="post-metadata">

**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\
**Post date:** [October 26, 2021, 6:22am UTC](https://community.glideapps.com/t/css-can-i-make-this-button-glow/33546/15 "2021-10-26T06:22:53Z")

</div>

Thks, “embarrassed-shoe-5921” 🤣😂  
I had a “fearless-toe…” who recovered from her broken toe when I made her lol telling her her “Glidarious” dummy email.  
I’m “snazzy-island-348” 🎩👢🏝  
BTW, it confirms Paris is GMT+2.  
Yet when I showed up at the Glide Training at 20:45 CET Paris, 19:00 GMT,  
I ended up being late 😕, instead of being 15 minutes early.  
What a shame… Still waiting for the recording.  
But at least I saw some of you, guys.

 ![Screenshot_2021-10-26-08-14-23](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/8/78854727b79690d744eb2c2ec86bcc1e0d3d78cb.png)

---

<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:** [October 27, 2021, 6:23am UTC](https://community.glideapps.com/t/css-can-i-make-this-button-glow/33546/16 "2021-10-27T06:23:35Z")

</div>

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