Add custom R shiny input buttons: best way

[Arotan]

Hello world!

I'm programming my second R Shiny app, and my knowledge is growing.
But my skills on HTML, CSS and JS are still poor.
I am wondering how to add custom buttons in R shiny app.

Can we do this easily with a package or something to creat a new button?
Can you help me and show me how to implement one button please.
I have tried many things and I am lost.
Maybe someone could provide me minimal example for that..
For purpose of training, I'm trying to implement a small tool found on the internet (details below)

Let says I want to add 2 buttons:
Button1
Button2

I want to add it into R shiny: default view is the grey square, but highlighting in yellow when hover it (both images are in the attached png file).

Button1 will send the str("1") when clicked.
Button2 will send the str("2") when clicked.

If multiple click on the said button occurs, the value will grow like this:
One click on Button1-> c("1")
Two click on Button1-> c("1","1")
Two click on Button1 + One click on Button 2 -> c("1","1","2")

(eventually, I would like to know how to add "CLEAR" button to empty the string vector

The idea and source materials come from:
Original website: www(dot)ookii(dot)org/Software/Dni
Corresponding JS: www(dot)ookii(dot)org/Scripts/dni.js

EDIT1: I did manage to make the custom button, but it's not clickable and it doesnt highlight in yellow when hover:
css file : www(dot)ookii(dot)org/Content/software/dni.css

            includeCSS("www/dni.css"),
            tags$div(
              id = "dni0",
              class = "dniButton",
              img(src = "images/dni/button0.png"),
              alt="0",title="0",value="0"
            )```

[nirgrahamuk]

If you provide a minimal and runnable shiny app, that has two buttons, that behave in two ways, but they lack the styling that you want, that will reduce the effort that a forum user would need to dedicate towards assisting you to your goal, as they could focus on the style issue that you need help with, and not the functional issues which you haven't said you need help with.
Just a suggestion

adding buttons with images is possible, along these lines:

  tags$button(
      id = "web_button",
      class = "btn action_button",
      img(src = "http://www.craftech.com/wp-uploads/2015/05/web.png",
               height = "50px")
    )

stack_overflow_post

[Arotan]

library(shiny)

# Define UI for miles per gallon app ----
ui <- pageWithSidebar(
  # App title ----
  headerPanel("Miles Per Gallon"),
  
  # Sidebar panel for inputs ----
  sidebarPanel(),
  
  # Main panel for displaying outputs ----
  mainPanel(
    tags$head(
      tags$style(HTML("div.dniButton
                      {
                       overflow: hidden;
                       height: 27px;
                       width: 34px;
                       float: left;
                       margin: 3px;
                       }
                       div.dniButton:hover input
                       {
                       margin-top: -27px;
                       }"))
      ),
    tags$button(
      id = "dni0",
      class = "dniButton",
      img(src = "http://www.ookii.org/Content/software/images/dni/button0.png"))
  )
)

# Define server logic to plot various variables against mpg ----
server <- function(input, output) {
  
}
shinyApp(ui, server)

This is what i try as minimal exemple.
I dont know how to make the button with the grey part only of the linked png and then when hover it, it became yellow.

The thing i want then is that when you clicl this button, it sends "0" to R shiny server...

you can see this post here https://stackoverflow.com/questions/60738146/how-can-you-add-custom-r-shiny-input-buttons-minimal-example (i added image to explain my problems and I don't know how to do that here)