A CSS-only reaction component using emoji
Tags: html, css, webdev, beginners
Published: 2021-07-18 20:35:45

Like [star rating](https://dev.to/afif/series/13564), reaction components are something widely used in many websites so here I am with my own implementation: A CSS-only reaction component that works with emojis or any kind of custom icons. 

No need to bother yourself dealing with SVG or PNG images. Grab your favorite emoji and build your own component.

See it in play:

{% codepen https://codepen.io/t_afif/pen/NWjgqWK %}

In the above, you will find no `@keyframes`. All the animations are done using only CSS transition

---

## How does it work?

The above rely on the very basic HTML code:

```html
<input type="checkbox" id="r1">
<label for="r1" class="react">
<i data-icon="💯"></i>
</label>
```

Nothing complex. An `<input>` with its corresponding `<label>` and a `<i>` element having our Emoji as data attribute. That's it!

All the magic is done using CSS and we have different layers illustrated like below:

```html
<input type="checkbox" id="r1">
<label for="r1" class="react">
  ::before [1]
  <i data-icon="💯">
    ::before [2]
    ::after [3]
  </i>
  ::after [4]
</label>
```

![reactions layers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x1anl77vd11djvpx5s5t.png)

All the layers are above each other thanks to the use of `display:inline-grid` and `grid-area:1/1`

![All layers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m1r3byqgb9fksjvggvg4.png)

**[1]** is a basic circle created like below:

```css
.react:before {
  content:"";
  grid-area:1/1;
  border-radius:50%;
  border:solid orange calc(var(--r)/2);
}
```

Its transition is a scale one (from `0` to `1`) then a `border-width` (from `calc(var(--r)/2)` to `0`)

```css
transition:
    transform 0.5s,
    border-width 0.5s 0.5s;
```

`--r` is the variable that will control all the sizing of our component. Yes, it's a scalable one! You only need to adjust one variable to control the overall size.

**[2]** is our emoji. Nothing complex here:

```css
.react i:before {
  content:attr(data-icon);
  grid-area:1/1;
  font-style:normal;
  font-size:calc(0.6*var(--r));
}
```

The fun start with **[3]** and **[4]**. Those small circles are built using multiple `radial-gradient`. The difference between [3] and [4] is the circle size and a small rotation to avoid the overlap:

```css
.react:after,
.react i:after{
  content:"";
  grid-area:1/1;
  margin: calc(var(--r)/-2);
  --c1:radial-gradient(red    50%,#0000 60%);
  --c2:radial-gradient(orange 50%,#0000 60%);
  background:
    var(--c1),var(--c1),var(--c1),var(--c1),
    var(--c2),var(--c2),var(--c2),var(--c2); 
  background-size:calc(var(--r)/6) calc(var(--r)/6); 
  background-position:
    calc(50% - var(--r)/2) calc(50% - var(--r)/2),
    calc(50% + var(--r)/2) calc(50% - var(--r)/2),
    calc(50% - var(--r)/2) calc(50% + var(--r)/2),
    calc(50% + var(--r)/2) calc(50% + var(--r)/2),
    calc(50% +  0px) calc(50% + var(--r)*0.707),
    calc(50% + var(--r)*0.707) calc(50% +  0px),
    calc(50% - var(--r)*0.707) calc(50% +  0px),
    calc(50% +  0px) calc(50% - var(--r)*0.707);
  background-repeat:no-repeat;
  transform:scale(0);
}
.react i:after {
  background-size:calc(var(--r)/8) calc(var(--r)/8);
  transform:rotate(60deg) scale(0);
}
```

Each one is made with 8 circles (4 red & 4 orange) placed in a circular shape. The Math-folks will notice the value of `sin()` and `cos()` for the angles `N*45deg`.

Their transition is a scale one (from `0` to `1`) then a `background-size` one (from the value defined above to `0`) combined with `opacity`

```css
transition:
    transform 0.5s 0.5s,
    opacity   0.4s 0.9s,
    background-size 0.5s 0.9s;
```

Finally, we have the transition applied to the `<i>` element that will affect both **[2]** and **[3]**. We have the filter one that allows us to have the grey coloration that transitions to the original color of the emoji and a scale one.

For the scale effect, I am using a magic `cubic-bezier` function to create a transition from `1` to `0` to `1`. 

```css
  transition:
     filter .5s .5s,
     transform 1s cubic-bezier(0,26.67,.5,26.67);
```

I am detailing this technique in the below post:

{% post https://dev.to/this-is-learning/advanced-css-animation-using-cubic-bezier-nho %}

I am also adding a shake effect on hover where I am using another `cubic-bezier` detailed in the same post.

```css
transition:transform 0.25s cubic-bezier(0.5,400,0.5,-400);
```

---

### That's it!

All you have to do is to pick your emoji or an icon from Font Awesome and adjust the `--r` to control the size.

I made some trivial changes to the initial code to be able to use Font Awesome icons as we don't need to define `content` since the CSS of Font Awesome will do it for us.

{% codepen https://codepen.io/t_afif/pen/gOWRLGN %}

PS: The idea was inspired by a Stack Overflow question I answered a while ago: [How to make a sparkling button animation?](https://stackoverflow.com/a/54600583/8620333). It's the same effect with a few adjustments to my old code.