How to add shadow and change colour of standard Shiny action button?-CodePudding

I am trying to add a shadow to a Shiny action button, and also change its colour. I imagine this takes some CSS? Any suggestions? I am avoiding adding packages like shinyWidget; I won't need anything fancier than changing colour/shadow and I'm avoiding package bloat.

I searched high and low and all recommendations flow to shinyWidget, or questions/answers are very cumbersome. So here's my simple example.

Code with unformatted base action button:

library(shiny)

ui <- fluidPage(
  br(),actionButton("add","Click to add 1 to the data!!!"), br(),br(),
  fluidRow(tableOutput("data")),
)

server <- function(input, output, session) {
  x = reactiveVal(0)
  
  output$data <- renderTable(x())
  observeEvent(input$add,{x(x() 1)})
}

shinyApp(ui, server)

CodePudding user response：

Indeed this requires CSS. See this post to know how to include CSS in a shiny app. It's hard to know exactly the style you want but maybe this can help:

ui <- fluidPage(
  tags$head(
    tags$style(
      HTML(
        "#add {
          color: red;
          background-color: black;
          box-shadow: 3px 3px 3px 3px grey;
        }"
      )
    )
  ),
  br(),actionButton("add","Click to add 1 to the data!!!"), br(),br(),
  fluidRow(tableOutput("data")),
)

To know more about CSS, W3schools has nice tutorials.