diff --git a/styles/blocks/buttons.css b/styles/blocks/buttons.css
index 9b9f254..535674b 100644
--- a/styles/blocks/buttons.css
+++ b/styles/blocks/buttons.css
@@ -18,36 +18,65 @@
* --button-outline-color (fallback is --button-border-color)
*/
- --button-bg: var(--background-image-button-gradient);
- --button-color: var(--color-white);
- --button-hover-bg: var(--color-info);
- --button-hover-border-color: var(--button-bg);
- --button-hover-color: var(--color-white);
- --button-border-width: 2px;
- --button-border-style: solid;
- --button-border-color: var(--color-secondary);
- --button-radius: 1.25rem 0.25rem;
+ --button-primary-bg: var(--background-image-button-gradient);
+ --button-primary-color: var(--color-white);
+ --button-primary-border-color: var(--color-secondary);
+ --button-primary-hover-bg: var(--color-secondary);
+ --button-primary-hover-border-color: var(--color-secondary);
+ --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(--button-primary-border-color);
+ --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
@@ -108,40 +143,48 @@ x-button:has(.button[data-button-width="full"]) { @apply w-full; }
* like the ones below and changing the color values.
*/
.btn[data-button-color="secondary"], .button[data-button-color="secondary"] {
- --button-bg: var(--color-secondary);
- --button-color: var(--color-white);
- --button-border-color: var(--color-secondary);
- --button-outline-color: oklch(0.48 0.0136 252.2);
- --button-hover-bg: var(--color-dark);
- --button-hover-border-color: var(--color-dark);
- --button-hover-color: var(--color-white);
+ --button-bg: var(--color-secondary);
+ --button-color: var(--color-white);
+ --button-border-color: var(--color-secondary);
+ --button-outline-color: oklch(0.48 0.0136 252.2);
+ --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"] {
- --button-bg: var(--color-white);
- --button-color: var(--color-dark);
- --button-border-color: var(--color-white);
- --button-hover-bg: var(--color-dark);
- --button-hover-border-color: var(--color-dark);
- --button-hover-color: var(--color-white);
+ --button-bg: var(--color-white);
+ --button-color: var(--color-dark);
+ --button-border-color: var(--color-white);
+ --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"] {
- --button-bg: var(--color-white);
- --button-color: var(--color-black);
- --button-border-color: var(--color-white);
- --button-hover-bg: var(--color-secondary-200);
- --button-hover-border-color: var(--color-secondary-200);
- --button-hover-color: var(--color-black);
+ --button-bg: var(--color-white);
+ --button-color: var(--color-black);
+ --button-border-color: var(--color-white);
+ --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"] {
- --button-bg: var(--color-black);
- --button-color: var(--color-white);
- --button-border-color: var(--color-black);
- --button-hover-bg: var(--color-secondary);
- --button-hover-border-color: var(--color-secondary);
- --button-hover-color: var(--color-dark);
+ --button-bg: var(--color-black);
+ --button-color: var(--color-white);
+ --button-border-color: var(--color-black);
+ --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 */
diff --git a/views/blocks/contact-block/contact-block.php b/views/blocks/contact-block/contact-block.php
index 0247144..7e2abdf 100644
--- a/views/blocks/contact-block/contact-block.php
+++ b/views/blocks/contact-block/contact-block.php
@@ -41,7 +41,7 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
-
+
diff --git a/views/blocks/homepage-hero/homepage-hero.php b/views/blocks/homepage-hero/homepage-hero.php
index e2fd74e..ce5309c 100644
--- a/views/blocks/homepage-hero/homepage-hero.php
+++ b/views/blocks/homepage-hero/homepage-hero.php
@@ -61,7 +61,7 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
}
?>