🐞 fix: Update button styles for improved accessibility and consistency

styles/blocks/buttons.css

@@ -18,36 +18,65 @@
      * --button-outline-color (fallback is --button-border-color)
      */
 
-    --button-bg:                 var(--background-image-button-gradient);
+    --button-primary-bg:                  var(--background-image-button-gradient);
-    --button-color:              var(--color-white);
+    --button-primary-color:               var(--color-white);
-    --button-hover-bg:           var(--color-info);
+    --button-primary-border-color:        var(--color-secondary);
-    --button-hover-border-color: var(--button-bg);
+    --button-primary-hover-bg:            var(--color-secondary);
-    --button-hover-color:        var(--color-white);
+    --button-primary-hover-border-color:  var(--color-secondary);
-    --button-border-width:       2px;
+    --button-primary-hover-color:         var(--color-white);
+    --button-primary-active-bg:           color-mix(in oklch, var(--color-secondary) 84%, var(--color-danger));
+    --button-primary-active-border-color: color-mix(in oklch, var(--color-secondary) 84%, var(--color-danger));
+    --button-primary-outline-hover-color: var(--color-white);
+    --button-primary-shadow-color:        color-mix(in oklch, var(--color-secondary) 72%, var(--color-danger));
+    --button-primary-hover-shadow:        0.25rem 0.25rem 0 var(--button-primary-shadow-color);
+    --button-primary-active-shadow:       none;
+    --button-primary-radius:              1.25rem 0.25rem 1.25rem 0.25rem;
+
+    --button-bg:                  var(--button-primary-bg);
+    --button-color:               var(--button-primary-color);
+    --button-hover-bg:            var(--button-primary-hover-bg);
+    --button-hover-border-color:  var(--button-primary-hover-border-color);
+    --button-hover-color:         var(--button-primary-hover-color);
+    --button-active-bg:           var(--button-primary-active-bg);
+    --button-active-border-color: var(--button-primary-active-border-color);
+    --button-shadow:              none;
+    --button-hover-shadow:        var(--button-primary-hover-shadow);
+    --button-active-shadow:       var(--button-primary-active-shadow);
+    --button-border-width:        3px;
     --button-border-style:        solid;
-    --button-border-color:       var(--color-secondary);
+    --button-border-color:        var(--button-primary-border-color);
-    --button-radius:             1.25rem 0.25rem;
+    --button-radius:              var(--button-primary-radius);
+    --button-padding-block:       0.625rem;
+    --button-padding-inline:      2rem;
+    --button-font-size:           var(--text-18px);
+    --button-font-weight:         700;
+    --button-letter-spacing:      0;
 }
 
 .btn, .button, .acf-block-preview .button {
-    @apply px-8 py-2 min-w-0;
+    @apply min-w-0;
 
     background: var(--button-bg);
-    color:      var(--button-color);
+    box-shadow: var(--button-shadow);
     cursor:     pointer;
     display:    inline-block;
-    transition: background 200ms, border-color 200ms, color 200ms;
+    transition: background 200ms, border-color 200ms, box-shadow 200ms, color 200ms, transform 200ms;
+
+    color:      var(--button-color);
+
+    &.dark { color: white; }
 
     border-width:  var(--button-border-width);
     border-style:  var(--button-border-style);
     border-color:  var(--button-border-color);
     border-radius: var(--button-radius);
 
-    padding: .5rem 2rem;
+    padding: var(--button-padding-block) var(--button-padding-inline);
 
     text-decoration: none;
     font-weight:     var(--button-font-weight, 600);
     font-size:       var(--button-font-size, 1rem);
+    letter-spacing:  var(--button-letter-spacing);
     line-height:     1.1;
 
     &[data-button-variant="outline"] {
@@ -59,7 +88,7 @@
 
         --button-color:              var(--button-border-color);
         --button-hover-border-color: var(--button-border-color);
-        --button-hover-color:        var(--color-white);
+        --button-hover-color:        var(--button-primary-outline-hover-color);
     }
 }
 
