diff --git a/app/components/post_list/post/body/content/message_attachments/action_button/index.tsx b/app/components/post_list/post/body/content/message_attachments/action_button/index.tsx
index 21b3356f8..2246eaca0 100644
--- a/app/components/post_list/post/body/content/message_attachments/action_button/index.tsx
+++ b/app/components/post_list/post/body/content/message_attachments/action_button/index.tsx
@@ -64,10 +64,15 @@ const ActionButton = ({buttonColor, cookie, disabled, id, name, postId, theme}:
         }
     }, [serverUrl, postId, id, cookie]));
 
+    const STATUS_COLORS = getStatusColors(theme);
+    let hexColor: string | undefined;
     if (buttonColor) {
-        const STATUS_COLORS = getStatusColors(theme);
-        const hexColor = secureGetFromRecord(STATUS_COLORS, buttonColor) || secureGetFromRecord(theme, buttonColor) || buttonColor;
-        customButtonStyle = {borderColor: changeOpacity(hexColor, 0.25), backgroundColor: '#ffffff'};
+        hexColor = secureGetFromRecord(STATUS_COLORS, buttonColor) || secureGetFromRecord(theme, buttonColor) || buttonColor;
+    } else {
+        hexColor = secureGetFromRecord(STATUS_COLORS, 'default');
+    }
+    if (hexColor) {
+        customButtonStyle = {borderColor: changeOpacity(hexColor, 0.16), backgroundColor: changeOpacity(hexColor, 0.08), borderWidth: 0};
         customButtonTextStyle = {color: hexColor};
     }