diff --git a/packages/fxa-content-server/app/scripts/templates/settings/two_step_authentication.mustache b/packages/fxa-content-server/app/scripts/templates/settings/two_step_authentication.mustache
index bdd52547699..9df06e4af2c 100644
--- a/packages/fxa-content-server/app/scripts/templates/settings/two_step_authentication.mustache
+++ b/packages/fxa-content-server/app/scripts/templates/settings/two_step_authentication.mustache
@@ -50,7 +50,7 @@
                 </li>
                 <li>
                     {{#hasToken}}
-                        <a class="replace-codes-link">{{#t}}Replace recovery codes{{/t}}</a>
+                        <button class="link replace-codes-link">{{#t}}Replace recovery codes{{/t}}</button>
                     {{/hasToken}}
                 </li>
             </ul>
diff --git a/packages/fxa-content-server/app/styles/_base.scss b/packages/fxa-content-server/app/styles/_base.scss
index 072414023cb..1da90e7408a 100644
--- a/packages/fxa-content-server/app/styles/_base.scss
+++ b/packages/fxa-content-server/app/styles/_base.scss
@@ -105,6 +105,19 @@ input {
   font-weight: inherit;
 }
 
+button.link {
+  color: $link-color-default;
+  font-size: 14px;
+  height: 20px;
+  justify-content: left;
+  letter-spacing: 0;
+  width: auto;
+}
+
+button.link:hover {
+  text-decoration: underline;
+}
+
 input[type='radio'] {
     @include font();
     // autoprefixer does not handle appearance, see https://github.com/ai/autoprefixer/issues/205
diff --git a/packages/fxa-content-server/app/styles/modules/_settings-totp.scss b/packages/fxa-content-server/app/styles/modules/_settings-totp.scss
index 57896afa814..d9875e754e0 100644
--- a/packages/fxa-content-server/app/styles/modules/_settings-totp.scss
+++ b/packages/fxa-content-server/app/styles/modules/_settings-totp.scss
@@ -115,7 +115,8 @@
   }
 }
 
-.replace-codes-link {
+.replace-codes-link,
+.replace-codes-link:hover {
   background: transparent url('/images/recovery_code_replace.svg') center left no-repeat;
   padding-left: 20px;
 }