CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
.home
~
.explore

Rating

<style>
.p-rating {
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;

    flex-direction: row-reverse;

    font-size: 32px;
}

.p-rating .p-rating-star:hover,
.p-rating .p-rating-star:hover ~ .p-rating-star {
    color: transparent;
}

/*
Make all previous stars selected when hover on a star
Note that we use `flex-direction: row-reverse` on the container
*/
.p-rating .p-rating-star:hover:before,
.p-rating .p-rating-star:hover ~ .p-rating-star:before {
    color: #00449e;
    content: '\2605';
    left: 0;
    position: absolute;
}

.p-rating-star {
    /* Reset styles for button */
    background-color: transparent;
    border: transparent;
    margin: 0 2px;
    padding: 0;

    /* Used to postion the hover state */
    position: relative;
}
</style>

<div class="p-rating">
    <button class="p-rating-star"></button>
    <button class="p-rating-star"></button>
    <button class="p-rating-star"></button>
    <button class="p-rating-star"></button>
    <button class="p-rating-star"></button>
</div>
Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!