Floating Button Glows in "Code Book" Preview, but not in my app

Ask for Help
1

Hi, all, and especially @Uzo :relaxed:.
I’d like to use the floating button glowing effect to boost UX. The CSS in Code Book works, but not once in my app. The other CSS code for position is OK.
What did I miss?
BTW, is there a “border-color” or “icon-color” option? If I want the button to be transparent (which is possible, and gives kind of “neumorphism” look in, but it hides totally the icon as well, too bad :grin:!), but with the icon to be in a visible color. For a black background #000000. And just the glow.

I have to search CSS rules step by step to learn more independantly. It’s worth the study.
But if you see sth here to adjust, it would be a relief.
Thks whoever can help :cherry_blossom:

<pre><span><style> 
div[id*='screenScrollView'] > div > :nth-of-type(1) .floating-btn-style   { 
        background-color: transparent;
      }
​ @keyframes glowing {
        0% {
          background-color: black;
          box-shadow: 0 0 5px purple;
        }
        50% {
          background-color: black;
          box-shadow: 0 0 20px purple;
        }
        100% {
          background-color: black;
          box-shadow: 0 0 5px purple;
        }
      }

div[id*='screenScrollView'] > div > :nth-of-type(1) .floating-btn-style   {
        animation: glowing 1300ms infinite; }
2

To me it looks like it should not be “screenScrollView”, it should be something that represents the floating group, I’m not at my laptop so I’ll test this tomorrow my time.

1 Like
3

change the nth-of-type number to match your button position.

4

I have only 1 floating button or any button on this screen, so it’s (1) right?

5

try this


div[id*='screenScrollView'] > div > :nth-of-type(1) .floating-btn-style { 
        background-color: #800000;
             }
      @keyframes glowing {
        0% {
          background-color: #800000;
          box-shadow: 0 0 5px #FF0000;
        }
        50% {
          background-color: #FF0000;
          box-shadow: 0 0 5px #FF0000;
        }
        100% {
          background-color: #800000;
          box-shadow: 0 0 5px #FF0000;
        }
      }
      div[id*='screenScrollView'] > div > :nth-of-type(6) button {
        animation: glowing 1300ms infinite; } 

div[id*='screenScrollView'] > div[id*='screenScrollView'] > div > :nth-of-type(1) .floating-btn-style { 
        background-color: #800000;
             }
      @keyframes glowing {
        0% {
          background-color: #800000;
          box-shadow: 0 0 5px #FF0000;
        }
        50% {
          background-color: #FF0000;
          box-shadow: 0 0 5px #FF0000;
        }
        100% {
          background-color: #800000;
          box-shadow: 0 0 5px #FF0000;
        }
      }
      div[id*='screenScrollView'] > div > :nth-of-type(1) .floating-btn-style {
        animation: glowing 1300ms infinite; }
1 Like
6 
<pre><span><style>

div[id*='OverlayscreenScrollView'] > div > :nth-of-type(1) .floating-btn-style { 
      animation: glowing 1300ms infinite;
        background-color: #800000;
             }
      @keyframes glowing {
        0% {
          background-color: #800000;
          box-shadow: 0 0 5px #FF0000;
        }
        50% {
          background-color: #FF0000;
          box-shadow: 0 0 5px #FF0000;
        }
        100% {
          background-color: #800000;
          box-shadow: 0 0 5px #FF0000;
        }
      }

Try this and let me know if it works.

3 Likes
7

Hi! ＠ThinhDinh
Isn’t it better to change “.floating-btn-style” to “> div” and avoid using “class” as much as possible?

div [id * ='OverlayscreenScrollView']> div>: nth-of-type (1) .floating-btn-style {
↓
div [id * ='OverlayscreenScrollView']> div>: nth-of-type (1)> div {
2 Likes
8

Hi @LM
Floating buttons don’t yet have a robust selector name, so it’s often difficult to decorate css.
I don’t know what your goal is, but you have the following options:

<div class="richbutton">
back
</div>
<pre><span><style>
.richbutton{
/*↓Used for fixed position*/
/*position:fixed;
top:10rem;
left:2rem;
*/
width: 60px;
height: 60px;
border-radius: 50%;
font-size:1rem;
font-weight:bold;
color:#fff;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
animation: flash 1.5s ease-in-out infinite;
}
@keyframes flash {
100% { 
background-color: red;
}
}

Create button-like elements in Rich Text to set custom actions.

1 Like
9

Thks. It’s working, but in strange ways.
I mean the exact rich text in exact set of components (in exact order, code, etc.) in 2 diff apps (1 a copy of the original)
the copy is working and not the original
but if I add a new line under <div
it “awakens” the not working code.
Whereas the copy is happy with no new line!

I’ll have to investigate further and adjust the effects (it could be epileptic if not smooth enough), but it’s Solved, I can show this to my mentor on Monday: he’d never have expected that :grinning_face_with_smiling_eyes:
And I’ll study step by step the CSS for Glide: where can I fin all the classes, elements/object names (I don’t know the words)?
I’ve found general CSS rules, but not the specific Glide ones.
Thks again, ThinhDinh :cherry_blossom:.
I’ll show the results in due time.

10

Thks, I’ll try this too :cherry_blossom:

11

Thks.
I’ll show the result later: need to adjust the effect. It’s a floating button to open the door.
Happy that you had that idea too.

I’ll need you some day for my “finale” effect: open that door with a very smooth effect, a glass morph soft edges door (with dark mode) with even the floating button captured on it.
Maybe a sliding door from right to left, or a dissolve if that even exists in CSS: for a more abstract yet minimalist door.
And that does not slow down the app loading of course!

1 Like
12

Yeah I agree, avoid using anything not stable when you can find a better choice.

3 Likes
13

I think I can be happy for now. @ThinhDinh @hisashi.fujita
Or it will take me (some more) hours to decide :smiley:

I have no idea when the video will be ready for you to read. Turn to HD.

1 Like
14

Great Ly-Mei! My only feedback is increase the contrast of the button & the background. It’s everything too dark yet

2 Likes
15

Thks, Lucas. Yeah, I’d like the icon (not the button, the icon inside) to be lighter color, but not sure it’s possible. I like the “eclipse” effect, instead of the “traffic/warning light epileptic effect”.
Finding the perfect dark color between #8F6072, darkmagenta and black would be nice. Maybe add 2 more status 25 % and 75 % in the glowing.
Maybe play with opacity if that’s a possible setting to reduce trouble and keep it clean, consistent in color shades.
But I’ll let some time open my eyes.
And try little by little, while working on other priorities.

16

my idea is to put a glass morph door on this pitch black background (and the light beam through the glass door + a light contouring all around, and especially at “floor level”). But I need some work and the exact dimensions and DDI.
What dimensions and resolution your could recommend me for a full screen image, Lucas?
Thks :slightly_smiling_face: