diff --git a/app/assets/javascripts/discourse/templates/components/emoji-uploader.hbs b/app/assets/javascripts/discourse/templates/components/emoji-uploader.hbs
index 8d9b297cf92..a58498a91bd 100644
--- a/app/assets/javascripts/discourse/templates/components/emoji-uploader.hbs
+++ b/app/assets/javascripts/discourse/templates/components/emoji-uploader.hbs
@@ -1,6 +1,6 @@
 {{text-field name="name" placeholderKey="admin.emoji.name" value=name}}
-<label class="btn btn-primary" {{bind-attr disabled="addDisabled"}}>
+<label {{bind-attr class=":btn :btn-primary addDisabled:disabled"}}>
   {{fa-icon "plus"}}
   {{i18n 'admin.emoji.add'}}
-  <input {{bind-attr disabled="addDisabled"}} type="file" accept=".png,.gif" style="visibility: hidden; position: absolute;" />
-</label>
+  <input disabled={{addDisabled}} type="file" accept=".png,.gif" style="visibility: hidden; position: absolute;" />
+</label>
\ No newline at end of file
diff --git a/app/assets/stylesheets/common/components/buttons.css.scss b/app/assets/stylesheets/common/components/buttons.css.scss
index af8f0df24a2..e195a034f4b 100644
--- a/app/assets/stylesheets/common/components/buttons.css.scss
+++ b/app/assets/stylesheets/common/components/buttons.css.scss
@@ -55,7 +55,7 @@
     background: dark-light-diff($primary, $secondary, 65%, -75%);
     color: #fff;
   }
-  &[disabled] {
+  &[disabled], &.disabled {
     background: dark-light-diff($primary, $secondary, 90%, -60%);
     &:hover { color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)); }
     cursor: not-allowed;
@@ -88,7 +88,7 @@
     @include linear-gradient(scale-color($tertiary, $lightness: -20%), scale-color($tertiary, $lightness: -10%));
     color: #fff;
   }
-  &[disabled] {
+  &[disabled], &.disabled {
     background: $tertiary;
   }
 }
@@ -109,7 +109,7 @@
   &:active {
     @include linear-gradient(scale-color($danger, $lightness: -20%), $danger);
   }
-  &[disabled] {
+  &[disabled], &.disabled {
     background: $danger;
   }
 }