CSS: Can I make this button glow?

[L.M]

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.

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

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

[Uzo]

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

[L.M]

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?

[Uzo]

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

[L.M]

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

[Himaladin]

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

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

[Jeff_Hager]

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.

System/GMT Time - Solved!

This is an extension of the request for System Time, please. 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…

[L.M]

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.

[L.M]

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

[L.M]

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

My Glowing Eclipse Door?
Screen Cap for the HD Feel

[Himaladin]

I am glad that it help @L.M.

[Himaladin]

Your door look great.

[L.M]

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.

[Jeff_Hager]

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.

[L.M]

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.