diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index dcd00b7062..965d927273 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -643,6 +643,12 @@
     --color-compose-embedded-button-background-interactive: hsl(
         231deg 100% 90% / 90%
     );
+    --color-background-compose-new-message-button: hsl(0deg 0% 100%);
+    --color-background-compose-new-message-button-hover: hsl(0deg 0% 100%);
+    --color-background-compose-new-message-button-active: hsl(0deg 0% 95%);
+    --color-border-compose-new-message-button: hsl(0deg 0% 80%);
+    --color-border-compose-new-message-button-hover: hsl(0deg 0% 60%);
+    --color-border-compose-new-message-button-active: hsl(0deg 0% 60%);
     --color-compose-chevron-arrow: hsl(0deg 0% 58%);
     --color-limit-indicator: hsl(38deg 100% 36%);
     --color-limit-indicator-over-limit: hsl(3deg 80% 40%);
@@ -1086,6 +1092,12 @@
     --color-compose-embedded-button-background-interactive: hsl(
         235deg 100% 70% / 20%
     );
+    --color-background-compose-new-message-button: hsl(0deg 0% 0% / 20%);
+    --color-background-compose-new-message-button-hover: hsl(0deg 0% 0% / 15%);
+    --color-background-compose-new-message-button-active: hsl(0deg 0% 0% / 20%);
+    --color-border-compose-new-message-button: hsl(0deg 0% 0% / 60%);
+    --color-border-compose-new-message-button-hover: hsl(0deg 0% 0% / 60%);
+    --color-border-compose-new-message-button-active: hsl(0deg 0% 0% / 60%);
     --color-background-popover: hsl(212deg 32% 14%);
     --color-limit-indicator: hsl(38deg 100% 70%);
     --color-limit-indicator-over-limit: hsl(3deg 80% 60%);
diff --git a/web/styles/compose.css b/web/styles/compose.css
index 2f6980e050..837b067594 100644
--- a/web/styles/compose.css
+++ b/web/styles/compose.css
@@ -9,27 +9,39 @@
        reply button and the new-message button. */
     align-items: stretch;
 
-    .new_message_button {
-        .button {
-            /* Keep the new message button sized to match
-               adjacent buttons. */
-            font-size: inherit;
-            min-width: inherit;
-            line-height: var(--line-height-compose-buttons);
-            padding: 3px 10px;
+    .compose_mobile_button {
+        /* Keep the new message button sized to match
+           adjacent buttons. */
+        min-width: inherit;
+        padding: 3px 10px;
+        border-radius: 4px;
+        outline: none;
+        /* This is ugly, but necessary to use the
+           text + for the compose button. An icon
+           would likely be a better choice here.
+           1.2em is 16.8px at 14px em. */
+        font-size: 1.2em;
+        /* 1.2em is 16.8px at 14px em; this
+           maintains the 20px em-equivalent compose
+           line height, but at a 16.8px em. */
+        line-height: 1.19em;
+        font-weight: 400;
+        color: var(--color-text-default);
+        background-color: var(--color-background-compose-new-message-button);
+        border: 1px solid var(--color-border-compose-new-message-button);
+
+        &:hover {
+            background-color: var(
+                --color-background-compose-new-message-button-hover
+            );
+            border-color: var(--color-border-compose-new-message-button-hover);
         }
 
-        .compose_mobile_button {
-            /* This is ugly, but necessary to use the
-               text + for the compose button. An icon
-               would likely be a better choice here.
-               1.2em is 16.8px at 14px em. */
-            font-size: 1.2em !important;
-            /* 1.2em is 16.8px at 14px em; this
-               maintains the 20px em-equivalent compose
-               line height, but at a 16.8px em. */
-            line-height: 1.19em !important;
-            font-weight: 400;
+        &:active {
+            background-color: var(
+                --color-background-compose-new-message-button-active
+            );
+            border-color: var(--color-border-compose-new-message-button-hover);
         }
     }
 
@@ -60,8 +72,14 @@
 
         #left_bar_compose_reply_button_big,
         #new_conversation_button {
-            /* Remove the border inherited from `.button` styles. */
+            /* Keep the new message button sized to match
+               adjacent buttons. */
+            font-size: inherit;
+            min-width: inherit;
+            padding: 3px 10px;
+            outline: none;
             border: none;
+            color: var(--color-text-default);
             background: var(--color-compose-embedded-button-background);
             border-radius: 3px;
             line-height: var(--line-height-compose-buttons);
@@ -83,7 +101,6 @@
         #new_conversation_button {
             /* Remove the  `padding` to prevent margin from affecting parent height. */
             padding: 0 10px;
-            /* Removing the `min-width` inherited from the `.button` styles. */
             min-width: inherit;
             margin: 1px;
             flex-shrink: 0;
@@ -115,6 +132,34 @@
             display: none !important;
         }
     }
+
+    #new_direct_message_button {
+        /* Keep the new message button sized to match
+           adjacent buttons. */
+        font-size: inherit;
+        min-width: inherit;
+        line-height: var(--line-height-compose-buttons);
+        padding: 3px 10px;
+        border-radius: 4px;
+        outline: none;
+        color: var(--color-text-default);
+        background-color: var(--color-background-compose-new-message-button);
+        border: 1px solid var(--color-border-compose-new-message-button);
+
+        &:hover {
+            background-color: var(
+                --color-background-compose-new-message-button-hover
+            );
+            border-color: var(--color-border-compose-new-message-button-hover);
+        }
+
+        &:active {
+            background-color: var(
+                --color-background-compose-new-message-button-active
+            );
+            border-color: var(--color-border-compose-new-message-button-hover);
+        }
+    }
 }
 
 /* Main geometry for this element is in zulip.css */
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index b303b2194a..048ca5ca75 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -26,7 +26,7 @@
         }
     }
 
