Emoji Reaction Rating

<div class="em" id="em"><button data-v="1">😞</button><button data-v="2">😕</button><button data-v="3">😐</button><button data-v="4">🙂</button><button data-v="5">😍</button></div>
<div class="em-out" id="emOut">How was it?</div>

body{background:#f6f7fa;flex-direction:column;gap:16px}
.em{display:flex;gap:6px;background:#fff;padding:10px;border-radius:16px;box-shadow:0 8px 24px rgba(20,25,50,.08)}
.em button{font-size:30px;border:0;background:0;cursor:pointer;width:50px;height:50px;border-radius:12px;filter:grayscale(1);opacity:.5;transition:.2s}
.em button:hover{filter:none;opacity:1;transform:scale(1.3) translateY(-4px)}
.em button.sel{filter:none;opacity:1;background:#fff5f7;transform:scale(1.15)}
.em-out{font:700 16px/1 system-ui,sans-serif;color:#5a627a}

var L={1:'Awful 😞',2:'Bad 😕',3:'Okay 😐',4:'Good 🙂',5:'Love it! 😍'};
document.querySelectorAll('.em button').forEach(function(b){b.onclick=function(){document.querySelectorAll('.em button').forEach(function(x){x.classList.remove('sel')});b.classList.add('sel');document.getElementById('emOut').textContent=L[b.dataset.v]}});