CSS: Can I make this button glow?

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. :cherry_blossom:

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

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

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?

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

1 Like

Thks for your feedback, Uzo :slightly_smiling_face:
Sorry to know you have to rework :confused: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 :boxing_glove::jigsaw::stopwatch::sweat_drops:

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

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.

6 Likes

Thks so much, Himaladin, it’s working :purple_heart::last_quarter_moon::sparkles:
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.

1 Like

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

1 Like

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


My Glowing Eclipse Door?
Screen Cap for the HD Feel

4 Likes

I am glad that it help @L.M.

3 Likes

Your door look great. :+1:

2 Likes

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.

1 Like

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.

2 Likes

Thks, “embarrassed-shoe-5921” :rofl::joy:
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” :tophat::boot::desert_island:
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 :confused:, instead of being 15 minutes early.
What a shame… Still waiting for the recording.
But at least I saw some of you, guys.

1 Like

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