→ 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

2.1k

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

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

3 months ago

587

v.5.3
Rating section
Rating section fit form for taking user ratings and reviews

Author:
Tane Mahuta

7 months ago

633

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

Author:
Mateo Rojas

2 months ago

323

v.5.3
Star Rating Component

Author:
Alaric Sloane

5 months ago

1.1k

v.5.3
Copy Code Section
Code block with working copy option

Author:
Kemaya m

7 months ago

824

v.5.3
Pill Buttons

Author:
Prajwal Hallale

11 months ago

460

v.4.6
Clean hero section with image

Author:
Prajwal Hallale

11 months ago

699

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

Author:
Mateo Rojas

2 months ago

326

v.5.3
Responsive footer using HTML and Bootstrap:
HTML: Error Title: A large, bold number (e.g., 404) to indicate the error type. Error Message: A brief message explaining the error. Button: A button to navigate back to the home page. Adjust the href attribute to point to your actual home page URL. CSS: Background Gradient: Applied to the body to give a stylish look. Error Container: Centered on the page with a semi-transparent background for contrast. Button Styling: Custom colors for the button, including hover effects. How to Use: Create an error.html file and paste the above code into it. Place the error.html file in your web server’s error pages directory or configure your server to serve this file on error.

Author:
zobaidul kaziex

5 months ago

1.2k

v.4.6
Featured Product Card

Author:
Prajwal Hallale

11 months ago

442

v.5.3
Timer with bootstrap

Author:
Anonymous

2 months ago

523

v.5.3
Interactive Team Member Card with Flip Effect

Author:
Reza Farhadi

5 months ago

859

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent