//HTML <div class="container"> <div class="star-widget"> <input type="radio" name="rate" id="rate-5" /> <label for="rate-5" class="fas fa-star"></label> <input type="radio" name="rate" id="rate-4" /> <label for="rate-4" class="fas fa-star"></label> <input type="radio" name="rate" id="rate-3" /> <label for="rate-3" class="fas fa-star"></label> <input type="radio" name="rate" id="rate-2" /> <label for="rate-2" class="fas fa-star"></label> <input type="radio" name="rate" id="rate-1" /> <label for="rate-1" class="fas fa-star"></label> </div> </div> //CSS html, body { display: grid; height: 100%; place-items: center; text-align: center; background-color: rgb(16, 16, 16); } .container { width: 400px; background-color: #111; padding: 20px 30px; border: 1px solid #444; border-radius: 5px; display: flex; align-items: center; justify-content: center; } /* STARS */ .star-widget input { display: none; } .star-widget label { font-size: 40px; color: #444; padding: 10px; float: right; cursor: pointer; transition: all 0.2s ease; } input:not(:checked) ~ label:hover, input:not(:checked) ~ label:hover ~ label { color: #fd4; } input:checked ~ label { color: #fd4; } input#rate-5:checked ~ label { color: #fe7; text-shadow: 0 0 20px #952; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter