Skip to main content

Was this helpful?

Less than 1 minuteCSSSnippetscssscsssasssnippetscommant

Was this helpful? κ΄€λ ¨

CSS > Snippets
Snippets
Was this helpful?
<section class="review">
  <h4 class="review__title">Was this helpful?</h4>
  <ul class="review__list">
    <li class="review__list__item">😭</li>
    <li class="review__list__item">πŸ˜•</li>
    <li class="review__list__item">πŸ˜€</li>
    <li class="review__list__item">😍</li>
  </ul>
</section>

.review {
  min-width:18rem;padding:3rem;border-top:1px solid rgba(#1a202c, 0.15);border-bottom:1px solid rgba(#1a202c, 0.15);
}
.review .review__title {
  margin-top:0;text-align:center;font-weight:700;font-size:1.2rem;
}
.review .review__list {
  list-style-type:none;margin:0;padding:0;display:flex;justify-content:space-between;
}

.review .review__list .review__list__item {
    font-size:1.6rem;user-select:none;filter:grayscale(1);transition:filter 0.2s, transform 0.2s;
}

.review .review__list .review__list__item:hover {
  cursor:pointer;filter:grayscale(0);transform:scale(1.4);
}