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;
}
OK (200). We're good to go. So, here's a CodePen.
And if you like this post press the button 💖. And send a comment !
INFO: If you can please don't forget to star this framework on Github.
Top comments (0)