---
title: strange-fox-68
made_by: ahmed150up
---

```css
input[type='checkbox'] {
  display: none;
}

label svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: #000;
  stroke-width: 2px;
}

input[type='checkbox']:checked + label svg {
  fill: #ffc107;
  animation: pop_42 0.5s ease-out;
}

@keyframes pop_42 {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.5);
  }

  100% {
    transform: scale(1);
  }
}
```

```html
<input type="checkbox" id="star" />
<label for="star">
  <svg viewBox="0 0 24 24">
    <path
      d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
    ></path>
  </svg>
</label>
```
