Tinydash Widgets

Here is a new css button class.

.td_button {
  margin-top: 10px;
  margin-left: auto;
  margin-right: 10px; /* centered */
  display: inline-block;
  padding: 6px 16px;
  font-size: 24px;
  font-weight: bolder;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: [#fff](https://forum.espruino.com/search/?q=%23fff);
  background-color: [#4CAF50](https://forum.espruino.com/search/?q=%234CAF50);
  border: none;
  border-radius: 15px;
  box-shadow: 0 4px #888;
  -webkit-transition-duration: 0.2s; /* Safari */
  transition-duration: 0.2s;
  overflow: hidden;
  cursor: pointer;
}
.td_button:active {
  background-color: [#4CAF50](https://forum.espruino.com/search/?q=%234CAF50);
  box-shadow: 0 0px #888;
  transform: translateY(4px);
}
.td_button:hover {
  background-color: [#06B](https://forum.espruino.com/search/?q=%2306B);
}

   /* {label, glyph, value, toggle}*/
    TD.button = function(opts) {
        var pressed = opts.value ? 1 : 0;
        opts.glyph = opts.glyph || "💡";
        var el = setup("button", opts, toElement(`<div align="right" class="td td_btn" pressed="${pressed}"><span>${opts.label}</span><div class="td_button">${opts.glyph}</div></div>`));
        el.getElementsByClassName("td_button")[0].onclick = function() {
            togglePressed(el);
        };
        el.setValue = function(v) {
            el.pressed = v ? 1 : 0;
            el.setAttribute("pressed", el.pressed);
        };
        return el;
    };

1 Attachment