Add css to buttons

mul-button.js

@@ -2,22 +2,40 @@ import {
   html,
   component,
   useState,
-} from "./deps.js";
+  css,
+  useCSS,
+} from "https://deno.land/x/mulink@0.0.16/deps.js";
 
-function MulButton() {
+function MulButton({ disabled }) {
   const [name, setName] = useState("Add to Favorites");
-
+  useCSS(this, [mulButtonCss]);
   return html`
-    <button type="button" @click=${(ev) => setName("Added, thanks")}>
+    <button .disabled=${disabled} type="button" @click=${(ev) => setName("Added, thanks")}>
       ${name}
     </button>
-    <style>
-      button {
-        background: yellow;
-      }
-    </style>
   `;
 }
 
+MulButton.observedAttributes = ['disabled']
+
+
+const mulDisabledButton = css`
+button:disabled {
+      background: grey;
+      cursor: default;
+  }
+`
+
+const mulDefaultButton = css`
+button {
+    background: orange;
+    cursor: pointer;
+}
+`
+
+const mulButtonCss = css`
+  ${mulDefaultButton}
+  ${mulDisabledButton}
+`
 
 customElements.define("mul-button", component(MulButton));