Hello,
I made some CSS modification on Discourse Reactions Plugin. So it looks much like Facebook reaction buttons.
These for 6 reaction buttons including the default which is on my site is 
.
COMMON / SCSS
Place this code to common - css section.
Important notice: You can modify the emojis above label with edit content: 'Love it!', content: 'Beautiful' etc… lines: Of course you can use whatever reaction you want. It is just a label above the reactions.
.discourse-reactions-picker {
.discourse-reactions-picker-container {
width: 330px;
height: 50px;
max-width: calc(100vw - 2em);
border: 1px solid var(--primary-low) !important;
border-radius: 50px;
.pickable-reaction {
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
}
.pickable-reaction {
background: transparent !important;
.emoji {
height: 40px;
width: 40px;
padding: 0 !important;
transform: scale(0.9);
}
&.is-used {
transform: scale(1.3);
transform-origin: bottom;
border: none !important;
}
&:hover {
transform-origin: bottom;
}
&:hover:after {
position: absolute;
font-size: 10px;
top: -15px;
background: var(--secondary-low);
color: var(--secondary);
padding: 2px 5px;
border-radius: 20px;
}
&:first-child {
&:hover:after {
content: 'Love it!';
}
}
&:nth-child(2) {
&:hover:after {
content: 'Beautiful';
}
}
&:nth-child(3) {
&:hover:after {
content: 'Hug';
}
}
&:nth-child(4) {
&:hover:after {
content: 'Congrats!!';
}
}
&:nth-child(5) {
&:hover:after {
content: 'Hmm...';
}
}
&:nth-child(6) {
&:hover:after {
content: 'Wooow!';
}
}
}
}
Mobile
On mobile I set position fixed the reactions picker position.
This is a possible option to prevent this strange behaviour. 
Looks like this
Same thing happening with state panel on mobile that was on reactions picker so also use position fixed.
Mobile / SCSS
.discourse-reactions-picker {
position: fixed;
.pickable-reaction {
&:hover:after {
font-size: 12px;
top: -8px;
}
&.is-used {
&:hover:after {
transform: scale(0.8);
top: -15px;
}
}
}
}
.discourse-reactions-state-panel {
position: fixed;
}
Hide default who liked section
COMMON / CSS
I hide the default who’s liked section because the Reactions State Panel also show those informations.
.who-liked {
display: none;
}
…
Thank you!
