Add super-basic sky widgets.

sky/framework/sky-button/sky-button.sky

Index: sky/framework/sky-button/sky-button.sky
diff --git a/sky/framework/sky-button/sky-button.sky b/sky/framework/sky-button/sky-button.sky
new file mode 100644
index 0000000000000000000000000000000000000000..2c747b4c8a40b10e87a1212652d41c8ea6d15701
--- /dev/null
+++ b/sky/framework/sky-button/sky-button.sky
@@ -0,0 +1,49 @@
+<!--
+// Copyright 2014 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+-->
+<import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
+
+<sky-element name="sky-button">
+<template>
+  <style>
+    :host {
+      display: inline-flex;
+      border-radius: 4px;
+      justify-content: center;
+      align-items: center;
+      border: 1px solid blue;
+      -webkit-user-select: none;
+      margin: 5px;
+    }
+    :host([highlight=true]) {
+      background-color: orange;
+    }
+  </style>
+  <content></content>
+</template>
+<script>
+module.exports = class extends SkyElement {
+  created() {
+    this.tabIndex = 0; // Make focusable.
+    this.setHighlight(false);
+
+    this.addEventListener("mousedown", function() {
+      this.setHighlight(true);
+    });
+    this.addEventListener("mouseup", function() {
+      this.setHighlight(false);
+    });
+    this.addEventListener("mouseout", function() {
+      this.setHighlight(false);
+    });
+  }
+  setHighlight(newValue) {
+    // Set both a property and an attribute to keep both parents happy.
+    this.setAttribute('highlight', newValue);
+    this.highlight = newValue;
+  }
+}.register();
+</script>
+</sky-element>