actionButton without default CSS classes

Question

I'm using CSS to style my applications. I've found that I need to repeatedly do more work with actionButtons because they come with default CSS classes whether I want them to or not. Take a look at this example:

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
                    .redbutton {
                    background-color: red;
                    }
                    "))
  ),
  actionButton("button1", "Hover", class = "redbutton")
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)

The button has the redbutton class applied, as I specified. However, the default CSS classes include on-hover and on-click behavior, changing the color of the button when hovered even though I do not desire this behavior. Can this be avoided? I'd prefer not to add specific instances of ':hover' into my css sheet for every class, just to disable the default behavior.

score 1 · Answer 1 · answered May 24 '23 at 11:21

Another variant is to remove the unwanted CSS class, client-side, with javascript. Include this in your HTML head by adding it to your tags$head function:

## other server code ...
tags$head(
## other header elements,
      tags$script("
        var dropClass = 'btn-default';
        $(document).ready(function() { 
            document.getElementsByClassName(dropClass)
                .forEach(function(n){n.classList.remove(dropClass)});
        })
     ")
)

In this case, removing the 'btn-default' class should do the trick.

Note that CSS also offers a pointer-events: none declaration to prevent triggering the hover style (but also other effects like cursor-shape).

Clever. I tried with `dropClass="btn"` and that didn't remove this class. But then I typed your code in the console and the class has been removed. — Stéphane Laurent, May 24 '23 at 13:17

score 0 · Answer 2 · answered May 24 '23 at 10:48

One possibility is to do a function for a basic button:

myButton <- function(id, label, class) {
  tags$button(id = id, class = paste0("action-button ", class), label)
}

But be aware that such a basic button has some CSS styles defined by the browser, and that's rather ugly. So you should define a base class for your custom buttons.

actionButton without default CSS classes

2 Answers2