diff --git a/web/src/settings_invites.ts b/web/src/settings_invites.ts
index b8c905c881..91179217b1 100644
--- a/web/src/settings_invites.ts
+++ b/web/src/settings_invites.ts
@@ -226,7 +226,7 @@ function do_resend_invite({$row, invite_id}: {$row: JQuery; invite_id: string}):
             dialog_widget.close();
             $resend_button.prop("disabled", true);
             $resend_button.text($t({defaultMessage: "Sent!"}));
-            $resend_button.removeClass("resend btn-warning").addClass("sea-green");
+            $resend_button.removeClass("resend button-warning").addClass("sea-green");
         },
     });
 }
diff --git a/web/src/settings_users.ts b/web/src/settings_users.ts
index 2513b94158..e881d03022 100644
--- a/web/src/settings_users.ts
+++ b/web/src/settings_users.ts
@@ -119,8 +119,8 @@ export function update_view_on_deactivate(user_id: number): void {
     const $button = $row.find("button.deactivate");
     $button.prop("disabled", false);
     $row.find("i.deactivated-user-icon").show();
-    $button.addClass("btn-warning reactivate");
-    $button.removeClass("deactivate btn-danger");
+    $button.addClass("button-warning reactivate");
+    $button.removeClass("deactivate button-danger");
     $button.empty().append($("<i>").addClass(["fa", "fa-user-plus"]).attr("aria-hidden", "true"));
     $row.removeClass("active-user");
     $row.addClass("deactivated_user");
@@ -137,8 +137,8 @@ export function update_view_on_reactivate(user_id: number): void {
 
     const $button = $row.find("button.reactivate");
     $row.find("i.deactivated-user-icon").hide();
-    $button.addClass("btn-danger deactivate");
-    $button.removeClass("btn-warning reactivate");
+    $button.addClass("button-danger deactivate");
+    $button.removeClass("button-warning reactivate");
     $button.empty().append($("<i>").addClass(["fa", "fa-user-times"]).attr("aria-hidden", "true"));
     $row.removeClass("deactivated_user");
     $row.addClass("active-user");
diff --git a/web/src/user_group_edit.js b/web/src/user_group_edit.js
index 0aa15a0ba4..2eca6e8d33 100644
--- a/web/src/user_group_edit.js
+++ b/web/src/user_group_edit.js
@@ -1022,7 +1022,7 @@ export function initialize() {
         });
     });
 
