How to create a glowing or flickering actionButton()

[GreyMerchant]

Hello,

I would like to know if there is a relatively simple way to create an actionButton() within Shiny that can flicker or glow until clicked? Ideally, I would like to create it without introducing a whole slur of dependencies.

Any help would be appreciated

[pieterjanvc]

Hello,

This can be done with just a little CSS:

library(shiny)
library(shinyjs)

shinyApp(
  ui = fluidPage(useShinyjs(),
    
    #Create glowing effect
    tags$head(
      tags$style(HTML(
        "@keyframes glowing {
         0% { background-color: #fcfcfc; box-shadow: 0 0 5px #0795ab; }
         50% { background-color: #e8f0fc; box-shadow: 0 0 20px #43b0d1; }
         100% { background-color: #fcfcfc; box-shadow: 0 0 5px #0795ab; }
         }"
        ))),
    
    #Apply effect  to button
    actionButton("myButton", "Click me...", 
                 style = "animation: glowing 1300ms infinite;")
  ),
  server = function(input, output, session) {
    
    observeEvent(input$myButton, {
      runjs(paste0('$("#myButton").css("animation","")'))
    })
    
  }
)

I based the CSS on the following great W3 article:

How to Create Flashing/Glowing Button Using Animations in CSS3

I also added the functionality to stop glowing once clicked using shinyjs to update the css and set animation to blank

Hope this helps,
PJ

[GreyMerchant]

You're a lifesaver! Thank you so much . If you want to reset the actionButton() to not glow after click, do you need to completely recreate the actionButton or can you simply change the style to empty?

[pieterjanvc]

Haha I just updated while you were replying...

[GreyMerchant]

Haha thanks so much! Is there any way to do it without shinyjs or is that not possible at all?

[pieterjanvc]

Hi,

No that's not possible as far as I know. This solution I found online with shinyjs is already way simpler than other suggestions online of recreating buttons to update their css

PJ

[GreyMerchant]

Thanks for all the help on this. I really appreciate it!

[dcruvolo]

I know this question is solved, but here's the version without shinyjs if anyone is interested.

This can be done by creating a css class glow using the animation property and applying the class glow inline. (I also added support for other browsers -webkit-...). The js function evaluates all of the css classes applied to myButton and determines if grow is present. If it is, then it is removed from this element.

library(shiny)


shinyApp(
    ui = fluidPage(
        
        #Create glowing effect
        tags$head(
            tags$style(
                "@-webkit-keyframes glowing {
                    0% { background-color: #fcfcfc; box-shadow: 0 0 5px #0795ab; }
                    50% { background-color: #e8f0fc; box-shadow: 0 0 20px #43b0d1; }
                    100% { background-color: #fcfcfc; box-shadow: 0 0 5px #0795ab; }
                }
                
                @keyframes glowing {
                    0% { background-color: #fcfcfc; box-shadow: 0 0 5px #0795ab; }
                    50% { background-color: #e8f0fc; box-shadow: 0 0 20px #43b0d1; }
                    100% { background-color: #fcfcfc; box-shadow: 0 0 5px #0795ab; }
                }
                
                .glow {
                    -webkit-animation: glowing 1.3s infinite;
                    animation: glowing 1.3s infinite;
                }
                "
            )
        ),
        
        #Apply effect  to button
        actionButton("myButton", "Click me...", class="glow"),
        
        # remove class when btn clicked
        tags$script(type="text/javascript",
                    "
                    const btn = document.getElementById('myButton');
                    btn.addEventListener('click', function(){
                        const classes = new Array(btn.classes);
                        if( classes.indexOf('glow') ){
                            btn.classList.remove('glow');
                        }
                    })
                    "
        )
    ),
    server = function(input, output, session) { }
)

[GreyMerchant]

@dcruvolo - Thanks so much for sharing this! I likely may use this setup just because of some uncertainty regarding shinyjs (specific to my setup and use case). It is also very helpful to see alternative implementations like this. Much appreciated