gistfile1.html

<element name="app-my-button">
  <template>
    <link rel="stylesheet" href="{{ASSET_HOST}}/assets/style/app-button.css"></link>
    <div>
      <button class="button">Woot</button>
    </div>
  </template>
  <friends>app-fireworks,app-counter</friends>
  <thumbnail>
    <img src="http://localhost:5000/assets/images/thumbnails/app-button.png" />
  </thumbnail>
  <description>
    Broadcasts a "click" when clicked.
  </description>
  <script type="text/ceci">
    Ceci(this, {
      init: function (params) {
        var button = this.querySelector('.button');
        var t = this;
        button.onclick = function (e) {
          t.broadcast('click');
        };
        button.onmousedown = function (e) {
          button.style.backgroundColor = t.getAttribute("buttonActiveColor");
          t.broadcast('mouseDown');
        };
        button.onmouseup = function (e) {
          button.style.backgroundColor = t.getAttribute("buttonColor");
          t.broadcast('mouseUp');
        };
        button.onmouseleave = function (e) {
          button.style.backgroundColor = t.getAttribute("buttonColor");
        };
        this.setAttribute("buttonLabel", this.getAttribute("buttonLabel") || 'Click Me');
        this.setAttribute("buttonColor", this.getAttribute("buttonColor") || '#4DB227');
        this.setAttribute("buttonActiveColor", this.getAttribute("buttonActiveColor") || '#3d911f');
        this.setAttribute("textColor", this.getAttribute("textColor") || '#FFFFFF');
      },
      editable: {
        buttonLabel: {
          type: "text",
          description: "A text for your label to show up in your app",
          postset: function(v) {
            this.setLabel(v);
          }
        },
        textColor: {
          type: "text",
          description: "The color of the button label",
          postset: function(v) {
            this.setTextColor(v);
          }
        },
        buttonColor: {
          type: "text",
          description: "The color of your button",
          postset: function(v) {
            this.setButtonColor(v);
          }
        },
        buttonActiveColor: {
          type: "text",
          description: "The color of your button"
        }
      },
      setLabel: function (val) {
        this.querySelector('button').innerHTML = val;
      },
      setButtonColor: function (val) {
        this.querySelector('button').style.backgroundColor = val;
      },
      setTextColor: function (val) {
        this.querySelector('button').style.color = val;
      },
      broadcasts: ['click', 'mouseDown', 'mouseUp'],
      defaultBroadcasts: ['click']
    });
  </script>
</element>