change bg color of action button after click in R Shiny

Question

I need to change bg color of action button in R Shiny after click/press. I am able to change the default color and color on hover but having problem in changing the color after click. when the button is Not clicked - Blue, on Hover - Light Blue, after click - Green. Looking for work around on this.

Here is my code-

ui <- shinyUI(
dashboardPage (
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
  tags$head(tags$style(HTML("
                            .btn {
                            color:rgb(255,255,255);
                            text-align: left;
                            #border-color:rgb(0,144,197);
                            background-color:rgb(0,144,197);}

                            # #gobutton:active {
                            # background: green;
                            # }

                             .btn:hover{
                                      #border-color:rgb(232,245,251);
                            background-color: rgb(232,245,251);color:   rgb(0,144,197);font-weight: bold;
                            }
                            "))),



          actionButton("gobutton","Go"),
          bsModal("formExample", "form", "gobutton", size = "small", #    Enables Pop up Screen

          # Different Shiny Widgets

          textInput("first.name", "First Name", ""),
          textInput("last.name", "Last Name",""),
          dateInput('date',label = 'Date of Birth: yyyy-mm-dd',value = ""),
          sliderInput("age", "Age in Yrs", 0, 100, 25, ticks = FALSE),
          radioButtons("gender","Gender",choices = list("Male" = "Male",  "Female" = "Female"),selected = "Male")

   )
   )))

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

shinyApp(ui,server)

Answer 1

I was able to do it by adding some CSS in your CSS code:

ui <- shinyUI(
  dashboardPage (
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      tags$head(tags$style(HTML("
                                .btn {
                                color:rgb(255,255,255);
                                text-align: left;
                                #border-color:rgb(0,144,197);
                                background-color:rgb(0,144,197);}

                                # #gobutton:active {
                                # background: green;
                                # }

                                .btn:hover{
                                #border-color:rgb(232,245,251);
                                background-color: rgb(232,245,251);color:   rgb(0,144,197);font-weight: bold;
                                }
                                .btn:focus{
                                background-color:green;
                                }

                                "))),



      actionButton("gobutton","Go"),
      bsModal("formExample", "form", "gobutton", size = "small", #    Enables Pop up Screen

              # Different Shiny Widgets

              textInput("first.name", "First Name", ""),
              textInput("last.name", "Last Name",""),
              dateInput('date',label = 'Date of Birth: yyyy-mm-dd',value = ""),
              sliderInput("age", "Age in Yrs", 0, 100, 25, ticks = FALSE),
              radioButtons("gender","Gender",choices = list("Male" = "Male",  "Female" = "Female"),selected = "Male")

      )
      )))

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

shinyApp(ui,server)

The above seems to work fine:

The CSS I added was:

.btn:focus{
  background-color:green;
}

Answer 2

You can always use shinyBS package. May I suggest adding a tooltip to your button on hover also

#rm(list = ls())
library(shiny)
library(shinydashboard)
library(shinyBS)
ui <- dashboardPage(
  dashboardHeader(title = 'My Change Button Color'),
  dashboardSidebar(sidebarMenu()),
  dashboardBody(
    fluidRow(
      bsButton("button1", label = "Click Me", block = F, style="danger"),
      bsTooltip(id = "button1", title = "Button 1 Explanation", placement = "right", trigger = "hover")
    )
  )
)

server <- (function(input, output, session) {  
  observeEvent(input$button1,{                                                                                                                                 
    updateButton(session, "button1",label = "Click Me", block = F, style = "success")                                                                                                                           
  })                                                                                                                                                            
})

shinyApp(ui, server)