<div class="feedback-container">
  <h3>How was your experience?</h3>
  <div class="emojis">
    <button class="emoji-btn" onclick="rate(0)">&#128544;</button>
    <button class="emoji-btn" onclick="rate(1)">&#128533;</button>
    <button class="emoji-btn" onclick="rate(2)">&#128528;</button>
    <button class="emoji-btn" onclick="rate(3)">&#128522;</button>
    <button class="emoji-btn" onclick="rate(4)">&#128525;</button>
  </div>
  <p id="msg">Click an emoji to rate</p>
</div>

.feedback-container {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #fff;
  padding: 30px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  max-width: 350px;
  margin: 0 auto;
}
h3 {
  color: #1f2937;
  margin-bottom: 20px;
}
.emojis {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
}
.emoji-btn {
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  transition: transform 0.2s, filter 0.2s;
  filter: grayscale(100%);
  opacity: 0.5;
}
.emoji-btn:hover, .emoji-btn.active {
  transform: scale(1.3);
  filter: grayscale(0%);
  opacity: 1;
}
#msg {
  color: #6b7280;
  font-weight: 500;
  height: 20px;
}

const btns = document.querySelectorAll(".emoji-btn");
const msg = document.getElementById("msg");
const texts = ["Terrible", "Bad", "Okay", "Good", "Amazing!"];

function rate(index) {
  btns.forEach(b => b.classList.remove("active"));
  btns[index].classList.add("active");
  msg.innerText = texts[index];
  msg.style.color = index < 2 ? "#ef4444" : index < 3 ? "#f59e0b" : "#10b981";
}

Back to Snippets

Emoji Rating Picker JS

Gather feedback in a fun way with this emoji rating bar. Users select a face that matches their experience, and the active state highlights their choice with a smooth animation and color change.

513

#javascript

#css

#rating

#emoji

#feedback

#form

#ui

/HTML *CSS ()JS Output Live Updates

Emoji Rating Picker JS

Share Code Snippet