diff --git a/addons/mail/static/src/components/message_reaction_group/message_reaction_group.scss b/addons/mail/static/src/components/message_reaction_group/message_reaction_group.scss
index a3af41080b2..df5189c8d3e 100644
--- a/addons/mail/static/src/components/message_reaction_group/message_reaction_group.scss
+++ b/addons/mail/static/src/components/message_reaction_group/message_reaction_group.scss
@@ -1,37 +1,7 @@
-// ------------------------------------------------------------------
-// Layout
-// ------------------------------------------------------------------
-
-.o_MessageReactionGroup {
-    border-radius: $o-mail-rounded-rectangle-border-radius-sm;
-    cursor: pointer;
-}
-
 // ------------------------------------------------------------------
 // Style
 // ------------------------------------------------------------------
 
-.o_MessageReactionGroup {
-    background: $white;
-    border-color: gray('200');
-    border-style: solid;
-    border-width: $border-width;
-
-    &.o-hasUserReacted, &.o-hasUserReacted:hover {
-        border-color: $o-brand-primary;
-        background-color: rgba($o-brand-primary, .1);
-    }
-
-    &:hover {
-        border-color: gray('400');
-        background-color: gray('200');
-    }
-}
-
-.o_MessageReactionGroup_count {
-
-    &.o-hasUserReacted {
-        color: $o-brand-primary;
-        font-weight: bold;
-    }
+.o_MessageReactionGroup.o-hasUserReacted {
+    background-color: rgba($o-brand-primary, .1);
 }
diff --git a/addons/mail/static/src/components/message_reaction_group/message_reaction_group.xml b/addons/mail/static/src/components/message_reaction_group/message_reaction_group.xml
index 7faff2d04f4..dc44c3f1bcd 100644
--- a/addons/mail/static/src/components/message_reaction_group/message_reaction_group.xml
+++ b/addons/mail/static/src/components/message_reaction_group/message_reaction_group.xml
@@ -3,14 +3,14 @@
 
     <t t-name="mail.MessageReactionGroup" owl="1">
         <t t-if="messageReactionGroup">
-            <div class="o_MessageReactionGroup d-flex" t-att-class="{'o-hasUserReacted': messageReactionGroup.hasUserReacted}" t-attf-class="{{ className }}" t-att-title="messageReactionGroup.summary" t-on-click="messageReactionGroup.onClick" t-ref="root">
+            <button class="o_MessageReactionGroup btn d-flex p-0 border rounded-sm" t-att-class="{'o-hasUserReacted border-primary': messageReactionGroup.hasUserReacted, 'bg-white': !messageReactionGroup.hasUserReacted}" t-attf-class="{{ className }}" t-att-title="messageReactionGroup.summary" t-on-click="messageReactionGroup.onClick" t-ref="root">
                 <span class="o_MessageReactionGroup_content mx-1">
                     <t t-esc="messageReactionGroup.content"/>
                 </span>
-                <span class="o_MessageReactionGroup_count mx-1" t-att-class="{'o-hasUserReacted': messageReactionGroup.hasUserReacted}">
+                <span class="o_MessageReactionGroup_count mx-1" t-att-class="{'o-hasUserReacted text-primary font-weight-bolder': messageReactionGroup.hasUserReacted}">
                     <t t-esc="messageReactionGroup.count"/>
                 </span>
-            </div>
+            </button>
         </t>
     </t>