diff --git a/scripts/scripts.js b/scripts/scripts.js
index 96a3c336..51cb013d 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -805,6 +805,8 @@ function decorateButtons(main) {
       a.className = 'button';
       const strong = a.closest('strong');
       const em = a.closest('em');
+      const hasSup = a.querySelector('sup') !== null;
+      const hasSub = a.querySelector('sub') !== null;
       if (strong && em) {
         a.classList.add('accent');
         const outer = strong.contains(em) ? strong : em;
@@ -815,6 +817,14 @@ function decorateButtons(main) {
       } else if (em) {
         a.classList.add('link');
         em.replaceWith(a);
+      } else if (hasSup) {
+        // superscript inside link, white outline button
+        a.classList.add('outline-white');
+        a.querySelector('sup').replaceWith(...a.querySelector('sup').childNodes);
+      } else if (hasSub) {
+        // subscript inside link, charcoal outline button
+        a.classList.add('outline-charcoal');
+        a.querySelector('sub').replaceWith(...a.querySelector('sub').childNodes);
       }
       p.className = 'button-wrapper';
     }
diff --git a/styles/styles.css b/styles/styles.css
index e30c3abb..7327024a 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -610,6 +610,37 @@ button.button.close:focus {
   background-color: var(--color-shadow);
 }
 
+a.button.outline-white,
+button.button.outline-white {
+  border-color: var(--color-white);
+  background-color: transparent;
+  color: var(--color-white);
+}
+
+a.button.outline-white:hover,
+button.button.outline-white:hover,
+button.button.outline-white:focus {
+  border-color: var(--color-white);
+  background-color: rgb(255 255 255 / 15%);
+  color: var(--color-white);
+}
+
+a.button.outline-charcoal,
+button.button.outline-charcoal {
+  border-color: var(--color-charcoal);
+  background-color: transparent;
+  color: var(--color-charcoal);
+}
+
+a.button.outline-charcoal:hover,
+button.button.outline-charcoal:hover,
+button.button.outline-charcoal:focus {
+  border-color: var(--color-charcoal);
+  background-color: rgb(0 0 0 / 8%);
+  color: var(--color-charcoal);
+}
+
+
 .default-content-wrapper .button.link {
   text-align: left;
   line-height: var(--line-height-xl);