<style>$green: #8FC54F;@mixin transition { transition: 0.3s;}
body { //text-align: center; color: #555; background-color: #f3f3f3; padding: 40px;}
.star-widget { cursor: pointer; transition: 0.3s;}
/* default */.star-widget__star-icon { font-size: 25px; color: #FFBF00; @include transition;}
.star-widget__count-box { display: inline-block; background-color: #CCC; padding: 2px 5px 2px 8px; border-radius: 5px; position: relative; top: -3px; margin: 0 3px; text-align: center; @include transition; &:before { content: ''; border: 4px solid transparent; border-right-color: #CCC; border-right-width: 5px; position: absolute; top: 7px; left: -9px; @include transition; }} .star-widget__count:before { content: '0'; font-size: 13px; color: #666; @include transition;}
.star-widget__tick { display: inline-block; font-size: 16px; color: white; opacity: 0; overflow: hidden; margin-left: -12px; vertical-align: middle; @include transition;} .star-widget:hover { .star-widget__count-box { background-color: #BBB; &:before { border-right-color: #BBB; } }}
/* checked */#star-widget-checkbox:checked + .star-widget { .star-widget__star-icon { color: #AAA; } .star-widget__count-box { background-color: $green; &:before { border-right-color: $green; } } .star-widget__count:before { content: '1'; color: white; } .star-widget__tick { opacity: 1; margin-left: 0px; }}
#star-widget-checkbox { display: none;}</style>
<label for="star-widget-checkbox"> <input type="checkbox" id="star-widget-checkbox"> <div class="star-widget"> <span class="star-widget__star-icon">★</span> <div class="star-widget__count-box"> <strong class="star-widget__count"></strong> <div class="star-widget__tick">✓</div> </div> </div></label>
