Changing hover behavior in CSS-CodePudding

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.

CodePudding user response：

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)