Feedback Radio Buttons by admin

1 Add to Favorites

HTML Code
CSS Code

.rating {
  cursor: pointer;
}

.card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 16, 0.19), 0 0.3rem 0.3rem rgba(0, 0, 16, 0.23);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 16, 0.19), 0 0.3rem 0.3rem rgba(0, 0, 16, 0.23);
  background-color: rgb(255, 255, 255);
  padding: 0.8rem;
  width: 33rem;
}

.rating-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.4rem 0.8rem;
  width: 100%;
}

.rating {
  background-color: rgba(0, 0, 16, 0.8);
  padding: 0.4rem 0.4rem 0.1rem 0.4rem;
  border-radius: 2.2rem;
}

.rating-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.svg {
  fill: rgb(242, 242, 242);
  height: 3.6rem;
  width: 3.6rem;
  margin: 0.2rem;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.rating-form-2 svg {
  height: 3rem;
  width: 3rem;
  margin: 0.5rem;
}

#radios label {
  position: relative;
}

.super-happy, [type="radio"] {
  position: absolute;
  opacity: 0;
}

.input ,[type="radio"] + svg {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.super-happy[class="super-happy"]:hover + svg,
.super-happy[class="super-happy"]:checked + svg,
.super-happy[class="super-happy"]:focus + svg {
  fill: rgb(0, 204, 79);
  transition: 1.5s;
}

.neutral[class="neutral"]:hover + svg,
.neutral[class="neutral"]:checked + svg,
.neutral[class="neutral"]:focus + svg {
  fill: rgb(232, 214, 0);
  transition: 1.5s;
}

.super-sad[class="super-sad"]:hover + svg,
.super-sad[class="super-sad"]:checked + svg,
.super-sad[class="super-sad"]:focus + svg {
  fill: rgb(239, 42, 16);
  transition: 1.5s;
}

Uploaded: 13th July 2024

Tags: #happy, #sad, #emoji, #feedback, #rounded, #options

CSSPortal

( admin )

We share content found online. We don't claim credit of anything posted here. If you see your work, let us know and we can move it to your account.

•Member since: 25th June 2024

•Website•X (Twitter)

CSS Properties Used

There are 16 CSS properties used in the above example. Click to view and learn about each property.

cursor display margin box-shadow background-color padding width justify-content border-radius flex-wrap fill height align-items position opacity transition

HTML Tags Used

There are 8 HTML Tags used in the above example. Click to view and learn about each tag.

html body div form label input svg path