I'm currently developing a user interface using Shiny and I've been working on creating some visually appealing buttons. I've managed to customize the colors as desired, but now I'm facing an issue with getting the button to darken when hovered over, similar to the default buttons.
Here is the function that I have created for these stylized 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 believe the issue lies within the .hover section where formatting seems to be incorrect. Any suggestions or resources would be highly appreciated.
Here's a code representation:
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)
}
After running the code, B2 behaves correctly upon hovering, while B1 does not exhibit the expected behavior.