-    $("#groups_overlay_container").on("click", ".group_settings_header .btn-danger", () => {
+    $("#groups_overlay_container").on("click", ".group_settings_header .button-danger", () => {
         const active_group_data = get_active_data();
         const group_id = active_group_data.id;
         const user_group = user_groups.get_user_group_from_id(group_id);
diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index 7b3aa9ee6c..62012595b4 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -222,7 +222,7 @@ input::placeholder {
         }
     }
 
-    &.btn-warning {
+    &.button-warning {
         color: hsl(35deg 70% 56%);
         border-color: hsl(35deg 98% 84%);
 
@@ -237,7 +237,7 @@ input::placeholder {
         }
     }
 
-    &.btn-danger {
+    &.button-danger {
         color: hsl(357deg 64% 72%);
         border-color: hsl(4deg 56% 82%);
 
diff --git a/web/styles/message_row.css b/web/styles/message_row.css
index 970c2190ff..00d181daf7 100644
--- a/web/styles/message_row.css
+++ b/web/styles/message_row.css
@@ -743,7 +743,7 @@ of the base style defined for a read-only textarea in dark mode. */
 }
 
 .edit-controls {
-    .btn-wrapper {
+    .button-wrapper {
         cursor: not-allowed;
     }
 }
diff --git a/web/templates/poll_modal_option.hbs b/web/templates/poll_modal_option.hbs
index e838404163..0e01a8d1e8 100644
--- a/web/templates/poll_modal_option.hbs
+++ b/web/templates/poll_modal_option.hbs
@@ -1,7 +1,7 @@
 <li class="option-row">
     <i class="zulip-icon zulip-icon-grip-vertical drag-icon"></i>
     <input type="text" class="poll-option-input modal_text_input" placeholder="{{t 'New option' }}" />
-    <button type="button" class="button rounded small btn-secondary delete-option" title="{{t 'Delete' }}">
+    <button type="button" class="button rounded small button-secondary delete-option" title="{{t 'Delete' }}">
         <i class="fa fa-trash-o" aria-hidden="true"></i>
     </button>
 </li>
diff --git a/web/templates/recent_view_table.hbs b/web/templates/recent_view_table.hbs
index ede4ad7af2..a78e2903b2 100644
--- a/web/templates/recent_view_table.hbs
+++ b/web/templates/recent_view_table.hbs
@@ -1,4 +1,4 @@
-<div id="recent_view_filter_buttons" class="btn-group" role="group">
+<div id="recent_view_filter_buttons" class="button-group" role="group">
     <div id="recent_filters_group">
         {{> recent_view_filters}}
     </div>
diff --git a/web/templates/settings/account_settings.hbs b/web/templates/settings/account_settings.hbs
index 32fdb1ff3c..37c3b80b48 100644
--- a/web/templates/settings/account_settings.hbs
+++ b/web/templates/settings/account_settings.hbs
@@ -52,13 +52,13 @@
 
             <div class="input-group">
                 <div id="deactivate_account_container" class="inline-block {{#if user_is_only_organization_owner}}disabled_setting_tooltip{{/if}}">
-                    <button type="submit" class="button rounded btn-danger" id="user_deactivate_account_button"
+                    <button type="submit" class="button rounded button-danger" id="user_deactivate_account_button"
                       {{#if user_is_only_organization_owner}}disabled="disabled"{{/if}}>
                         {{t 'Deactivate account' }}
                     </button>
                 </div>
                 {{#if owner_is_only_user_in_organization}}
-                    <button type="submit" class="button rounded btn-danger deactivate_realm_button">
+                    <button type="submit" class="button rounded button-danger deactivate_realm_button">
                         {{t 'Deactivate organization' }}
                     </button>
                 {{/if}}
diff --git a/web/templates/settings/add_new_bot_form.hbs b/web/templates/settings/add_new_bot_form.hbs
index f37ffe3951..d16aa36d82 100644
--- a/web/templates/settings/add_new_bot_form.hbs
+++ b/web/templates/settings/add_new_bot_form.hbs
@@ -66,7 +66,7 @@
             <div id="add_bot_preview_text">
                 <img id="add_bot_preview_image" />
             </div>
-            <button class="button white rounded small btn-danger" style="display: none;" id="bot_avatar_clear_button">{{t "Clear avatar" }}</button>
+            <button class="button white rounded small button-danger" style="display: none;" id="bot_avatar_clear_button">{{t "Clear avatar" }}</button>
             <button class="button white rounded" id="bot_avatar_upload_button">{{t "Choose avatar" }}</button> ({{t "Optional" }})
         </div>
         <p>
diff --git a/web/templates/settings/admin_default_streams_list.hbs b/web/templates/settings/admin_default_streams_list.hbs
index 1771297fc4..1284c18663 100644
--- a/web/templates/settings/admin_default_streams_list.hbs
+++ b/web/templates/settings/admin_default_streams_list.hbs
@@ -6,7 +6,7 @@
     </td>
     {{#if ../can_modify}}
     <td class="actions">
-        <button class="button rounded remove-default-stream btn-danger">
+        <button class="button rounded remove-default-stream button-danger">
             {{t "Remove from default" }}
         </button>
     </td>
diff --git a/web/templates/settings/admin_emoji_list.hbs b/web/templates/settings/admin_emoji_list.hbs
index f2ffeb1911..bf628d149e 100644
--- a/web/templates/settings/admin_emoji_list.hbs
+++ b/web/templates/settings/admin_emoji_list.hbs
@@ -20,7 +20,7 @@
         {{/if}}
     </td>
     <td>
-        <button class="button rounded small delete btn-danger tippy-zulip-delayed-tooltip" {{#unless can_delete_emoji}}disabled="disabled"{{/unless}} data-tippy-content="{{t 'Delete' }}" data-emoji-name="{{name}}">
+        <button class="button rounded small delete button-danger tippy-zulip-delayed-tooltip" {{#unless can_delete_emoji}}disabled="disabled"{{/unless}} data-tippy-content="{{t 'Delete' }}" data-emoji-name="{{name}}">
             <i class="fa fa-trash-o" aria-hidden="true"></i>
         </button>
     </td>
diff --git a/web/templates/settings/admin_export_list.hbs b/web/templates/settings/admin_export_list.hbs
index 6fdc1adb4f..0e42eafdcb 100644
--- a/web/templates/settings/admin_export_list.hbs
+++ b/web/templates/settings/admin_export_list.hbs
@@ -22,7 +22,7 @@
     </td>
     <td class="actions">
         {{#if url}}
-        <button class="button rounded small delete btn-danger" data-export-id="{{id}}">
+        <button class="button rounded small delete button-danger" data-export-id="{{id}}">
             <i class="fa fa-trash-o" aria-hidden="true"></i>
         </button>
         {{/if}}
diff --git a/web/templates/settings/admin_human_form.hbs b/web/templates/settings/admin_human_form.hbs
index 0a7091a593..eb2d1d7434 100644
--- a/web/templates/settings/admin_human_form.hbs
+++ b/web/templates/settings/admin_human_form.hbs
@@ -29,7 +29,7 @@
     <div class="input-group">
         {{#if is_active}}
         <span {{#if owner_is_only_user_in_organization}}class="deactivate_user_button_tooltip"{{/if}}>
-            <button class="button rounded btn-danger deactivate_user_button" {{#if owner_is_only_user_in_organization}}disabled="disabled"{{/if}}>
+            <button class="button rounded button-danger deactivate_user_button" {{#if owner_is_only_user_in_organization}}disabled="disabled"{{/if}}>
                 {{t 'Deactivate user' }}
             </button>
         </span>
diff --git a/web/templates/settings/admin_invites_list.hbs b/web/templates/settings/admin_invites_list.hbs
index 78197a6bdc..aaaa22a800 100644
--- a/web/templates/settings/admin_invites_list.hbs
+++ b/web/templates/settings/admin_invites_list.hbs
@@ -33,11 +33,11 @@
     </td>
     <td class="actions">
         {{#unless is_multiuse}}
-        <button class="button rounded small resend btn-warning" {{#if disable_buttons}}disabled="disabled"{{/if}} data-invite-id="{{id}}">
+        <button class="button rounded small resend button-warning" {{#if disable_buttons}}disabled="disabled"{{/if}} data-invite-id="{{id}}">
             {{t "Resend" }}
         </button>
         {{/unless}}
-        <button class="button rounded small revoke btn-danger" {{#if disable_buttons}}disabled="disabled"{{/if}} data-invite-id="{{id}}" data-is-multiuse="{{is_multiuse}}">
+        <button class="button rounded small revoke button-danger" {{#if disable_buttons}}disabled="disabled"{{/if}} data-invite-id="{{id}}" data-is-multiuse="{{is_multiuse}}">
             {{t "Revoke" }}
         </button>
     </td>
diff --git a/web/templates/settings/admin_linkifier_list.hbs b/web/templates/settings/admin_linkifier_list.hbs
index 6949d99219..4b36c9eada 100644
--- a/web/templates/settings/admin_linkifier_list.hbs
+++ b/web/templates/settings/admin_linkifier_list.hbs
@@ -14,10 +14,10 @@
     </td>
     {{#if ../can_modify}}
     <td class="no-select actions">
-        <button class="button small rounded edit btn-warning tippy-zulip-delayed-tooltip" data-linkifier-id="{{id}}" data-tippy-content="{{t 'Edit' }}" aria-label="{{t 'Edit' }}">
+        <button class="button small rounded edit button-warning tippy-zulip-delayed-tooltip" data-linkifier-id="{{id}}" data-tippy-content="{{t 'Edit' }}" aria-label="{{t 'Edit' }}">
             <i class="fa fa-pencil"></i>
         </button>
-        <button class="button small rounded delete btn-danger tippy-zulip-delayed-tooltip" data-linkifier-id="{{id}}" data-tippy-content="{{t 'Delete' }}" aria-label="{{t 'Delete' }}">
+        <button class="button small rounded delete button-danger tippy-zulip-delayed-tooltip" data-linkifier-id="{{id}}" data-tippy-content="{{t 'Delete' }}" aria-label="{{t 'Delete' }}">
             <i class="fa fa-trash-o"></i>
         </button>
     </td>
diff --git a/web/templates/settings/admin_playground_list.hbs b/web/templates/settings/admin_playground_list.hbs
index 2e785141ef..68dcc1a943 100644
--- a/web/templates/settings/admin_playground_list.hbs
+++ b/web/templates/settings/admin_playground_list.hbs
@@ -11,7 +11,7 @@
     </td>
     {{#if ../can_modify}}
     <td class="no-select actions">
-        <button class="button small delete btn-danger tippy-zulip-tooltip" data-playground-id="{{id}}" data-tippy-content="{{t 'Delete' }} {{ playground_name }}" aria-label="{{t 'Delete' }} {{ playground_name }}">
+        <button class="button small delete button-danger tippy-zulip-tooltip" data-playground-id="{{id}}" data-tippy-content="{{t 'Delete' }} {{ playground_name }}" aria-label="{{t 'Delete' }} {{ playground_name }}">
             <i class="fa fa-trash-o"></i>
         </button>
     </td>
diff --git a/web/templates/settings/admin_profile_field_list.hbs b/web/templates/settings/admin_profile_field_list.hbs
index d1068e4740..0ddaf6acdf 100644
--- a/web/templates/settings/admin_profile_field_list.hbs
+++ b/web/templates/settings/admin_profile_field_list.hbs
@@ -35,10 +35,10 @@
     </td>
     {{#if ../can_modify}}
     <td class="actions">
-        <button class="button rounded small btn-warning open-edit-form-modal tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Edit' }}" data-profile-field-id="{{id}}">
+        <button class="button rounded small button-warning open-edit-form-modal tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Edit' }}" data-profile-field-id="{{id}}">
             <i class="fa fa-pencil" aria-hidden="true"></i>
         </button>
-        <button class="button rounded small delete btn-danger tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Delete' }}" data-profile-field-id="{{id}}">
+        <button class="button rounded small delete button-danger tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Delete' }}" data-profile-field-id="{{id}}">
             <i class="fa fa-trash-o" aria-hidden="true"></i>
         </button>
     </td>
diff --git a/web/templates/settings/admin_realm_domains_list.hbs b/web/templates/settings/admin_realm_domains_list.hbs
index a186eba9b0..a5fa3433b7 100644
--- a/web/templates/settings/admin_realm_domains_list.hbs
+++ b/web/templates/settings/admin_realm_domains_list.hbs
@@ -8,6 +8,6 @@
             <span class="rendered-checkbox"></span>
         </label>
     </td>
-    <td><button class="button btn-danger small rounded delete_realm_domain">{{t "Remove" }}</button></td>
+    <td><button class="button button-danger small rounded delete_realm_domain">{{t "Remove" }}</button></td>
 </tr>
 {{/with}}
diff --git a/web/templates/settings/admin_user_list.hbs b/web/templates/settings/admin_user_list.hbs
index 9dde70534c..a287ebb342 100644
--- a/web/templates/settings/admin_user_list.hbs
+++ b/web/templates/settings/admin_user_list.hbs
@@ -36,18 +36,18 @@
     <td class="actions">
         <span class="user-status-settings">
             <span {{#if (and is_bot cannot_edit)}}class="tippy-zulip-tooltip"{{/if}} {{#if (and is_bot cannot_edit)}}data-tippy-content="{{t 'This bot cannot be edited.'}}"{{/if}}>
-                <button class="button rounded small btn-warning open-user-form tippy-zulip-delayed-tooltip" data-tippy-content="{{#if is_bot}}{{#unless cannot_edit}}{{t 'Edit bot' }}{{/unless}}{{else}}{{t 'Edit user' }}{{/if}}" data-user-id="{{user_id}}" {{#if cannot_edit}}disabled="disabled"{{/if}}>
+                <button class="button rounded small button-warning open-user-form tippy-zulip-delayed-tooltip" data-tippy-content="{{#if is_bot}}{{#unless cannot_edit}}{{t 'Edit bot' }}{{/unless}}{{else}}{{t 'Edit user' }}{{/if}}" data-user-id="{{user_id}}" {{#if cannot_edit}}disabled="disabled"{{/if}}>
                     <i class="fa fa-pencil" aria-hidden="true"></i>
                 </button>
             </span>
             {{#if is_active}}
             <span {{#if (and is_bot cannot_deactivate)}}class="tippy-zulip-tooltip"{{/if}} {{#if (and is_bot cannot_deactivate)}}data-tippy-content="{{t 'This bot cannot be deactivated.'}}"{{/if}}>
-                <button class="button rounded small btn-danger {{#unless (and is_bot cannot_deactivate) }}deactivate{{/unless}}" {{#if cannot_deactivate}}disabled="disabled"{{/if}}>
+                <button class="button rounded small button-danger {{#unless (and is_bot cannot_deactivate) }}deactivate{{/unless}}" {{#if cannot_deactivate}}disabled="disabled"{{/if}}>
                     <i class="fa fa-user-times" aria-hidden="true"></i>
                 </button>
             </span>
             {{else}}
-            <button class="button rounded small reactivate btn-warning">
+            <button class="button rounded small reactivate button-warning">
                 <i class="fa fa-user-plus" aria-hidden="true"></i>
             </button>
             {{/if}}
diff --git a/web/templates/settings/alert_word_settings_item.hbs b/web/templates/settings/alert_word_settings_item.hbs
index 32996951a7..60f2ce7c76 100644
--- a/web/templates/settings/alert_word_settings_item.hbs
+++ b/web/templates/settings/alert_word_settings_item.hbs
@@ -7,7 +7,7 @@
         </div>
     </td>
     <td>
-        <button type="submit" class="button rounded small delete btn-danger remove-alert-word tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Delete' }}" data-word="{{word}}">
+        <button type="submit" class="button rounded small delete button-danger remove-alert-word tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Delete' }}" data-word="{{word}}">
             <i class="fa fa-trash-o" aria-hidden="true"></i>
         </button>
     </td>
diff --git a/web/templates/settings/bot_avatar_row.hbs b/web/templates/settings/bot_avatar_row.hbs
index 659bb00b1c..578eb46f88 100644
--- a/web/templates/settings/bot_avatar_row.hbs
+++ b/web/templates/settings/bot_avatar_row.hbs
@@ -44,14 +44,14 @@
             <div class="bot-card-api-key-value-and-button no-select">
                 <!-- have the `.text-select` in `.no-select` so that the value doesn't have trailing whitespace. -->
                 <span class="bot-card-value text-select">{{api_key}}</span>
-                <button type="submit" class="button no-style btn-secondary bot-card-regenerate-bot-api-key tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Generate new API key' }}" data-user-id="{{user_id}}">
+                <button type="submit" class="button no-style button-secondary bot-card-regenerate-bot-api-key tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Generate new API key' }}" data-user-id="{{user_id}}">
                     <i class="fa fa-refresh" aria-hidden="true"></i>
                 </button>
             </div>
             <div class="bot-card-api-key-error text-error"></div>
         </div>
         {{else}}
-        <button class="button round btn-warning reactivate_bot" data-user-id="{{user_id}}">{{t "Reactivate bot" }}</button>
+        <button class="button round button-warning reactivate_bot" data-user-id="{{user_id}}">{{t "Reactivate bot" }}</button>
         {{/if}}
     </div>
 </li>
diff --git a/web/templates/settings/edit_bot_form.hbs b/web/templates/settings/edit_bot_form.hbs
index 920b007899..582d5b8d54 100644
--- a/web/templates/settings/edit_bot_form.hbs
+++ b/web/templates/settings/edit_bot_form.hbs
@@ -51,7 +51,7 @@
     {{/if}}
     <div class="input-group">
         {{#if is_active}}
-        <button class="button rounded btn-danger deactivate_bot_button">
+        <button class="button rounded button-danger deactivate_bot_button">
             {{t 'Deactivate bot' }}
         </button>
         {{else}}
diff --git a/web/templates/settings/organization_profile_admin.hbs b/web/templates/settings/organization_profile_admin.hbs
index 670b4e5f01..262985ab9d 100644
--- a/web/templates/settings/organization_profile_admin.hbs
+++ b/web/templates/settings/organization_profile_admin.hbs
@@ -89,7 +89,7 @@
         <div class="deactivate-realm-section">
             <div class="input-group">
                 <div id="deactivate_realm_button_container" class="inline-block {{#unless is_owner}}disabled_setting_tooltip{{/unless}}">
-                    <button class="button rounded btn-danger deactivate_realm_button">
+                    <button class="button rounded button-danger deactivate_realm_button">
                         {{t 'Deactivate organization' }}
                     </button>
                 </div>
diff --git a/web/templates/settings/uploaded_files_list.hbs b/web/templates/settings/uploaded_files_list.hbs
index d173e49d8a..8a136812b0 100644
--- a/web/templates/settings/uploaded_files_list.hbs
+++ b/web/templates/settings/uploaded_files_list.hbs
@@ -26,7 +26,7 @@
         </span>
         <span class="edit-attachment-buttons">
             <button type="submit"
-              class="button rounded small delete btn-danger remove-attachment tippy-zulip-delayed-tooltip"
+              class="button rounded small delete button-danger remove-attachment tippy-zulip-delayed-tooltip"
               data-tippy-content="{{t 'Delete' }}" data-attachment="{{id}}">
                 <i class="fa fa-trash-o" aria-hidden="true"></i>
             </button>
diff --git a/web/templates/stream_settings/stream_member_list_entry.hbs b/web/templates/stream_settings/stream_member_list_entry.hbs
index 0e2f15bb8c..bfff63963a 100644
--- a/web/templates/stream_settings/stream_member_list_entry.hbs
+++ b/web/templates/stream_settings/stream_member_list_entry.hbs
@@ -11,7 +11,7 @@
     <td class="unsubscribe">
         <div class="subscriber_list_remove">
             <form class="remove-subscriber-form">
-                <button type="submit" name="unsubscribe" class="remove-subscriber-button button small rounded btn-danger">
+                <button type="submit" name="unsubscribe" class="remove-subscriber-button button small rounded button-danger">
                     {{#if for_user_group_members}}
                     {{t 'Remove'}}
                     {{else}}
diff --git a/web/templates/stream_settings/stream_settings.hbs b/web/templates/stream_settings/stream_settings.hbs
index 8953be1f37..9888f9366e 100644
--- a/web/templates/stream_settings/stream_settings.hbs
+++ b/web/templates/stream_settings/stream_settings.hbs
@@ -21,7 +21,7 @@
         </div>
         <a href="{{preview_url}}" class="button small rounded tippy-zulip-delayed-tooltip" id="preview-stream-button" role="button" data-tooltip-template-id="view-stream-tooltip-template" data-tippy-placement="bottom" {{#unless should_display_preview_button }}style="display: none"{{/unless}}><i class="fa fa-eye"></i></a>
         {{#if is_realm_admin}}
-        <button class="button small rounded btn-danger deactivate tippy-zulip-delayed-tooltip" type="button" name="delete_button" data-tippy-content="{{t 'Archive channel'}}">
+        <button class="button small rounded button-danger deactivate tippy-zulip-delayed-tooltip" type="button" name="delete_button" data-tippy-content="{{t 'Archive channel'}}">
             <span class="icon-container">
                 <i class="zulip-icon zulip-icon-archive" aria-hidden="true"></i>
             </span>
@@ -47,7 +47,7 @@
                 </div>
                 <div class="stream_change_property_info alert-notification"></div>
                 <div class="button-group" {{#unless can_change_name_description}}style="display:none"{{/unless}}>
-                    <button id="open_stream_info_modal" class="button rounded small btn-warning tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Edit channel name and description' }}">
+                    <button id="open_stream_info_modal" class="button rounded small button-warning tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Edit channel name and description' }}">
                         <i class="fa fa-pencil" aria-hidden="true"></i>
                     </button>
                 </div>
diff --git a/web/templates/user_group_settings/user_group_settings.hbs b/web/templates/user_group_settings/user_group_settings.hbs
index fa6fc48fc0..becad93c58 100644
--- a/web/templates/user_group_settings/user_group_settings.hbs
+++ b/web/templates/user_group_settings/user_group_settings.hbs
@@ -10,7 +10,7 @@
                 {{/if}}
             </button>
         </div>
-        <button class="button small rounded btn-danger deactivate tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Deactivate group'}}" type="button" name="delete_button"> <i class="fa fa-trash-o" aria-hidden="true"></i></button>
+        <button class="button small rounded button-danger deactivate tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Deactivate group'}}" type="button" name="delete_button"> <i class="fa fa-trash-o" aria-hidden="true"></i></button>
     </div>
 </div>
 <div class="user_group_settings_wrapper" data-group-id="{{group.id}}">
@@ -23,7 +23,7 @@
                 </div>
                 <div class="group_change_property_info alert-notification"></div>
                 <div class="button-group">
-                    <button id="open_group_info_modal" class="button rounded small btn-warning tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Change group info' }}">
+                    <button id="open_group_info_modal" class="button rounded small button-warning tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Change group info' }}">
                         <i class="fa fa-pencil" aria-hidden="true"></i>
                     </button>
                 </div>
diff --git a/web/templates/user_group_settings/user_group_subgroup_entry.hbs b/web/templates/user_group_settings/user_group_subgroup_entry.hbs
index 36e96bbc45..1b6d913f72 100644
--- a/web/templates/user_group_settings/user_group_subgroup_entry.hbs
+++ b/web/templates/user_group_settings/user_group_subgroup_entry.hbs
@@ -6,7 +6,7 @@
     <td class="remove">
         <div class="subgroup_list_remove">
             <form class="remove-subgroup-form">
-                <button type="submit" name="remove" class="remove-subgroup-button button small rounded btn-danger">
+                <button type="submit" name="remove" class="remove-subgroup-button button small rounded button-danger">
                     {{t 'Remove'}}
                 </button>
             </form>
diff --git a/web/templates/user_stream_list_item.hbs b/web/templates/user_stream_list_item.hbs
index 7729505216..46dcc6f25f 100644
--- a/web/templates/user_stream_list_item.hbs
+++ b/web/templates/user_stream_list_item.hbs
@@ -8,7 +8,7 @@
     {{#if show_unsubscribe_button}}
     <td class="remove_subscription">
         <div class="subscription_list_remove">
-            <button type="button" name="unsubscribe" class="remove-subscription-button button small rounded btn-danger {{#if (or show_private_stream_unsub_tooltip show_last_user_in_private_stream_unsub_tooltip)}}tippy-zulip-tooltip{{/if}}" data-tippy-content='{{#if show_private_stream_unsub_tooltip}}{{t "Use channel settings to unsubscribe from private channels."}}{{else}}{{t "Use channel settings to unsubscribe the last user from a private channel."}}{{/if}}'>
+            <button type="button" name="unsubscribe" class="remove-subscription-button button small rounded button-danger {{#if (or show_private_stream_unsub_tooltip show_last_user_in_private_stream_unsub_tooltip)}}tippy-zulip-tooltip{{/if}}" data-tippy-content='{{#if show_private_stream_unsub_tooltip}}{{t "Use channel settings to unsubscribe from private channels."}}{{else}}{{t "Use channel settings to unsubscribe the last user from a private channel."}}{{/if}}'>
                 {{t 'Unsubscribe' }}
             </button>
         </div>