CSS 5 Star Rating

Publish Your Code

<html>
            <head>
              <meta charset="utf-8" />
              <title>Webleb</title>
              <link href="/css/styles.css" rel="stylesheet" type="text/css" />
            </head>
            <body>
                <form>
                    <div class="rating">
                        <input type='radio' hidden name='rate' id='rating_5' data-idx='0'>	
                        <label for='rating_5'></label>
                    
                        <input type='radio' hidden name='rate' id='rating_4' data-idx='1'>
                        <label for='rating_4'></label>
                    
                        <input type='radio' hidden name='rate' id='rating_3' data-idx='2'>
                        <label for='rating_3'></label>
                    
                        <input type='radio' hidden name='rate' id='rating_2' data-idx='3'>
                        <label for='rating_2'></label>
                    
                        <input type='radio' hidden name='rate' id='rating_1' data-idx='4'>
                        <label for='rating_1'></label>
                    </div>
                </form>
            </body>
            </html>

styles.css

body {
            background: #e2e1d9;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow-y: hidden;
        }
        .rating {
            display: inline-block;
            font-size: 0;
            position: relative;
            text-transform: capitalize;
            padding: 0 50px 8%;
            color: gray;
        }
        .rating label {
            display: inline-block;
            float: right;
            padding: 0;
            font-size: 50px;
            cursor: pointer;
        }
        .rating label::before {
            content: "\2606";
            display: inline-block;
            transition: 0.2s;
        }
        .rating label span {
            opacity: 0;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            text-align: center;
            height: 20px;
            font-size: 1rem;
            white-space: nowrap;
            transition: 0.15s ease-out;
            pointer-events: none;
            letter-spacing: -2px;
            transform: translateY(-50%);
        }
        .rating label:hover span {
            opacity: 1;
            transform: none;
            letter-spacing: 0;
        }
        .rating label:hover::before {
            color: orange;
            opacity: 0.6;
            filter: drop-shadow(0 0 4px);
        }
        .rating label:hover ~ *::before {
            color: orange;
            opacity: 0.6;
            filter: drop-shadow(0 0 4px);
        }
        .rating input:checked ~ label::before {
            content: "\2605";
            color: orange;
            filter: drop-shadow(0 0 4px);
            transform: rotate(0.2turn);
            transition-delay: calc(0.1 * attr(data-idx integer));
        }

CSS 5 Star Rating

Recommended

CSS Animated Background with Shapes and Text

Animated Login Form HTML CSS

CSS Brain Animation HTML Snippet

index.html

styles.css

main.js

Recommended

CSS Animated Background with Shapes and Text

Animated Login Form HTML CSS

CSS Brain Animation HTML Snippet

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js