A game-style HP bar embedded in the button body. On hover, the bar drains from 100% to 28% over 800ms with a CSS width transition; the bar colour transitions green→yellow→red based on the remaining HP percentage. HP values and a status label update accordingly.
Create a game-style HP bar button. Layout: flex-column button with label row (name + HP numbers), HP bar track, and status text. On hover: - Bar width transitions from 100% to 28% over 800ms - Bar colour transitions: green (>60%) → yellow (>30%) → red The bar colour is computed from percentage and applied to both background and box-shadow glow. No library dependencies; pure CSS transitions + React state.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.