Free Component
Interactive Star Rating Widget
A 5-star customer review rating widget with golden hover effects, click selection, and dynamic text feedback.
Colours in this gradient
#0f172a#f59e0b#fbbf24#ffffff
background: ;The code
Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.
<div class="rating-wrapper">
<div class="rating-card">
<div class="rating-badge">Customer Feedback</div>
<div class="rating-heading">How was your experience?</div>
<div class="rating-sub">Tap a star to rate our platform</div>
<div class="rating-stars" id="starsContainer">
<button class="star-btn" data-rating="1" aria-label="1 star">★</button>
<button class="star-btn" data-rating="2" aria-label="2 stars">★</button>
<button class="star-btn" data-rating="3" aria-label="3 stars">★</button>
<button class="star-btn" data-rating="4" aria-label="4 stars">★</button>
<button class="star-btn" data-rating="5" aria-label="5 stars">★</button>
</div>
<div class="rating-feedback" id="ratingFeedback">Select a rating</div>
<button class="rating-submit" id="ratingSubmitBtn">Submit Review</button>
</div>
</div>The AI prompt
Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.
Create an interactive 5-star rating feedback widget in HTML, CSS and vanilla JavaScript. Requirements: - Centered card with dark theme and subtle gold accents. - 5 star buttons that scale up on hover with gold glow text-shadow. - Hover state illuminates all stars up to cursor position and updates description text. - Click locks in the score and colors the stars active. - Submit button that updates state on completion. Return one HTML file with <style> and <script> tags.
How to build it, step by step
- 1
Use data-rating attributes on 5 star button elements.
- 2
Handle mouseenter/mouseleave for preview illumination.
- 3
Handle click event to permanently store selected rating state.
Customisation tips
- Use cubic-bezier spring easing on star hover to give bouncy tactile feel.
- Support keyboard arrow keys and aria-label values for accessibility.