# Ui-Template Button samples for dashboard-1

**URL:** <https://discourse.nodered.org/t/ui-template-button-samples-for-dashboard-1/90884>\
**Category:** Share Your Projects\
**Tags:** node-red-dashboard\
**Created:** [11 September 2024 12:54 UTC](https://discourse.nodered.org/t/ui-template-button-samples-for-dashboard-1/90884 "2024-09-11T12:54:56Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [11 September 2024 12:54 UTC](https://discourse.nodered.org/t/ui-template-button-samples-for-dashboard-1/90884/1 "2024-09-11T12:54:56Z")

</div>

Inspired by other discussion on the forum regarding buttons.  
Improvement suggestions solicited.

**PS: this is for old dashboard**

```auto
[{"id":"f8088574.aea0e8","type":"ui_template","z":"be6d7a036125d1ad","group":"5b5ee9f169c93ecf","name":"CSS","order":8,"width":"32","height":"13","format":"<style>\n.btn-group .button1 {background-color: green; border: none;border-radius: 50px;color: white;padding: 15px 32px;text-align: center;\n text-decoration: none;display: inline-block;font-size: 16px;cursor: pointer;float: left;border: 3px solid black;}\n.btn-group .button2 {background-color: red; border: none;border-radius: 50px;color: white;padding: 15px\n32px;text-align: center;\ntext-decoration: none;display: inline-block;font-size: 16px;cursor: pointer;float: left;border: 3px solid black;}\n.btn-group .button3 {background-color: yellow; border: none;border-radius: 50px;color: red;padding: 15px\n32px;text-align: center;\ntext-decoration: none;display: inline-block;font-size: 16px;cursor: pointer;float: left;border: 3px solid black;}\n.btn-group .button4 {background-color: magenta;border: none;border-radius: 50px;color: white;padding: 15px\n32px;text-align: center;\ntext-decoration: none;display: inline-block;font-size: 16px;cursor: pointer;float: left;border: 3px solid black;}\n\n.btn-group .button1:hover { background-color: black;}\n.btn-group .button2:hover { background-color: black;}\n.btn-group .button3:hover { background-color: black;}\n.btn-group .button4:hover { background-color: black;}\n\n.bigtext {font-size:1.5em ;} \n</style>\n\n<div class=\"btn-group\">\n <button type = \"submit\" class=\"button1\" id=\"m1\" name=\"n1\" value=\"v1\" ng-click=\"send({payload: 'Button-1'})\" >Button1</button>\n <button type = \"submit\" class=\"button2\" id=\"m2\" name=\"n2\" value=\"v2\" ng-click=\"send({payload: 'Button-2'})\" >Button2</button>\n <button type = \"submit\" class=\"button3\" id=\"m3\" name=\"n3\" value=\"v3\" ng-click=\"send({payload: 'Button-3'})\" >Button3</button>\n <button type = \"submit\" class=\"button4\" id=\"m4\" name=\"n4\" value=\"v4\" ng-click=\"send({payload: 'Button-4'})\" >Button4</button>\n</div>\n\n<p class =\"bigtext\">You have clicked</p> <div class =\"bigtext\" ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":425,"y":1050,"wires":[["a89d04c6aeb3f10f"]]},{"id":"a89d04c6aeb3f10f","type":"debug","z":"be6d7a036125d1ad","name":"debug 2690","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":595,"y":1050,"wires":[]},{"id":"5b5ee9f169c93ecf","type":"ui_group","name":"demo","tab":"195948bb680041dd","order":1,"disp":false,"width":"32","collapse":false,"className":""},{"id":"195948bb680041dd","type":"ui_tab","name":"Demo","icon":"dashboard","disabled":false,"hidden":false}]

```

![color-buttons](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/9/e9036e4038b52aaf96d8f8c6d62a16745a1b72e4.gif)

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [11 September 2024 13:05 UTC](https://discourse.nodered.org/t/ui-template-button-samples-for-dashboard-1/90884/2 "2024-09-11T13:05:33Z")

</div>

```auto
[{"id":"f8088574.aea0e8","type":"ui_template","z":"be6d7a036125d1ad","group":"5b5ee9f169c93ecf","name":"CSS","order":8,"width":"32","height":"13","format":"<style>\n.btn-group .button {background-color: green; border: none;border-radius: 50px;color: white;padding: 15px 32px;text-align: center;\n text-decoration: none;display: inline-block;font-size: 16px;cursor: pointer;float: left;border: 3px solid black;}\n.btn-group .button1 {background-color: green; border: none;border-radius: 50px;color: white;padding: 15px 32px;text-align: center;\ntext-decoration: none;display: inline-block;font-size: 16px;cursor: pointer;float: left;border: 3px solid black;}\n.btn-group .button2 {background-color: red; border: none;border-radius: 50px;color: white;padding: 15px\n32px;text-align: center;\ntext-decoration: none;display: inline-block;font-size: 16px;cursor: pointer;float: left;border: 3px solid black;}\n.btn-group .button3 {background-color: yellow; border: none;border-radius: 50px;color: red;padding: 15px\n32px;text-align: center;\ntext-decoration: none;display: inline-block;font-size: 16px;cursor: pointer;float: left;border: 3px solid black;}\n.btn-group .button4 {background-color: magenta;border: none;border-radius: 50px;color: white;padding: 15px\n32px;text-align: center;\ntext-decoration: none;display: inline-block;font-size: 16px;cursor: pointer;float: left;border: 3px solid black;}\n\n.btn-group .button1:hover { background-color: grey;}\n.btn-group .button2:hover { background-color: grey;}\n.btn-group .button3:hover { background-color: grey;}\n.btn-group .button4:hover { background-color: grey;}\n\n.bigtext {font-size:1.5em ;} \n\n.button:active {background-color: red;box-shadow: 0 5px #666;transform: translateY(4px);}\n\n\n</style>\n\n<div class=\"btn-group\">\n <button type = \"submit\" class=\"button\" id=\"m0\" name=\"n0\" value=\"v0\" ng-click=\"send({payload: 'Button-0'})\" >Button0</button>\n <button type = \"submit\" class=\"button1\" id=\"m1\" name=\"n1\" value=\"v1\" ng-click=\"send({payload: 'Button-1'})\" >Button1</button>\n <button type = \"submit\" class=\"button2\" id=\"m2\" name=\"n2\" value=\"v2\" ng-click=\"send({payload: 'Button-2'})\" >Button2</button>\n <button type = \"submit\" class=\"button3\" id=\"m3\" name=\"n3\" value=\"v3\" ng-click=\"send({payload: 'Button-3'})\" >Button3</button>\n <button type = \"submit\" class=\"button4\" id=\"m4\" name=\"n4\" value=\"v4\" ng-click=\"send({payload: 'Button-4'})\" >Button4</button>\n</div>\n\n<p class =\"bigtext\">You have clicked</p> <div class =\"bigtext\" ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":425,"y":1050,"wires":[["a89d04c6aeb3f10f"]]},{"id":"a89d04c6aeb3f10f","type":"debug","z":"be6d7a036125d1ad","name":"debug 2690","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":595,"y":1050,"wires":[]},{"id":"5b5ee9f169c93ecf","type":"ui_group","name":"demo","tab":"195948bb680041dd","order":1,"disp":false,"width":"32","collapse":false,"className":""},{"id":"195948bb680041dd","type":"ui_tab","name":"Demo","icon":"dashboard","disabled":false,"hidden":false}]

```

Added click after effect.

![color-buttons1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/7/07509dad4485f4071846aa3cbeb89bc7d9de0534.gif)