Create an Animated Star Rating System using HTML and CSS

Elevate user engagement on your website by implementing a dynamic star rating system! In this comprehensive tutorial, we'll guide you through the creation of an interactive star rating component using HTML and CSS. 

Also Read: Dynamic Weather animations using HTML CSS

The rating system not only allows users to express their feedback visually but also adds a touch of creativity with animated emojis. Let's dive into the intricacies of this captivating implementation.

HTML Structure

<div class="main-container">
    <div class="rating-box">
        <input type="radio" id="rating-5" name="rating" hidden>
        <label for="rating-5" class="fas fa-star"></label>

        <input type="radio" id="rating-4" name="rating" hidden>
        <label for="rating-4" class="fas fa-star"></label>

        <input type="radio" id="rating-3" name="rating" hidden>
        <label for="rating-3" class="fas fa-star"></label>

        <input type="radio" id="rating-2" name="rating" hidden>
        <label for="rating-2" class="fas fa-star"></label>

        <input type="radio" id="rating-1" name="rating" hidden>
        <label for="rating-1" class="fas fa-star"></label>

        <div class="emojis"></div>
    </div>
</div>

The "main-container" acts as the main container, ensuring a centered display on the webpage. It embraces the entire rating system.  Inside it, the "rating-box" encapsulates the individual star elements and the emoji feedback container. Each star is represented by an input of type radio and a corresponding label. 

The hidden attribute ensures the radio inputs are not visible, allowing us to control them programmatically. The class="fas fa-star" on each label introduces Font Awesome icons, styling the labels as stars. The "emojis" will serve as the container for dynamic emoji feedback based on the selected rating.

CSS Styling

With our HTML structure in place, let's delve into the CSS styling that will breathe life into our dynamic star rating system. The overall layout, star design, color animations, and creative emoji feedback are key aspects we'll explore in this section.

Overall Layout

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.css');

.main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 450px;
    min-height: 100vh;
}

.rating-box {
    gap: 20px;
    display: flex;
    position: relative;
    flex-direction: row-reverse;
}

#main-container ensures a centered display on the webpage using flexbox properties for alignment and justification.  "rating-box" is the container for our star elements. The use of gap provides spacing between the stars, and flex-direction: row-reverse ensures a natural reading flow from right to left.

Star Design and Dynamic Color Animation

.rating-box label {
    font-size: 45px;
    cursor: pointer;
}

input:not(:checked)~label {
    color: #eeeeee3a;
    transition: .3s;
}

input:checked~label {
    color: #ffa534;
    animation: filling-animation .7s forwards;
    filter: drop-shadow(0px 0px 10px #ffffff3f);
}

The input:not(:checked)~label styles the unchecked stars. The color property sets the initial color to a semi-transparent light gray, and the transition property ensures a smooth color transition over 0.3 seconds. The input:checked~label styles the checked stars. 

The color property changes to a vibrant orange (#ffa534). The animation property triggers the filling-animation over 0.7 seconds, and the forwards value retains the final state of the animation. The filter property adds a drop shadow to the checked star, providing a subtle 3D effect.

Now that we've added color dynamics to our stars, let's incorporate emoji feedback based on the selected rating. This creative touch adds a personalized element to our star rating system.

Also Read: Fingerprint Scanning Animation using HTML and CSS

Emoji Feedback

The emojis will dynamically change based on the selected rating. We'll position the emoji container and define the emojis for each rating level.

.emojis {
    width: 100%;
    height: fit-content;
    position: absolute;
    text-align: center;
    bottom: -80px;
    font-size: 40px;
    color: white;
    filter: drop-shadow(0px 0px 10px #ffffff3f);
}

#rating-1:checked~.emojis::after {
    content: '😞';
}

#rating-2:checked~.emojis::after {
    content: '😐';
}

#rating-3:checked~.emojis::after {
    content: '🙂';
}

#rating-4:checked~.emojis::after {
    content: '😃';
}

#rating-5:checked~.emojis::after {
    content: '😍';
}

@keyframes filling-animation {

    0%,
    100% {
        transform: scale(1);
    }

    30% {
        transform: scale(0);
    }

    60% {
        transform: scale(1.2);
    }

}

The 'emojis'  is positioned absolutely at the bottom of the star rating box, ensuring it doesn't disrupt the layout. The ::after pseudo-element is used to insert emojis based on the selected rating. The content property defines the emoji characters.

With this, we've completed the CSS styling for our dynamic star rating system. Users can now interact with the stars, and the system provides both visual and emotional feedback.

As we conclude this tutorial, you'll have a deep understanding of creating a visually appealing and interactive star rating system. The combination of HTML and CSS, with the potential addition of JavaScript, allows you to implement this feature seamlessly into your web projects. Stay tuned for a delightful journey into web design creativity.

Download