right click to check the code,
it uses HTML(4.1) and CSS(3.1),
the state is kept using input type=”radio” (only one can be selected out of the group),
and the z-index makes sure everyone is clickable,
nesting labels allows styling without the actual HTML element,
and using text stored in attributes reduces the use of too “node-specific” css-rules.
you can wrap it with a form, add some keyframe animation or transition to make things smooth
and an submit button.
Usually you’ll see it in form of “stars” or “hearts”, this way it uses emoji… :]
Here is a simpler examples, where the moji is the same for each of the check states,
it forms a much simpler, but clear result.
with a “lower-layer” being set as a little more transparent than the selected color,
and still using same emoji for selected/unselected, the effect is much more clear,
and the “lags” of under-layer elements is less visible…
also available here: