Not really creative nor very good at coding but after building some flows that looked horrible I decided to try to at least make a little effort. So I wandered the internet to find buttons and then stumbled upon how to make the buttons work so I thought I would share with anyone struggling to start putting custom buttons on their dashboard.
and the code
[{"id":"1692cc5c.5ed7b4","type":"ui_template","z":"c07f9a2b.fc9ad","group":"57af5fc2.f4ef78","name":"1","order":1,"width":2,"height":2,"format":"\n<div>\n<md-button class=\"md-button your-button up\"\n ng-click=\"send({payload: 'on',topic: 1})\"> \n 1\n</md-button>\n</div>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":170,"y":220,"wires":[["ad8e4835.4eea7"]]},{"id":"62c6d116.695a5","type":"ui_template","z":"c07f9a2b.fc9ad","group":"57af5fc2.f4ef78","name":"your-button","order":13,"width":0,"height":0,"format":"<style>\n/* -------------- THE button -------------- */\n.your-button {\n\n/* text */\n width: 100%;\n height: 100%;\n\ttext-decoration: \t\tnone;\n\tfont: \t\t\t\t\t24px/1em 'Droid Sans', sans-serif;\n\tfont-weight: \t\t\tbold;\n\ttext-shadow: \t\t\trgba(255,255,255,.5) 0 1px 0;\n\tuser-select: \t\t\tnone;\n\tpadding: \t\t\t\t.5em .6em .4em .6em;\n\tmargin: \t\t\t\t.5em;\n\tdisplay: \t\t\t\tinline-block;\n\tposition: \t\t\t\trelative;\n\tborder-radius: \t8px;\n\tborder-top: \t\t1px solid rgba(255,255,255,0.8);\n\tborder-bottom: \t\t1px solid rgba(0,0,0,0.1);\n\ttransition: \t\tbackground .2s ease-in-out;\n\tcolor: \t\t\t\thsl(0, 0%, 40%) !important;\n\tbackground-color: \thsl(0, 0%, 75%);\n\tbox-shadow:\t\t \tinset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ \n\t\t\t\t\t\thsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */\n\t\t\t\t\t\trgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */\n}\n.your-button.up {\n\n/* text */\n\ttext-decoration: \t\tnone;\n\tfont: \t\t\t\t\t24px/1em 'Droid Sans', sans-serif;\n\tfont-weight: \t\t\tbold;\n\ttext-shadow: \t\t\trgba(255,255,255,.5) 0 1px 0;\n\tuser-select: \t\t\tnone;\n\tpadding: \t\t\t\t.5em .6em .4em .6em;\n\tmargin: \t\t\t\t.5em;\n\tdisplay: \t\t\t\tinline-block;\n\tposition: \t\t\t\trelative;\n\tborder-radius: \t8px;\n\ttransition: \t\tbackground .2s ease-in-out;\n\tcolor: \t\t\t\thsl(0, 0%, 40%) !important;\n\tbackground-color: \thsl(0, 0%, 75%);\n\tbox-shadow:\t\t \tinset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ \n\t\t\t\t\t\thsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */\n\t\t\t\t\t\trgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */\n\tborder-top: \t\t1px solid rgba(255,255,255,0.8);\n\tborder-bottom: \t\t1px solid rgba(0,0,0,0.1);\n}\n\n.your-button.dn {\n\n/* text */\n\ttext-decoration: \t\tnone;\n\tfont: \t\t\t\t\t24px/1em 'Droid Sans', sans-serif;\n\tfont-weight: \t\t\tbold;\n\ttext-shadow: \t\t\trgba(255,255,255,.5) 0 1px 0;\n\tuser-select: \t\t\tnone;\n\tpadding: \t\t\t\t.5em .6em .4em .6em;\n\tmargin: \t\t\t\t.5em;\n\tdisplay: \t\t\t\tinline-block;\n\tposition: \t\t\t\trelative;\n\tborder-radius: \t8px;\n\tborder-top: \t\t1px solid rgba(255,255,255,0.8);\n\tborder-bottom: \t\t1px solid rgba(0,0,0,0.1);\n\ttransition: \t\tbackground .2s ease-in-out;\n\tcolor: \t\t\t\thsl(0, 0%, 40%) !important;\n\tbackground-color: \thsl(0, 0%, 75%);\n\n\tbackground-image: \tgradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);\n\n\tbox-shadow: \t\tinset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ \n\t\t\t\t\t\t\trgba(0,0,0,0.4) 0 .1em 1px, /* border */\n\t\t\t\t\t\t\trgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */\n\n\ttransform: \t\t\ttranslateY(.2em);\n \n \n \n}\n\n.your-button.leftdn {\n\n/* text */\n width: 100%;\n box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ \n\t\t\t\t\t rgba(0,0,0,0.4) 0 .1em 1px, /* border */\n\t\t\t\t\t\trgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */\n\n\ttransform: \t\t\ttranslateY(.2em);\n border-radius: 25px 0px 0px 25px; /*top-left,top-right,bottom-right,bottom-left*/ \n padding-top:;\n padding-right:;\n padding-bottom:;\n padding-left:;\n}\n\n.your-button.centerdn {\n\n/* text */\n width: 100%;\n box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ \n\t\t\t\t\t rgba(0,0,0,0.4) 0 .1em 1px, /* border */\n\t\t\t\t\t\trgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */\n\n\ttransform: \t\t\ttranslateY(.2em);\n border-radius: 0px 0px 0px 0px; /*top-left,top-right,bottom-right,bottom-left*/ \n padding-top: ;\n padding-right: ;\n padding-bottom:;\n padding-left: ;\n}\n\n.your-button.rightdn {\n\n/* text */\n width: 100%;\n box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ \n\t\t\t\t\t rgba(0,0,0,0.4) 0 .1em 1px, /* border */\n\t\t\t\t\t\trgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */\n\n\ttransform: \t\t\ttranslateY(.2em);\n border-radius: 0px 25px 25px 0px; /*top-left,top-right,bottom-right,bottom-left*/ \n padding-top:;\n padding-right:;\n padding-bottom:;\n padding-left:;\n}\n\n.your-button.leftup {\n\n/* text */\n width: 100%;\n\tborder-radius: \t8px;\n\ttransition: \t\tbackground .2s ease-in-out;\n\tcolor: \t\t\t\thsl(0, 0%, 40%) !important;\n\tbackground-color: \thsl(0, 0%, 75%);\n\tbox-shadow:\t\t \tinset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ \n\t\t\t\t\t\thsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */\n\t\t\t\t\t\trgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */\n\tborder-top: \t\t1px solid rgba(255,255,255,0.8);\n\tborder-bottom: \t\t1px solid rgba(0,0,0,0.1);\n\n border-radius: 25px 0px 0px 25px; /*top-left,top-right,bottom-right,bottom-left*/ \n padding-top:;\n padding-right:;\n padding-bottom:;\n padding-left:;\n}\n\n.your-button.centerup {\n\n/* text */\n width: 100%;\n\tborder-radius: \t8px;\n\ttransition: \t\tbackground .2s ease-in-out;\n\tcolor: \t\t\t\thsl(0, 0%, 40%) !important;\n\tbackground-color: \thsl(0, 0%, 75%);\n\tbox-shadow:\t\t \tinset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ \n\t\t\t\t\t\thsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */\n\t\t\t\t\t\trgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */\n\tborder-top: \t\t1px solid rgba(255,255,255,0.8);\n\tborder-bottom: \t\t1px solid rgba(0,0,0,0.1);\n\n border-radius: 0px 0px 0px 0px; /*top-left,top-right,bottom-right,bottom-left*/ \n padding-top:;\n padding-right:;\n padding-bottom:;\n padding-left:;\n}\n\n.your-button.rightup {\n\n/* text */\n width: 100%;\n\tborder-radius: \t8px;\n\ttransition: \t\tbackground .2s ease-in-out;\n\tcolor: \t\t\t\thsl(0, 0%, 40%) !important;\n\tbackground-color: \thsl(0, 0%, 75%);\n\tbox-shadow:\t\t \tinset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ \n\t\t\t\t\t\thsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */\n\t\t\t\t\t\trgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */\n\tborder-top: \t\t1px solid rgba(255,255,255,0.8);\n\tborder-bottom: \t\t1px solid rgba(0,0,0,0.1);\n\n border-radius: 0px 25px 25px 0px; /*top-left,top-right,bottom-right,bottom-left*/ \n padding-top:;\n padding-right:;\n padding-bottom:;\n padding-left:;\n}\n\n/* -------------- button (tag) -------------- */\n\nbutton.your-button {\n\tborder-left: none;\n\tborder-right: none;\n}\nbutton.your-button:hover {\n\tcursor: pointer;\n}\n\n\n/* -------------- icon -------------- */\n.your-button:before {\n\tfont: \t\t\t1.2em/0 'Pictos', sans-serif;\n\tcontent: \t\tattr(data-icon); /* gets the icon value from the custom data attribute and puts it infront of the button label */\n\tmargin-right: \t0.4em;\n\t\n\t\n}\n/* icon only */\n.icon {\n\tfont-weight: normal;\n\tfont-style: normal;\n\ttext-indent: \t-999em;\n}\n.icon:before { \n\tmargin-right: \t0;\n\tdisplay: \t\tblock;\n\theight: \t\t0;\n\ttext-indent: \t0px;\t\n}\n\n/* -------------- States -------------- */\n\n.your-button:hover {\n\tbackground-color: \thsl(0, 0%, 83%);\n}\n\n.your-button:active {\n\tbackground-image: \tgradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);\n\n\tbox-shadow: \t\tinset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ \n\t\t\t\t\t\t\trgba(0,0,0,0.4) 0 .1em 1px, /* border */\n\t\t\t\t\t\t\trgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */\n\n\ttransform: \t\t\ttranslateY(.2em);\n}\n\n.your-button:focus {\n\toutline: none;\n\tcolor: rgba(250,255,255,0.9) !important;\n\ttext-shadow: rgba(0,0,0,0.2) 0 1px 2px;\n}\n\n.your-button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover {\n\topacity: \t\t\t.5;\n\tcursor: \t\t\tdefault;\n\tcolor: \t\t\t\trgba(0,0,0,0.2) !important;\n\ttext-shadow: \t\tnone !important;\n\tbackground-color: \trgba(0,0,0,0.05);\n\tbackground-image: \tnone;\n\tborder-top: \t\tnone;\n\n\tbox-shadow: \t\tinset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */ \n\t\t\t\t\t\t\trgba(0,0,0,0.3) 0 .1em 1px, /* border */\n\t\t\t\t\t\t\trgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */\n\n\ttransform: \t\t\ttranslateY(5px);\n}\n\n/* -------------- Fonts -------------- */\n\n.serif { \n\tfont-family: 'Lobster', serif;\n\tfont-weight: \t\t\tnormal;\n}\n\n\n/* -------------- Sizes -------------- */\n\n.xs { font-size: 16px; }\n.xl { font-size: 32px; }\n\n\n\n</style>\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":170,"y":160,"wires":[[]]},{"id":"ac15941f.639838","type":"ui_template","z":"c07f9a2b.fc9ad","group":"57af5fc2.f4ef78","name":"2","order":2,"width":2,"height":2,"format":"\n<div>\n<md-button class=\"md-button your-button up\"\n ng-click=\"send({payload: 'on',topic: 2})\"> \n 2\n</md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":170,"y":280,"wires":[["ad8e4835.4eea7"]]},{"id":"565f68e0.9a00e8","type":"ui_template","z":"c07f9a2b.fc9ad","group":"57af5fc2.f4ef78","name":"3","order":3,"width":2,"height":2,"format":"\n<div>\n<md-button class=\"md-button your-button up\"\n ng-click=\"send({payload: 'on',topic: 3})\"> \n 3\n</md-button>\n</div>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":170,"y":340,"wires":[["ad8e4835.4eea7"]]},{"id":"ad8e4835.4eea7","type":"debug","z":"c07f9a2b.fc9ad","name":"55555","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":330,"y":320,"wires":[]},{"id":"f3a0dc2b.76c3f","type":"ui_template","z":"c07f9a2b.fc9ad","group":"57af5fc2.f4ef78","name":"Yes","order":4,"width":2,"height":2,"format":"\n<div>\n<md-button class=\"md-button your-button leftup\"\n ng-click=\"send({payload: 'on',topic: Y})\"> \n Yes\n</md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":170,"y":420,"wires":[[]]},{"id":"d8bebeff.2ebc28","type":"ui_template","z":"c07f9a2b.fc9ad","group":"57af5fc2.f4ef78","name":"?","order":5,"width":2,"height":2,"format":"\n<div>\n<md-button class=\"md-button your-button centerdn\"\n ng-click=\"send({payload: 'on',topic: ?})\"> \n ?\n</md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":170,"y":480,"wires":[[]]},{"id":"7d345c46.4f5d4c","type":"ui_template","z":"c07f9a2b.fc9ad","group":"57af5fc2.f4ef78","name":"No","order":6,"width":2,"height":2,"format":"\n<div>\n<md-button class=\"md-button your-button rightup\"\n ng-click=\"send({payload: 'on',topic: No})\"> \n No\n</md-button>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":170,"y":540,"wires":[[]]},{"id":"1ffe8ec1.242351","type":"ui_template","z":"c07f9a2b.fc9ad","group":"57af5fc2.f4ef78","name":"8","order":7,"width":2,"height":2,"format":"<div>\n <md-button class= {{msg.class}} ng-click=\"send({payload: 'on',topic: 8})\">\n <i class=\"fa fa-grav fa-lg\" style = \"color: blue\"></i>\n </md-button>\n</div>\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":1230,"y":200,"wires":[["100216b6.cd1741"]]},{"id":"27adecdb.b5c084","type":"ui_template","z":"c07f9a2b.fc9ad","group":"57af5fc2.f4ef78","name":"888","order":9,"width":2,"height":2,"format":"<div>\n <md-button class= {{msg.class}} ng-click=\"send({payload: 'on',topic: 888})\">\n <i class=\"fa fa-anchor fa-lg\" style = \"color: yellow\"></i>\n </md-button>\n</div>\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":1230,"y":280,"wires":[["100216b6.cd1741"]]},{"id":"e3bfdb43.6ce3a","type":"ui_template","z":"c07f9a2b.fc9ad","group":"57af5fc2.f4ef78","name":"88","order":8,"width":2,"height":2,"format":"<div>\n <md-button class= {{msg.class}} ng-click=\"send({payload: 'on',topic: 88})\">\n <i class=\"fa fa-bath fa-lg\" style = \"color: darkred\"></i>\n </md-button>\n</div>\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":1230,"y":240,"wires":[["100216b6.cd1741"]]},{"id":"5bc82272.264764","type":"ui_template","z":"c07f9a2b.fc9ad","group":"57af5fc2.f4ef78","name":"9","order":10,"width":2,"height":2,"format":"<div>\n <md-button class= {{msg.class}} ng-click=\"send({payload: 'on',topic: 9})\">\n <i class=\"fa fa-fire fa-lg\" style = \"color: red\"></i>\n </md-button>\n</div>\n\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":850,"y":200,"wires":[["ad3595eb.29abc","b5ef2bc3.60a3a"]]},{"id":"d35fd66e.456718","type":"ui_template","z":"c07f9a2b.fc9ad","group":"57af5fc2.f4ef78","name":"99","order":11,"width":2,"height":2,"format":"<div>\n <md-button class= {{msg.class}} ng-click=\"send({payload: 'on',topic: 99})\">\n <i class=\"fa fa-cog fa-lg\" style = \"color: green\"></i>\n </md-button>\n</div>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":850,"y":240,"wires":[["ad3595eb.29abc"]]},{"id":"31df8c2e.df2f7c","type":"ui_template","z":"c07f9a2b.fc9ad","group":"57af5fc2.f4ef78","name":"999","order":12,"width":2,"height":2,"format":"<div>\n <md-button class= {{msg.class}} ng-click=\"send({payload: 'on',topic: 999})\">\n <i class=\"fa fa-snowflake-o fa-lg\" style = \"color: white\"></i>\n </md-button>\n</div>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":850,"y":280,"wires":[["ad3595eb.29abc"]]},{"id":"5a465cda.5c134c","type":"ui_template","z":"c07f9a2b.fc9ad","group":"57af5fc2.f4ef78","name":"them button","order":16,"width":0,"height":0,"format":"<style>\n/* -------------- THE button -------------- */\n.them-button {\n\n/* text */\n\tcolor: hsl(0, 0%, 40%) !important;\n width: 100%;\n height: 100%;\n\ttext-decoration: \t\tnone;\n\tfont: \t\t\t\t\t24px/1em 'Droid Sans', sans-serif;\n\tfont-weight: \t\t\tbold;\n\ttext-shadow: \t\t\trgba(255,255,255,.5) 0 1px 0;\n\tuser-select: \t\t\tnone;\n\tpadding: \t\t\t\t.5em .6em .4em .6em;\n\tmargin: \t\t\t\t.5em;\n\tdisplay: \t\t\t\tinline-block;\n\tposition: \t\t\t\trelative;\n\tborder-radius: \t8px;\n\tborder-top: \t\t1px solid rgba(255,255,255,0.8);\n\tborder-bottom: \t\t1px solid rgba(0,0,0,0.1);\n\ttransition: \t\tbackground .2s ease-in-out;\n\tbackground-color: \thsl(0, 0%, 75%);\n\tbox-shadow:\t\t \tinset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ \n\t\t\t\t\t\thsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */\n\t\t\t\t\t\trgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */\n}\n.them-button.up {\n\n/* text */\n\n}\n\n.them-button.dn {\n\n/* text */\n\tcolor: \t\t\t\thsl(0, 0%, 40%) !important;\n\tbackground-image: \tgradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) ));\n\tbox-shadow: \t\tinset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ \n\t\t\t\t\t\t\trgba(0,0,0,0.4) 0 .1em 1px, /* border */\n\t\t\t\t\t\t\trgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */\n\ttransform: \t\t\ttranslateY(.2em);\n}\n\n.them-button.leftdn {\n\n/* text */\n background-image: url(\"iconimg.png\");\n \n color: rgba(250,255,255,0.9) !important;\n text-shadow: rgba(0,0,0,0.2) 0 1px 2px; \n\tbox-shadow: \t\tinset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ \n\t\t\t\t\t\t\trgba(0,0,0,0.4) 0 .1em 1px, /* border */\n\t\t\t\t\t\t\trgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */\n\n\ttransform: translateY(.2em);\n border-radius: 25px 0px 0px 25px; /*top-left,top-right,bottom-right,bottom-left*/ \n padding-top:;\n padding-right:;\n padding-bottom:;\n padding-left:;\n}\n\n.them-button.centerdn {\n\n/* text */\n color: rgba(250,255,255,0.9) !important;\n text-shadow: rgba(0,0,0,0.2) 0 1px 2px; \n\tbox-shadow: \t\tinset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ \n\t\t\t\t\t\t\trgba(0,0,0,0.4) 0 .1em 1px, /* border */\n\t\t\t\t\t\t\trgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */\n\n\ttransform: \t\t\ttranslateY(.2em); border-radius: 0px 0px 0px 0px; /*top-left,top-right,bottom-right,bottom-left*/ \n padding-top: ;\n padding-right: ;\n padding-bottom:;\n padding-left: ;\n}\n\n.them-button.rightdn {\n\n/* text */\n color: rgba(250,255,255,0.9) !important;\n text-shadow: rgba(0,0,0,0.2) 0 1px 2px; \n\tbox-shadow: \t\tinset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ \n\t\t\t\t\t\t\trgba(0,0,0,0.4) 0 .1em 1px, /* border */\n\t\t\t\t\t\t\trgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */\n\n\ttransform: \t\t\ttranslateY(.2em);\n border-radius: 0px 25px 25px 0px; /*top-left,top-right,bottom-right,bottom-left*/ \n padding-top:;\n padding-right:;\n padding-bottom:;\n padding-left:;\n}\n\n.them-button.leftup {\n\n/* text */\n rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ \n\t\t\t\t\t\thsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */\n\t\t\t\t\t\trgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */\n border-radius: 25px 0px 0px 25px; /*top-left,top-right,bottom-right,bottom-left*/ \n padding-top:;\n padding-right:;\n padding-bottom:;\n padding-left:;\n}\n\n.them-button.centerup {\n\n/* text */\n rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ \n\t\t\t\t\t\thsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */\n\t\t\t\t\t\trgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */\n border-radius: 0px 0px 0px 0px; /*top-left,top-right,bottom-right,bottom-left*/ \n padding-top:;\n padding-right:;\n padding-bottom:;\n padding-left:;\n}\n\n.them-button.rightup {\n\n/* text */\n\trgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ \n\t\t\t\t\t\thsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */\n\t\t\t\t\t\trgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */\n border-radius: 0px 25px 25px 0px; /*top-left,top-right,bottom-right,bottom-left*/ \n padding-top:;\n padding-right:;\n padding-bottom:;\n padding-left:;\n}\n\n/* -------------- button (tag) -------------- */\n\nbutton.them-button {\n\tborder-left: none;\n\tborder-right: none;\n}\nbutton.them-button:hover {\n\tcursor: pointer;\n}\n\n\n/* -------------- icon -------------- */\n.them-button:before {\n\tfont: \t\t\t1.2em/0 'Pictos', sans-serif;\n\tcontent: \t\tattr(data-icon); /* gets the icon value from the custom data attribute and puts it infront of the button label */\n\tmargin-right: \t0.4em;\n\t\n\t\n}\n/* icon only */\n.icon {\n\tfont-weight: normal;\n\tfont-style: normal;\n\ttext-indent: \t-999em;\n}\n.icon:before { \n\tmargin-right: \t0;\n\tdisplay: \t\tblock;\n\theight: \t\t0;\n\ttext-indent: \t0px;\t\n}\n\n/* -------------- States -------------- */\n\n.them-button:hover {\n\tbackground-color: \thsl(0, 0%, 83%);\n}\n\n.them-button:active {\n\tbackground-image: \tgradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) ));\n\n\tbox-shadow: \t\tinset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ \n\t\t\t\t\t\t\trgba(0,0,0,0.4) 0 .1em 1px, /* border */\n\t\t\t\t\t\t\trgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */\n\n\ttransform: \t\t\ttranslateY(.2em);\n}\n\n.them-button:focus {\n\toutline: none;\n/*\tcolor: rgba(250,255,255,0.9) !important; */\n/*\ttext-shadow: rgba(0,0,0,0.2) 0 1px 2px; */\n}\n\n.them-button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover {\n\topacity: \t\t\t.5;\n\tcursor: \t\t\tdefault;\n\tcolor: \t\t\t\trgba(0,0,0,0.2) !important;\n\ttext-shadow: \t\tnone !important;\n\tbackground-color: \trgba(0,0,0,0.05);\n\tbackground-image: \tnone;\n\tborder-top: \t\tnone;\n\n\tbox-shadow: \t\tinset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */ \n\t\t\t\t\t\t\trgba(0,0,0,0.3) 0 .1em 1px, /* border */\n\t\t\t\t\t\t\trgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */\n\n\ttransform: \t\t\ttranslateY(5px);\n}\n\n/* -------------- Fonts -------------- */\n\n.serif { \n\tfont-family: 'Lobster', serif;\n\tfont-weight: \t\t\tnormal;\n}\n\n\n/* -------------- Sizes -------------- */\n\n.xs { font-size: 16px; }\n.xl { font-size: 32px; }\n\n\n\n</style>\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":630,"y":240,"wires":[[]]},{"id":"ad3595eb.29abc","type":"function","z":"c07f9a2b.fc9ad","name":"logic","func":"\nif (msg.topic == 9){\n msg1 = {\n payload: 2,\n label: 'Yes',\n class: 'md-button them-button leftdn',\n }\n msg2 = {\n payload: 2,\n label: '?',\n class: 'md-button them-button centerup',\n }\n msg3 = {\n payload: 2,\n label: 'No',\n class: 'md-button them-button rightup',\n }\n return [msg1,msg2,msg3];\n}\n\nif (msg.topic == 99){\n msg1 = {\n payload: 2,\n label: 'Yes',\n class: 'md-button them-button leftup',\n }\n msg2 = {\n payload: 2,\n label: '?',\n class: 'md-button them-button centerdn',\n }\n msg3 = {\n payload: 2,\n label: 'No',\n class: 'md-button them-button rightup',\n }\n return [msg1,msg2,msg3];\n}\n\nif (msg.topic == 999){\n msg1 = {\n payload: 2,\n label: 'Yes',\n class: 'md-button them-button leftup',\n }\n msg2 = {\n payload: 2,\n label: '?',\n class: 'md-button them-button centerup',\n }\n msg3 = {\n payload: 2,\n label: 'No',\n class: 'md-button them-button rightdn',\n }\n return [msg1,msg2,msg3];\n}\n\n\n msg1 = {\n payload: 2,\n label: 'Yes',\n class: 'md-button them-button leftup',\n }\n msg2 = {\n payload: 2,\n label: '?',\n class: 'md-button them-button centerup',\n }\n msg3 = {\n payload: 2,\n label: 'No',\n class: 'md-button them-button rightup',\n }\n\nreturn [msg1,msg2,msg3];\n","outputs":3,"noerr":0,"x":850,"y":420,"wires":[["5bc82272.264764"],["d35fd66e.456718"],["31df8c2e.df2f7c"]]},{"id":"ca516f4.f574a1","type":"inject","z":"c07f9a2b.fc9ad","name":"pwr up","topic":"pwr","payload":"true","payloadType":"bool","repeat":"","crontab":"","once":true,"onceDelay":"1","x":640,"y":420,"wires":[["ad3595eb.29abc"]]},{"id":"b5ef2bc3.60a3a","type":"debug","z":"c07f9a2b.fc9ad","name":"3","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":940,"y":140,"wires":[]},{"id":"100216b6.cd1741","type":"function","z":"c07f9a2b.fc9ad","name":"logic 2","func":"\nif (msg.topic == 8){\n msg1 = {\n payload: 2,\n label: 'Yes',\n class: 'md-button them-button leftdn',\n }\n msg2 = {\n payload: 2,\n label: '?',\n class: 'md-button them-button centerup',\n }\n msg3 = {\n payload: 2,\n label: 'No',\n class: 'md-button them-button rightup',\n }\n return [msg1,msg2,msg3];\n}\n\nif (msg.topic == 88){\n msg1 = {\n payload: 2,\n label: 'Yes',\n class: 'md-button them-button leftup',\n }\n msg2 = {\n payload: 2,\n label: '?',\n class: 'md-button them-button centerdn',\n }\n msg3 = {\n payload: 2,\n label: 'No',\n class: 'md-button them-button rightup',\n }\n return [msg1,msg2,msg3];\n}\n\nif (msg.topic == 888){\n msg1 = {\n payload: 2,\n label: 'Yes',\n class: 'md-button them-button leftup',\n }\n msg2 = {\n payload: 2,\n label: '?',\n class: 'md-button them-button centerup',\n }\n msg3 = {\n payload: 2,\n label: 'No',\n class: 'md-button them-button rightdn',\n }\n return [msg1,msg2,msg3];\n}\n\n\n msg1 = {\n payload: 2,\n label: 'Yes',\n class: 'md-button them-button leftup',\n }\n msg2 = {\n payload: 2,\n label: '?',\n class: 'md-button them-button centerup',\n }\n msg3 = {\n payload: 2,\n label: 'No',\n class: 'md-button them-button rightup',\n }\n\nreturn [msg1,msg2,msg3];\n","outputs":3,"noerr":0,"x":1240,"y":400,"wires":[["1ffe8ec1.242351"],["e3bfdb43.6ce3a"],["27adecdb.b5c084"]]},{"id":"57af5fc2.f4ef78","type":"ui_group","z":"","name":"buttons","tab":"13224da4.670f22","order":1,"disp":false,"width":6,"collapse":false},{"id":"13224da4.670f22","type":"ui_tab","z":"","name":"buttons","icon":"fa-superpowers","disabled":false,"hidden":false}]
