Ui-Template Button samples for dashboard-1

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

PS: this is for old dashboard

[{"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

1 Like
[{"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

2 Likes