Pulsante Mi piace

695 Viiper10

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

28 November 2025

Effetto passaggio del mouse sul pulsante CSS Liquid Glass

7 August 2025

Nascondi Div al clic del pulsante: avvia animazione

12 January 2025

Un codice di Mikeykun

HTML

<div class="like-unlike-radio">
  <div>
    <input
      checked=""
      id="like"
      name="feedback"
      value="like"
      class="custom-radio-fb"
      type="radio"
    />
    <label for="like" class="feedback-label">
      <svg
        class="icon"
        width="27"
        height="27"
        viewBox="0 0 27 27"
        fill="currentColor"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M0.7229 26.5H5.92292V10.9008H0.7229V26.5ZM26.6299 15.2618L24.372 23.7566C23.9989 25.3696 22.5621 26.5 20.9072 26.5H8.52293V10.9278L10.7573 2.87293C10.9669 1.50799 12.1418 0.5 13.524 0.5C15.0699 0.5 16.323 1.7527 16.323 3.29837V10.8998H23.1651C25.4519 10.9009 27.1453 13.0335 26.6299 15.2618Z"
          fill="currentColor"
        ></path>
      </svg>
      Like
    </label>
  </div>
  <div>
    <input
      name="feedback"
      value="unlike"
      id="unlike"
      class="custom-radio-fb"
      type="radio"
    />
    <label for="unlike" class="feedback-label">
      <svg
        class="icon"
        width="27"
        height="27"
        viewBox="0 0 27 27"
        fill="currentColor"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M26.7229 0.5L21.5229 0.5L21.5229 16.0992L26.7229 16.0992L26.7229 0.5ZM0.815853 11.7382L3.07376 3.24339C3.44687 1.63037 4.88372 0.500027 6.53861 0.500027L18.9229 0.500028L18.9229 16.0722L16.6885 24.1271C16.4789 25.492 15.304 26.5 13.9218 26.5C12.3759 26.5 11.1228 25.2473 11.1228 23.7016L11.1228 16.1002L4.28068 16.1002C1.99391 16.0991 0.300502 13.9664 0.815853 11.7382Z"
          fill="currentColor"
        ></path>
      </svg>
      Unlike
    </label>
  </div>
</div>

CSS

/* From Uiverse.io by Zain-Muhammad */ 
.like-unlike-radio {
  --inactive-color: #515254;
  --active-color: #1877f2;
  --hover: #515254;
  display: flex;
  align-items: center;
  column-gap: 24px;
  flex-shrink: 0;
}
.like-unlike-radio .custom-radio-fb {
  display: none;
}
.like-unlike-radio .feedback-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--inactive-color);
  margin: 0;
  cursor: pointer;
  transition: 0.2s ease-in-out;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
}
.like-unlike-radio .feedback-label:hover {
  color: var(--hover);
}
.icon {
  transition: 0.2s ease-in-out;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
}
.like-unlike-radio .feedback-label:hover .icon {
  transform: scale(1.3);
}
.like-unlike-radio .custom-radio-fb:checked ~ .feedback-label {
  color: var(--active-color);
}
.like-unlike-radio .custom-radio-fb:checked ~ .feedback-label svg {
  animation: keyframes-fill 0.2s ease-in-out;
}
/* ------ Animation ------ */
@keyframes keyframes-fill {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(-10deg);
  }
}

Consigliato

Effetto passaggio del mouse sul pulsante CSS Liquid Glass

Nascondi Div al clic del pulsante: avvia animazione

Un codice di Mikeykun

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS