Posted on Aug 1, 2021 • Originally published at tronic247.com

Pure CSS reaction component with one element

In this post I will share you a pure CSS reaction component that is made from one element. I also built it accessibility in mind. Here's a preview of that.

The HTML

<input type="checkbox" class="reaction" data-reaction="🦄" style="--color:#31d2f7">

For this to work. You must set the data-reaction attribute to whatever the emoji you want. And Change the CSS variable --color to the color of that emoji.

Quick TIP: If you are a Windows 10 user, press the Windows Key + ; to get a list of emojis.

The CSS

Here's the good part

.reaction { height: 100px; width: 100px; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 50px; position: relative; background: white; outline: none; cursor: pointer; border: 1px solid transparent; -webkit-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; color: var(--color); } .reaction:hover:before { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 0.2; } .reaction:before { content: ""; pointer-events: none; position: absolute; top: 0; left: 0; border-radius: 100px; height: 100%; width: 100%; -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); opacity: 0; -webkit-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; background: #000; } .reaction:checked:before { background: var(--color); } .reaction:checked:focus { border-color: var(--color); } .reaction:focus { border-color: #000; } .reaction:after { -webkit-filter: grayscale(1); filter: grayscale(1); content: attr(data-reaction); position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 30px; -webkit-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .reaction:checked { -webkit-filter: none; filter: none; -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); text-shadow: 0px 10px 20px var(--color); } .reaction:checked:after { -webkit-transform: translate(-50%, -50%) rotate(-360deg); -ms-transform: translate(-50%, -50%) rotate(-360deg); transform: translate(-50%, -50%) rotate(-360deg); -webkit-filter: none; filter: none; }