adds hover state, more examples

src/App.vue

@@ -1,37 +1,60 @@
 <template>
   <div class="button-group">
-    <MyButton variant="primary"
-              size="sm">
+    <MyButton size="sm">
       Primary Small
     </MyButton>
     <MyButton>
       Primary Medium
     </MyButton>
+    <MyButton size="lg">
+      Primary Large
+    </MyButton>
+  </div>
+
+  <div class="button-group">
+    <MyButton variant="secondary"
+              size="sm">
+      Secondary Small
+    </MyButton>
     <MyButton variant="secondary">
       Secondary Medium
     </MyButton>
+    <MyButton variant="secondary"
+              size="lg">
+      Secondary Large
+    </MyButton>
+  </div>
+
+  <div class="button-group">
+    <MyButton variant="danger"
+              size="sm">
+      Danger Small
+    </MyButton>
+    <MyButton variant="danger">
+      Danger Medium
+    </MyButton>
     <MyButton variant="danger"
               size="lg">
       Danger Large
     </MyButton>
+  </div>
 
+  <div class="button-group">
     <MyButton variant="danger"
               size="lg"
               :loading="true">
       Danger Large
     </MyButton>
-
-    <MyButton variant="danger"
-              size="lg"
+    <MyButton size="lg"
               :disabled="true">
-      Danger Large
+      Disabled Large
     </MyButton>
   </div>
+  
   <div class="button-group">
-    <MyButton variant="danger"
-              size="lg"
+    <MyButton size="lg"
               :fullwidth="true">
-      Danger Fullwidth
+      Primary Fullwidth
     </MyButton>
   </div>
 </template>

src/components/MyButton.vue

@@ -50,7 +50,7 @@ const classes = computed(() => [
 
 <style scoped>
 .btn {
-  --background-color: navy;
+  --background-color: cornflowerblue;
   --border-radius: 0.25rem;
   --cursor-type: pointer;
   --text-color: white;
@@ -66,12 +66,17 @@ const classes = computed(() => [
   font-size: var(--text-size);
   padding-block: var(--vertical-padding);
   padding-inline: var(--horizontal-padding);
+  transition: background-color 0.2s ease;
 
   &:focus-visible {
     outline: 2px dashed CanvasText;
     outline-offset: 2px;
   }
 
+  &:hover:not([aria-busy="true"], [disabled]) {
+    background-color: color-mix(in srgb, var(--background-color), #000 20%);
+  }
+
   &.btn--secondary {
     --background-color: green;
   }