diff --git a/website/client/assets/scss/button.scss b/website/client/assets/scss/button.scss
index 843bc24e62..a278ded2d1 100644
--- a/website/client/assets/scss/button.scss
+++ b/website/client/assets/scss/button.scss
@@ -20,7 +20,7 @@
     @include btn-focus-hover-shadow();
   }
 
-  &:hover:not(.btn-flat) {
+  &:hover:not(.btn-flat):not(.disabled) {
     @include btn-focus-hover-shadow();
     border-color: transparent;
   }
@@ -37,6 +37,7 @@
 
 .btn:disabled, .btn.disabled {
   box-shadow: none;
+  cursor: default;
   opacity: 0.64;
   border-color: transparent;
 }
diff --git a/website/client/components/settings/usernameForm.vue b/website/client/components/settings/usernameForm.vue
index 61a39cc6ec..86885a42ac 100644
--- a/website/client/components/settings/usernameForm.vue
+++ b/website/client/components/settings/usernameForm.vue
@@ -27,16 +27,12 @@
       .input-error.text-center(v-for="issue in usernameIssues") {{ issue }}
     .small.text-center.mb-3(v-if='!avatarIntro') {{ $t('usernameLimitations') }}
     .row.justify-content-center
-      button.btn.btn-primary.btn-flat(type='submit', @click='submitNames()', :disabled='usernameCannotSubmit') {{ $t(avatarIntro ? 'getStarted' : 'saveAndConfirm') }}
+      button.btn.btn-primary(type='submit', @click='submitNames()', :class='{disabled: usernameCannotSubmit}', :disabled='usernameCannotSubmit') {{ $t(avatarIntro ? 'getStarted' : 'saveAndConfirm') }}
 </template>
 
 <style lang="scss" scoped>
   @import '~client/assets/scss/colors.scss';
 
-  .btn:disabled {
-    cursor: default;
-  }
-
   button {
     margin: 0.25rem auto 1rem;
   }