DEV Community

Cover image for A CSS-only reaction component using emoji

A CSS-only reaction component using emoji

Temani Afif on July 18, 2021

Like star rating, reaction components are something widely used in many websites so here I am with my own implementation: A CSS-only reaction compo...
Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Wait wait wait, did you...did you use the accessibility / inclusion emoji....and make it not accessible.

I mean, are you now trying to hurt me? I thought we were friends?

Well despite your betrayal I will still give your article a ❤ and a 🦄 as I am a nice guy 😉

Collapse
 
afif profile image
Temani Afif

Oh, That was the accessibility icon ?? didn't know (🤥🤥🤥)

Collapse
 
grahamthedev profile image
GrahamTheDev

Yeah it is the "universal access", "access for all" or similar, I think it stems from Apple, although they could have stolen the icon knowing them 😉. I just know you will see it a lot in accessibility related stuff (as you can imagine I see it all the time!).

The best part about this posts is that after the explanation in your last post it actually makes sense!

Previously I would have had to play with the values for 10 minutes until I got it!

So thanks for the previous post...I will recover from this post...I suppose you owe me a heart attack after my SVG antics causing you so much pain 😋🤣

Thread Thread
 
afif profile image
Temani Afif

well, I knew it was the accessibility icon 😝 .. that "Pinocchio" emoji wasn't clear in my last comment 🤔

By the way, I am almost accessible, I used a label 😋. Missing some aria-things and it should be done

Collapse
 
madsstoumann profile image
Mads Stoumann

Nice animations! 👍🏻 I think my only grudge is the inconsistency of emojis on various OS’es, they will not look the same. And a small thing: add -webkit-tap-highlight-color: transparent; (I forgot that too on mine!)

Collapse
 
afif profile image
Temani Afif

True, that's why I also made the custom icon version in case someone want to have better control over the icon.

Collapse
 
thebugcoder profile image
TheBugCoder

Uh... There's a bug... if you click multiple times it's growing really big... :P

Collapse
 
grahamthedev profile image
GrahamTheDev

Its not a bug it is a feature! Seeing the icons at 2000% size and upside down is an Easter egg Temani added just for you!

Collapse
 
link2twenty profile image
Andrew Bone

And what a feature it is!

totally a feature (sarcasm)

Thread Thread
 
afif profile image
Temani Afif

it's not really a bug. It's the logical result of using my magic cubic-bezier(). There is a math explanation behind it 😉 so yes it's a hidden feature you just discovered!

Thread Thread
 
thebugcoder profile image
TheBugCoder

Ok! :P

Collapse
 
afif profile image
Temani Afif

Mr XX: But why there is no reaction count in your post?
Me: I will not use all my weapons at once. A war is made with different battles and we need a good strategie to win!
Mr XX: Oh! I see I see ..

Collapse
 
siddharthshyniben profile image
Siddharth

typo: strategie

(I keep finding typos)

Collapse
 
link2twenty profile image
Andrew Bone

Very cool, I like animating gradient backgrounds. It can look really impressive.

Collapse
 
siddharthshyniben profile image
Siddharth

Cool effect! Reminds me of DEV reactions

Collapse
 
afif profile image
Temani Afif

come on! mine are better 😜

Collapse
 
mafee6 profile image
Mafee7

👍Good One!

Collapse
 
posandu profile image
Posandu

Amazing

Collapse
 
evelinchamp profile image
EvelinCHamp

Is this a one-time animation upon click like in Facebook or something consistent like in Slack or Discord? It looks really good. Maybe I’ll try to expand on it if you will allow me.

Collapse
 
afif profile image
Temani Afif

feel free to do and show me what you get ;)

Collapse
 
mafee6 profile image
Mafee7

I found a bug: I you spam the reaction button, the emoji becomes really big and also goes out of viewport

Collapse
 
afif profile image
Temani Afif

yes I am aware of it ;) it's a side effect of the cubic-bezier() I am using