Change the shape of action button in shiny

Question

Anyone know how to change the shape of a action button from a square to a circle in shiny??

library(shiny)

ui <- fluidPage(
  h1("Some text:"),
  tags$head(tags$script(src = "Welcome.js")),
  tags$button(id="intro", 
              type="button", 
              class="btn action-button btn-success btn-lg ",
              strong(HTML('<i class="icon-star">  </i>Some text')))
)

Thanks

DC

Answer 1

To change the shape of the action button you can use CSS. One way would be:

.btn {
  display:block;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  border: 1px solid red;
}

, source: Circle button css. That would create a cirular action button.

To add CSS in your shiny app you can use tags$head(tags$style(HTML(...))):

Reproducible example:

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
                  .btn {
                    display:block;
                    height: 60px;
                    width: 60px;
                    border-radius: 50%;
                    border: 1px solid red;

                    }

                    "))
    ),
  actionButton("do", "Go!")
)

server <- function(input, output, session) {
  observeEvent(input$do, {
    print(2)
  })
}

shinyApp(ui, server)