→ 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

5.2k

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

9 months ago

1.2k

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

5 months ago

1.3k

v.5.3
Star Rating Component

Author:
Alaric Sloane

7 months ago

2.1k

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

Author:
Mateo Rojas

4 months ago

770

v.5.3
Contact Us Page with Google Maps and Form Validation
HTML: Form Fields: Includes fields for name, email, and message. Google Map: A div with an id of map where the Google Map will be displayed. Feedback Elements: <div> elements for displaying validation messages and success messages. CSS: Styling: Adds padding for the contact section, sets the map height, and styles feedback and success messages. JavaScript: Google Maps Initialization: Uses the Google Maps JavaScript API to create and display a map centered at specified coordinates. Replace YOUR_GOOGLE_MAPS_API_KEY with your actual API key. Form Validation: Validates the input fields and displays appropriate messages if the input is invalid or missing. How to Use: Replace API Key: Insert your Google Maps API key in the script tag for Google Maps. Customize Coordinates: Update the latitude and longitude in the initMap function to reflect your actual location. Validation Rules: Customize validation logic as needed for your form requirements.

Author:
zobaidul kaziex

8 months ago

4.8k

v.4.6
for me
A modern and visually appealing card component with a gradient background and hover effect.

Author:
Jimmy Mercury

4 months ago

732

v.5.3
Fancy Arrow Breadcrumb

Author:
Mateo Rojas

4 months ago

331

v.5.3
Spinner buttons
Loading spinner buttons

Author:
Mishti

1 year ago

1k

v.5.3
Premium Gradient Pricing Card
An eye-catching subscription component with interactive hover effects and clear feature presentation

Author:
Mason Ashford

5 months ago

509

v.5.3
Button group
solid button group

Author:
Mishti

1 year ago

528

v.5.3
Bootstrap 5 Login Modal

Author:
Anonymous

9 months ago

8.3k

v.5.3
Bootstrap Tab Example
Bootstrap Tab Example Basic Part 1

Author:
StarCode Kh

2 months ago

613

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent