diff --git a/app/scripts/templates/settings/two_step_authentication.mustache b/app/scripts/templates/settings/two_step_authentication.mustache
index bdd5254769..9df06e4af2 100644
--- a/app/scripts/templates/settings/two_step_authentication.mustache
+++ b/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/app/styles/_base.scss b/app/styles/_base.scss
index b786fe7965..db1f68661f 100644
--- a/app/styles/_base.scss
+++ b/app/styles/_base.scss
@@ -109,6 +109,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/app/styles/modules/_settings-totp.scss b/app/styles/modules/_settings-totp.scss
index 331515c8ba..dd764060b0 100644
--- a/app/styles/modules/_settings-totp.scss
+++ b/app/styles/modules/_settings-totp.scss
@@ -112,7 +112,7 @@
   }
 }
 
-.replace-codes-link {
+.replace-codes-link, button.link:hover {
   background: transparent url('/images/recovery_code_replace.svg') center left no-repeat;
   padding-left: 20px;
 }