如何为标准Shiny动作按钮添加阴影并修改颜色？

无需依赖shinyWidgets等额外包，直接在Shiny的UI中嵌入自定义CSS即可实现需求。以下是修改后的完整代码：

library(shiny)

ui <- fluidPage(
  # 嵌入自定义CSS
  tags$style(HTML("
    /* 针对指定ID的动作按钮设置样式 */
    #add {
      background-color: #2c3e50; /* 自定义背景色 */
      color: #ffffff; /* 自定义文字颜色 */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影：水平0，垂直4px，模糊8px，深灰色半透明 */
      border: none; /* 去掉默认边框（可选） */
      border-radius: 4px; /* 圆角（可选） */
    }
    
    /* 鼠标悬停时的样式增强（可选） */
    #add:hover {
      background-color: #34495e;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
      cursor: pointer;
    }
  ")),
  
  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)

关键说明： #

• 用tags$style(HTML(...))在UI中插入CSS代码，这是Shiny内置方法，无需额外依赖
• 通过按钮ID#add精准定位目标按钮，避免影响其他按钮；如果要统一设置所有动作按钮，可替换为.btn-default类选择器
• box-shadow参数说明：水平偏移量 垂直偏移量 模糊半径 阴影颜色，可根据需求调整数值
• 额外添加的hover状态样式是可选的，用于提升用户交互体验

内容的提问来源于stack exchange，提问作者Village.Idyot