-    & a:hover {
+    & a:not(.button, .compose_control_button):hover {
         color: hsl(200deg 79% 66%);
 
         & code {
diff --git a/web/templates/compose.hbs b/web/templates/compose.hbs
index f64a890809..7784e369f9 100644
--- a/web/templates/compose.hbs
+++ b/web/templates/compose.hbs
@@ -12,29 +12,29 @@
     </div>
     <div id="compose_controls">
         <div id="compose_buttons">
-            <div class="new_message_button reply_button_container">
+            <div class="reply_button_container">
                 <div class="compose-reply-button-wrapper" data-reply-button-type="selected_message">
-                    <button type="button" class="button compose_reply_button"
+                    <button type="button" class="compose_reply_button"
                       id="left_bar_compose_reply_button_big">
                         {{t 'Compose message' }}
                     </button>
                 </div>
-                <button type="button" class="button compose_new_conversation_button"
+                <button type="button" class="compose_new_conversation_button"
                   id="new_conversation_button"
                   data-tooltip-template-id="new_stream_message_button_tooltip_template">
                     {{t 'Start new conversation' }}
                 </button>
             </div>
-            <span class="new_message_button mobile_button_container">
-                <button type="button" class="button rounded compose_mobile_button"
+            <span class="mobile_button_container">
+                <button type="button" class="compose_mobile_button"
                   id="left_bar_compose_mobile_button_big"
                   data-tooltip-template-id="left_bar_compose_mobile_button_tooltip_template">
                     +
                 </button>
             </span>
             {{#unless embedded }}
-            <span class="new_message_button new_direct_message_button_container">
-                <button type="button" class="button rounded compose_new_direct_message_button"
+            <span class="new_direct_message_button_container">
+                <button type="button" class="compose_new_direct_message_button"
                   id="new_direct_message_button"
                   data-tooltip-template-id="new_direct_message_button_tooltip_template">
                     {{t 'New direct message' }}
@@ -57,7 +57,7 @@
                             </div>
                             <div id="compose_recipient_box">
                                 <input type="text" name="stream_message_recipient_topic" id="stream_message_recipient_topic" maxlength="{{ max_topic_length }}" value="" placeholder="{{t 'Topic' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Topic' }}" />
-                                <button type="button" id="recipient_box_clear_topic_button" class="button tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Clear topic' }}" tabindex="-1">
+                                <button type="button" id="recipient_box_clear_topic_button" class="tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Clear topic' }}" tabindex="-1">
                                     <i class="zulip-icon zulip-icon-close"></i>
                                 </button>
                             </div>