diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css
index 34e62e41..5ca29714 100644
--- a/blocks/hero/hero.css
+++ b/blocks/hero/hero.css
@@ -298,3 +298,34 @@
     max-width: 400px;
   }
 }
+
+
+.hero a.button {
+  border-color: currentcolor;
+  background-color: transparent;
+}
+
+.hero a.button:hover,
+.hero a.button:focus {
+  background-color: color-mix(in srgb, currentcolor 15%, transparent);
+}
+
+.hero:is(.image-dark, .dark, .image-darkest, .darkest) a.button,
+.hero:is(.image-dark, .dark, .image-darkest, .darkest) a.button:hover {
+  border-color: var(--color-white);
+  color: var(--color-white);
+}
+
+.hero a.button.emphasis,
+.hero a.button.emphasis:hover {
+  border-color: var(--color-charcoal);
+  background-color: var(--color-charcoal);
+  color: var(--color-white);  
+}
+
+.hero:is(.image-dark, .dark, .image-darkest, .darkest) a.button.emphasis,
+.hero:is(.image-dark, .dark, .image-darkest, .darkest) a.button.emphasis:hover {
+  border-color: var(--color-white);
+  background-color: var(--color-white);
+  color: var(--color-charcoal);
+}
diff --git a/blocks/hero/hero.js b/blocks/hero/hero.js
index 74ffede8..172dcdd1 100644
--- a/blocks/hero/hero.js
+++ b/blocks/hero/hero.js
@@ -47,6 +47,7 @@ function detectLayout(block) {
 
 /** @param {Element} block */
 export default function decorate(block) {
+  block.querySelectorAll('a.button').forEach((button) => button.classList.toggle('emphasis'));
   detectLayout(block);
   buildVideo(block);