Vybe Sync
Tools
Color ContrastDesign Spy
Animations
ButtonsCards
InputsLoaders
TogglesCheckbox
Radio
Resources
Chrome ExtensionFigma Plugin
Company
BlogAbout Us
← Buttons

Health Bar

No library Beginner

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.

LLM Prompt
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.

Vybe Sync

Tools

  • Contrast Checker
  • Design Spy

Resources

  • Chrome Extension
  • Figma Plugin

Animations

  • Components
  • Inspiration

Company

  • Blog
  • About Us

© 2026 VybeSync

Terms of UsePrivacy Policy