Share on facebook
Share on reddit
Share on twitter
Share on pinterest
Share on tumblr
Share on whatsapp

Pure CSS reaction component with one element

Share on facebook
Share on twitter
Share on linkedin
Share on tumblr
Share on whatsapp
Share on pinterest

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.



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

For this to work. You must set the data-reaction attribute to whatever the

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.


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;

OK (200). We’re good to go. So, here’s a CodePen.

INFO: If you can please don’t forget to star this framework on Github.

Subscribe on YouTube

Leave a Reply

Your email address will not be published. Required fields are marked *

Request a tutorial if you didn't find what you need.