HTML + CSSCheckboxes
Spinning star checkbox
An outlined star that turns with a spring and fills with a warm glow when you check it.
Settings
16px
1x
Code
<label class="uv-cst"><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8l2.75 5.6 6.15.9-4.45 4.33 1.05 6.12L12 16.87l-5.5 2.88 1.05-6.12L3.1 9.3l6.15-.9z"/></svg></span>Feature this project</label>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Checkboxes
See all CheckboxesWhere to use it
Use it wherever people mark something as important: starring a project in a dashboard, saving a recipe, pinning a contact or flagging an email. The checkbox is a real input hidden behind an SVG star, so it works with the keyboard, keeps its focus ring and tells screen readers whether it is checked.
On check the star rotates one point, scales a touch and picks up a soft glow in the main color, while the second color tints the tile behind it. Gold reads as favorite, blue or violet as pinned.