Pure css accessible rating forms with cute animations on top.

<main>
    <headergroup>
      <h1> Starability.css</h1>
      <h2> Sugarcoated rating. Accessible to everyone. </h2>
    </headergroup>
    <form>
      <fieldset class="starability-basic">
        <legend>Basic rating:</legend>
        <input type="radio" id="no-rate-basic" class="input-no-rate" name="rating" value="0" checked="" aria-label="No rating.">

        <input type="radio" id="rate1" name="rating" value="1">
        <label for="rate1" title="Terrible">1 star</label>

        <input type="radio" id="rate2" name="rating" value="2">
        <label for="rate2" title="Not good">2 stars</label>

        <input type="radio" id="rate3" name="rating" value="3">
        <label for="rate3" title="Average">3 stars</label>

        <input type="radio" id="rate4" name="rating" value="4">
        <label for="rate4" title="Very good">4 stars</label>

        <input type="radio" id="rate5" name="rating" value="5">
        <label for="rate5" title="Amazing">5 stars</label>

        <span class="starability-focus-ring"></span>
      </fieldset>
    </form>

    <form>
      <fieldset class="starability-slot">
        <legend>Slot machine rating:</legend>
        <input type="radio" id="no-rate-slot" class="input-no-rate" name="rating" value="0" checked="" aria-label="No rating.">

        <input type="radio" id="slot-rate1" name="rating" value="1">
        <label for="slot-rate1" title="Terrible">1 star</label>

        <input type="radio" id="slot-rate2" name="rating" value="2">
        <label for="slot-rate2" title="Not good">2 stars</label>

        <input type="radio" id="slot-rate3" name="rating" value="3">
        <label for="slot-rate3" title="Average">3 stars</label>

        <input type="radio" id="slot-rate4" name="rating" value="4">
        <label for="slot-rate4" title="Very good">4 stars</label>

        <input type="radio" id="slot-rate5" name="rating" value="5">
        <label for="slot-rate5" title="Amazing">5 stars</label>

        <span class="starability-focus-ring"></span>
      </fieldset>
    </form>

    <form>
      <fieldset class="starability-grow">
        <legend>Growing star rating:</legend>
        <input type="radio" id="no-rate-grow" class="input-no-rate" name="rating" value="0" checked="" aria-label="No rating.">

        <input type="radio" id="grow-rate1" name="rating" value="1">
        <label for="grow-rate1" title="Terrible">1 star</label>

        <input type="radio" id="grow-rate2" name="rating" value="2">
        <label for="grow-rate2" title="Not good">2 stars</label>

        <input type="radio" id="grow-rate3" name="rating" value="3">
        <label for="grow-rate3" title="Average">3 stars</label>

        <input type="radio" id="grow-rate4" name="rating" value="4">
        <label for="grow-rate4" title="Very good">4 stars</label>

        <input type="radio" id="grow-rate5" name="rating" value="5">
        <label for="grow-rate5" title="Amazing">5 stars</label>

        <span class="starability-focus-ring"></span>
      </fieldset>
    </form>

    <form>
      <fieldset class="starability-growRotate">
        <legend>Growing &amp; rotating star rating:</legend>
        <input type="radio" id="no-rate-growRotate" class="input-no-rate" name="rating" value="0" checked="" aria-label="No rating.">

        <input type="radio" id="growRotate-rate1" name="rating" value="1">
        <label for="growRotate-rate1" title="Terrible">1 star</label>

        <input type="radio" id="growRotate-rate2" name="rating" value="2">
        <label for="growRotate-rate2" title="Not good">2 stars</label>

        <input type="radio" id="growRotate-rate3" name="rating" value="3">
        <label for="growRotate-rate3" title="Average">3 stars</label>

        <input type="radio" id="growRotate-rate4" name="rating" value="4">
        <label for="growRotate-rate4" title="Very good">4 stars</label>

        <input type="radio" id="growRotate-rate5" name="rating" value="5">
        <label for="growRotate-rate5" title="Amazing">5 stars</label>

        <span class="starability-focus-ring"></span>
      </fieldset>
    </form>

    <form>
      <fieldset class="starability-fade">
        <legend>Fading star rating:</legend>
        <input type="radio" id="no-rate-fade" class="input-no-rate" name="rating" value="0" checked="" aria-label="No rating.">

        <input type="radio" id="fade-rate1" name="rating" value="1">
        <label for="fade-rate1" title="Terrible">1 star</label>

        <input type="radio" id="fade-rate2" name="rating" value="2">
        <label for="fade-rate2" title="Not good">2 stars</label>

        <input type="radio" id="fade-rate3" name="rating" value="3">
        <label for="fade-rate3" title="Average">3 stars</label>

        <input type="radio" id="fade-rate4" name="rating" value="4">
        <label for="fade-rate4" title="Very good">4 stars</label>

        <input type="radio" id="fade-rate5" name="rating" value="5">
        <label for="fade-rate5" title="Amazing">5 stars</label>

        <span class="starability-focus-ring"></span>
      </fieldset>
    </form>
    <form>
      <fieldset class="starability-checkmark">
        <legend>Checkmark rating:</legend>
        <input type="radio" id="no-rate-checkmark" class="input-no-rate" name="rating" value="0" checked="" aria-label="No rating.">

        <input type="radio" id="checkmark-rate1" name="rating" value="1">
        <label for="checkmark-rate1" title="Terrible">1 star</label>

        <input type="radio" id="checkmark-rate2" name="rating" value="2">
        <label for="checkmark-rate2" title="Not good">2 stars</label>

        <input type="radio" id="checkmark-rate3" name="rating" value="3">
        <label for="checkmark-rate3" title="Average">3 stars</label>

        <input type="radio" id="checkmark-rate4" name="rating" value="4">
        <label for="checkmark-rate4" title="Very good">4 stars</label>

        <input type="radio" id="checkmark-rate5" name="rating" value="5">
        <label for="checkmark-rate5" title="Amazing">5 stars</label>

        <span class="starability-focus-ring"></span>
      </fieldset>
    </form>
    <form>
      <fieldset class="starability-heart">
        <legend>Heart rating:</legend>
        <input type="radio" id="no-rate-heart" class="input-no-rate" name="rating" value="0" checked="" aria-label="No rating.">

        <input type="radio" id="heart-rate1" name="rating" value="1">
        <label for="heart-rate1" title="Terrible">1 star</label>

        <input type="radio" id="heart-rate2" name="rating" value="2">
        <label for="heart-rate2" title="Not good">2 stars</label>

        <input type="radio" id="heart-rate3" name="rating" value="3">
        <label for="heart-rate3" title="Average">3 stars</label>

        <input type="radio" id="heart-rate4" name="rating" value="4">
        <label for="heart-rate4" title="Very good">4 stars</label>

        <input type="radio" id="heart-rate5" name="rating" value="5">
        <label for="heart-rate5" title="Amazing">5 stars</label>

        <span class="starability-focus-ring"></span>
      </fieldset>
    </form>
    <form>
      <fieldset class="starability-heartbeat">
        <legend>Heartbeat rating:</legend>
        <input type="radio" id="no-rate-heartbeat" class="input-no-rate" name="rating" value="0" checked="" aria-label="No rating.">

        <input type="radio" id="heartbeat-rate1" name="rating" value="1">
        <label for="heartbeat-rate1" title="Terrible">1 star</label>

        <input type="radio" id="heartbeat-rate2" name="rating" value="2">
        <label for="heartbeat-rate2" title="Not good">2 stars</label>

        <input type="radio" id="heartbeat-rate3" name="rating" value="3">
        <label for="heartbeat-rate3" title="Average">3 stars</label>

        <input type="radio" id="heartbeat-rate4" name="rating" value="4">
        <label for="heartbeat-rate4" title="Very good">4 stars</label>

        <input type="radio" id="heartbeat-rate5" name="rating" value="5">
        <label for="heartbeat-rate5" title="Amazing">5 stars</label>

        <span class="starability-focus-ring"></span>
      </fieldset>
    </form>
    <form>
      <fieldset class="starability-coinFlip">
        <legend>Coin Flip rating:</legend>
        <input type="radio" id="no-rate-coinFlip" class="input-no-rate" name="rating" value="0" checked="" aria-label="No rating.">

        <input type="radio" id="coinFlip-rate1" name="rating" value="1">
        <label for="coinFlip-rate1" title="Terrible">1 star</label>

        <input type="radio" id="coinFlip-rate2" name="rating" value="2">
        <label for="coinFlip-rate2" title="Not good">2 stars</label>

        <input type="radio" id="coinFlip-rate3" name="rating" value="3">
        <label for="coinFlip-rate3" title="Average">3 stars</label>

        <input type="radio" id="coinFlip-rate4" name="rating" value="4">
        <label for="coinFlip-rate4" title="Very good">4 stars</label>

        <input type="radio" id="coinFlip-rate5" name="rating" value="5">
        <label for="coinFlip-rate5" title="Amazing">5 stars</label>

        <span class="starability-focus-ring"></span>
      </fieldset>
    </form>
  </main>