13 Cool CSS Emoji Rating

About the Code

Feedback Reactions

More info: Link

Dependency: –

About the Code

Pure HTML/CSS monochrome emoji rating

More info: Link

Dependency: –

About the Code

Animated CSS Emoji Rating Bar

More info: Link

Dependency: –

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

Simple CSS Emoji star rating

Inspired by Zheng’s Rate us 5 stars on Dribbble

More info: Link

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

Stars rating animation

More info: Link

Dependency: jquery.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.

More info: Link

Dependency: react.min.js, react-dom.min.js

About the Code

Rating with faces

More info: Link

Dependency: jquery.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)