→ Mason Ashford
→ Interactive Star Rating

Interactive Star Rating

A dynamic star rating component where users can select their rating by clicking on stars. The rating can range from 1 to 5 stars, offering immediate visual feedback on hover and selection.

This bootstrap css example is contributed by Mason Ashford, on 23-Nov-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example is Vote

Tags: Rating

Author Mason Ashford

9.6k

v.5.3

Fork Fullscreen

.star-rating input {
        display: none;
    }

.star-rating label {
        color: #ddd;
        font-size: 24px;
        padding: 0 2px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

.star-rating label:hover,
    .star-rating label:hover~label,
    .star-rating input:checked~label {
        color: #ffc107;
    }
</style>

More Examples

Rating section
Rating section fit form for taking user ratings and reviews

Author:
Tane Mahuta

1 year ago

2.4k

v.5.3
Emoji Rating
An alternative, fun way for users to rate with emojis ranging from angry to love. Hovering over the emojis gives a playful animation effect, encouraging user interaction.

Author:
Mason Ashford

10 months ago

2.1k

v.5.3
Beautiful Rating Component
Take user ratings with this form card

Author:
Mateo Rojas

9 months ago

1.5k

v.5.3
Interactive Star Rating
A dynamic star rating component where users can select their rating by clicking on stars. The rating can range from 1 to 5 stars, offering immediate visual feedback on hover and selection.

Author:
Anonymous

4 months ago

999

v.5.3
Star Rating Component

Author:
Alaric Sloane

1 year ago

3.7k

v.5.3
Search section with category filter

Author:
Mateo Rojas

9 months ago

4.5k

v.5.3
Footer
Simple footer with social icons

Author:
Prajwal Hallale

1 year ago

10.4k

v.5.3
Customer testimonials
modern and clean customer review section

Author:
Anonymous

9 months ago

2.3k

v.5.3
HTML and CSS for Hero Section
Explanation: HTML: Hero Section: Uses a background image with a gradient overlay. Hero Content: Centered with a title, subtitle, and a call-to-action button. CSS: Hero Section Styling: Full viewport height with a gradient overlay for better text readability and a background image. Hero Content Styling: Centered with responsive padding and font sizes. Button Styling: Custom button colors and hover effects. Background Image: Placeholder URL: Replace 'https://via.placeholder.com/1920x1080' with the actual URL of your hero image

Author:
zobaidul kaziex

1 year ago

2.2k

v.4.6
Bootstrap comment box with reply
Comment form design

Author:
Ankit khedkar

1 year ago

6.5k

v.5.3
Pulsing Button with Bootstrap 5

Author:
Andreas Müller

1 year ago

1.9k

v.5.3
Team Section with Bootstrap 5

Author:
Arturo

9 months ago

2.1k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent