Changing hover behavior in CSS

Question

I'm making a user interface in Shiny and am trying to make a bunch of stylized buttons. I suceeded in having them be the color I want, and the last thing I want is for the button to darken on hover, like the default buttons do.

I've made the following function for these buttons:

    dateButton <- function(id, label) {
    actionButton(inputId = id, label = label, style = "color: white;
    background-color: darkblue;
    border-radius:15%;
    border-color: white;
    .hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
    }")
    }

I'm sure the problem is .hover, I can't find how to format these list-like attributes. Any resources would also be appreciated.

Repr:

    library(shiny)
    dateButton <- function(id, label) {
    actionButton(inputId = id, label = label, style = "color: white;
    background-color: darkblue;
    border-radius:15%;
    border-color: white;
    .hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);;}")

    ui <- fluidPage(
      dateButton("my_button", "B1"),
      actionButton("default_button", "B2")
    )

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

    shinyApp(ui, server)
}

When ran, B2 does what I want on hover, while B1 doesn't.

Andy Baxter · Accepted Answer · 2023-01-17 23:24:13Z

2

It doesn't seem possible to add the :hover pseudo-class selector to an object's inline style attribute. Instead it would work most smoothly to either insert as a <head><style>... section or link to an external style sheet (more examples here). First of these options as shown below:

library(shiny)
dateButton <- function(id, label) {
  actionButton(
    inputId = id,
    label = label
  )
}

ui <- fluidPage(
  tags$head(tags$style(HTML("
                            #my_button {
                              background-color: darkblue;
                              color: white;
                              border-radius:15%;
                              border-color: white;
                            }
                            #my_button:hover {
                              box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
                              font-weight: bold
                            }
                            "))),
  dateButton("my_button", "B1"),
  actionButton("default_button", "B2"))

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

shinyApp(ui, server)

Edit - making a class to be shared across buttons

If you want to apply this to more buttons, add a class attribute in your constructor function call, and use css accordingly:

library(shiny)
dateButton <- function(id, label) {
  actionButton(
    inputId = id,
    class = "hover-button",
    label = label
  )
}

ui <- fluidPage(
  tags$head(tags$style(HTML("
                            .hover-button {
                              background-color: darkblue;
                              color: white;
                              border-radius:15%;
                              border-color: white;
                            }
                            .hover-button:hover {
                              box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
                              font-weight: bold
                            }
                            "))),
  dateButton("my_button", "B1"),
  actionButton("default_button", "B2"))

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

shinyApp(ui, server)

edited Jan 17, 2023 at 23:24

answered Jan 17, 2023 at 10:22

Andy Baxter

7,7241 gold badge12 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

M K Over a year ago

Thank you for your answer, this works. However, the reasoning for making a function is so multiple buttons with similar formatting could be created (concretely, five). Here, seems like I'd need to copy and paste the HTML for each button, changing the id. I'll look into linking to external CSS. Perhaps a custom class could also work? But I'm not sure it wouldn't overwrite other default-button-class properties.

Andy Baxter Over a year ago

You can indeed do this with a class. Above I've added class = "hover-button" to your dateButton function which adds the css class to the html object. The changed css will then look for .hover-button class objects and apply the same formatting. Using style in this way doesn't override other default button classes, it just appends it to the list of classes and adds extra rules. All other rules still apply to the button, but overlapping elements are overridden by the new class style (such as background-color here). Hope that helps!

M K Over a year ago

Great, that's exactly what I needed! I accepted this as the answer.

Collectives™ on Stack Overflow

Changing hover behavior in CSS

1 Answer 1

Edit - making a class to be shared across buttons

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit - making a class to be shared across buttons

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related