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=”–c…


This content originally appeared on DEV Community and was authored by Posandu Mapa

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 preview

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.


This content originally appeared on DEV Community and was authored by Posandu Mapa


Print Share Comment Cite Upload Translate Updates
APA

Posandu Mapa | Sciencx (2021-08-01T03:20:14+00:00) Pure CSS reaction component with one element. Retrieved from https://www.scien.cx/2021/08/01/pure-css-reaction-component-with-one-element/

MLA
" » Pure CSS reaction component with one element." Posandu Mapa | Sciencx - Sunday August 1, 2021, https://www.scien.cx/2021/08/01/pure-css-reaction-component-with-one-element/
HARVARD
Posandu Mapa | Sciencx Sunday August 1, 2021 » Pure CSS reaction component with one element., viewed ,<https://www.scien.cx/2021/08/01/pure-css-reaction-component-with-one-element/>
VANCOUVER
Posandu Mapa | Sciencx - » Pure CSS reaction component with one element. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/01/pure-css-reaction-component-with-one-element/
CHICAGO
" » Pure CSS reaction component with one element." Posandu Mapa | Sciencx - Accessed . https://www.scien.cx/2021/08/01/pure-css-reaction-component-with-one-element/
IEEE
" » Pure CSS reaction component with one element." Posandu Mapa | Sciencx [Online]. Available: https://www.scien.cx/2021/08/01/pure-css-reaction-component-with-one-element/. [Accessed: ]
rf:citation
» Pure CSS reaction component with one element | Posandu Mapa | Sciencx | https://www.scien.cx/2021/08/01/pure-css-reaction-component-with-one-element/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts