UI_template & changing button background colour on click

Excuse my curiosity but can you explain the flexibility issue you are trying to resolve with using template instead of ready made button node.

Sure, using class / css functions I can get detailed control of

putting an image inside the button
background color
border on/off
border color
border size
border radius
text color
text size
text font
printing combinations of text and msg data within the button

I dont think I can do that with the inbuilt buttons and switches?

What is the goal you are targeted on?

Sure. I need to build a scheduling interface on the webpage that can be interacted on by the user. All the scheduling systems I have seen require the user to log into the node-red webpage to change it. I dont want that. I want to make it easy for the user so needs to be thrugh the web interface.

I have a 24hr / 7 day week schedule in 30min blocks
On the interface, each 30 min block is actually a button that the user can interact with on the touchscreen
Selecting the 30min block changes the buttons color and sends out a message with the setting

So......... if the schedule says on from 03:00 to 05:00 then the 4 buttons making up that time block (4 buttons representing 30min time blocks) will all be the same color. In picture below they are shown blue (I have hard coded them blue for visual representation). I have pushed all the buttons together with no borders and no gaps so I have the look correct but I need to change the color and send a message on button press.

The intention is the user would just swipe their finger left or right over the buttons and it will look and feel like they are selecting blocks of time.