Great looking collection of Hexagonal Badges created by Codepen user Olivia. They feature Font Awesome icons and titles for each of the player role...

Great looking collection of Hexagonal Badges created by Codepen user Olivia. They feature Font Awesome icons and titles for each of the player roles in Dota 2. 

A pure CSS developed badge made out of ribbons that allows you to feature a text inside it, perfect for featuring awards and prices.

A pure CSS developed badge made out of ribbons that allows you to feature a text inside it, perfect for featuring awards and prices.

Nightcoregirl created this charming and elegant badge which is built in pure CSS. It has two types of typography, one italic and the other regular,...

Nightcoregirl created this charming and elegant badge which is built in pure CSS. It has two types of typography, one italic and the other regular, contained in a circle in a color black, giving it a sleek appearance, and making it perfect to highlight any type of product or service. The CSS and HTML are very light, so the impact of the element in page load is non-existent.

This logo was created purely in CSS and it scales up on hover. The author used JavaScript for circular placement of elements, then just copied the ...

This logo was created purely in CSS and it scales up on hover. The author used JavaScript for circular placement of elements, then just copied the generated CSS to stylesheet. Everything is created using CSS3 shapes. For the outer semi-circles and the dashed border, 36 separate divs are used by both of them which are then placed according to the design. The animation is done by using transitions and scale transforms. These animations are not supported in IE so you won’t see the transition, but it’ll jump to the new size on hover. For noise-like background, the author used two linear gradients.