Hand-picked Free CSS Emoji Rating. All the collections are Included with the demos and source codes.
About the Code
Feedback Rating CB911
CSS Emoji rating with client-side submit validation for rating 3 or under.
More info: Link
Dependency: emoji.css, jquery.min.js
About the Code
Rating Slider
More info: Link
Dependency: inter.min.css, JS – gsap.min.js, Draggable3.min.js, MorphSVGPlugin3.min.js, InertiaPlugin.min.js
About the Code
5 star emoji rating
5 star emoji rating system!
More info: Link
Dependency: jquery.min.js
About the Code
Alien Rating Control
Wanted to take a stab at making an animated “star rating” that is also accessible. It needs some more testing and tweaking with assistive technologies, but it’s in a good spot. The control is keyboard, mouse, and touch friendly, and also responds to the “prefers-reduced-motion” media query.
The avatar is SVG, created in Adobe Illustrator.
More info: Link
Dependency: gsap(3.0.5), MorphSVGPlugin3.min.js
About the Code
CSS Emoji rating
Pretty sure I’m not the first to think of this idea though
More info: Link
Dependency: jquery.min.js
About the Code
Sci-Fi Quotes Rating
A simple demo using React to rate some quotes from Sci-Fi authors.
Dependency: react.min.js, react-dom.min.js
About the Code
Ratings Inspiration
A couple of thoughts about rating interactions & animations
More info: Link
Dependency: CSS – RKQrdr.scss, JS – snap.svg(0.4.1)
Leave a Reply