From 1f4f4210b3505c7fafc19da18dc2fd5f1b83c34e Mon Sep 17 00:00:00 2001
From: Ryan Trimble <mrtrimble2@gmail.com>
Date: Tue, 12 May 2026 21:59:20 -0400
Subject: [PATCH] adds hover state, more examples

---
 src/App.vue                 | 41 +++++++++++++++++++++++++++++--------
 src/components/MyButton.vue |  7 ++++++-
 2 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e3fc21c..e6418e1 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/MyButton.vue b/src/components/MyButton.vue
index 30e1d03..05e8491 100644
--- a/src/components/MyButton.vue
+++ b/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;
   }