@@ -67,6 +96,7 @@
 .btn:hover, .button:hover, .acf-block-preview .button:hover {
     background:   var(--button-hover-bg);
     border-color: var(--button-hover-border-color);
+    box-shadow:   var(--button-hover-shadow);
     color:        var(--button-hover-color);
 }
 
@@ -77,7 +107,12 @@
     outline-offset: calc(var(--button-border-width) * 2);
 }
 
-.btn:active, .button:active { transform: scale(99%); }
+.btn:active, .button:active {
+    background:   var(--button-active-bg);
+    border-color: var(--button-active-border-color);
+    box-shadow:   var(--button-active-shadow);
+    transform:    translate(0.125rem, 0.125rem);
+}
 
 /**
  * Variants
@@ -115,6 +150,8 @@ x-button:has(.button[data-button-width="full"]) { @apply w-full; }
     --button-hover-bg:            var(--color-dark);
     --button-hover-border-color:  var(--color-dark);
     --button-hover-color:         var(--color-white);
+    --button-active-bg:           var(--color-dark);
+    --button-active-border-color: var(--color-dark);
 }
 
 .btn[data-button-color="light"], .button[data-button-color="light"] {
@@ -124,6 +161,8 @@ x-button:has(.button[data-button-width="full"]) { @apply w-full; }
     --button-hover-bg:            var(--color-dark);
     --button-hover-border-color:  var(--color-dark);
     --button-hover-color:         var(--color-white);
+    --button-active-bg:           var(--color-dark);
+    --button-active-border-color: var(--color-dark);
 }
 
 .btn[data-button-color="white"], .button[data-button-color="white"] {
@@ -133,6 +172,8 @@ x-button:has(.button[data-button-width="full"]) { @apply w-full; }
     --button-hover-bg:            var(--color-secondary-200);
     --button-hover-border-color:  var(--color-secondary-200);
     --button-hover-color:         var(--color-black);
+    --button-active-bg:           var(--color-secondary-200);
+    --button-active-border-color: var(--color-secondary-200);
 }
 
 .btn[data-button-color="black"], .button[data-button-color="black"] {
@@ -142,6 +183,8 @@ x-button:has(.button[data-button-width="full"]) { @apply w-full; }
     --button-hover-bg:            var(--color-secondary);
     --button-hover-border-color:  var(--color-secondary);
     --button-hover-color:         var(--color-dark);
+    --button-active-bg:           var(--color-secondary);
+    --button-active-border-color: var(--color-secondary);
 }
 
 /* Back To Top Button */

views/blocks/contact-block/contact-block.php

@@ -41,7 +41,7 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
 		<?php endif; ?>
 
 		<?php if ( $button ) : ?>
-            <a class="contact-block__cta button text-white!" href="<?php echo esc_url( $button['url'] ?? '#' ); ?>" title="<?php echo esc_attr( $button['title'] ?? '' ); ?>" aria-label="<?php echo esc_attr( $button['title'] ?? '' ); ?>" data-button-color="secondary" data-button-variant="outline"><?php echo esc_html( $button['title'] ); ?></a>
+            <a class="contact-block__cta button dark" href="<?php echo esc_url( $button['url'] ?? '#' ); ?>" title="<?php echo esc_attr( $button['title'] ?? '' ); ?>" aria-label="<?php echo esc_attr( $button['title'] ?? '' ); ?>" data-button-color="secondary" data-button-variant="outline"><?php echo esc_html( $button['title'] ); ?></a>
 		<?php endif; ?>
 	</div>
 </section>

views/blocks/homepage-hero/homepage-hero.php

@@ -61,7 +61,7 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
                         }
                         ?>
                         <x-button
-                            btnclasses="button text-center min-w-32"
+                            btnclasses="button text-center min-w-32 dark"
                             element="a"
                             url="<?php echo esc_url( $ctaURL ); ?>"
                             target="<?php echo esc_attr( $ctaTarget ); ?>"