8 CSS & JavaScript Snippets for Creating Gamification Badges

If you spend enough time online, the chances are that you’ve earned an untold number of badges. You might even be earning one at this very moment.

Social media services, retailers, and even Google Maps provide them for completing all sorts of otherwise-mundane tasks. They represent an easy way to make things fun and keep users engaged.

Badges can also produce some exciting examples of design. They can be anything from a plain graphic to a fully-animated experience. Plus, they challenge us to see how much goodness we can fit into a small space.

Today, we’ll check out some of the creative CSS and JavaScript bling that web designers can bring to badges. We’ll cover a variety of styles and levels of complexity. You won’t earn any badges for browsing, but at least you’ll get some inspiration!

That’s So Font Awesome by Olivia Ng

Font Awesome icons are a perfect centerpiece for a badge. With the number of available icons, you can create one around literally any subject. Here we have some beautiful hexagon-shaped badges that include the popular font icon library. They’re incredibly slick and colorful, and it makes you want to collect them all.

See the Pen Hexagon Badges with Font Awesome icons by Olivia Ng

Ever Been to Berlin? by Antoinette Janus

There is a simple beauty in this Berlin skyline badge. First, the retro gradient color scheme looks like it would make for a terrific t-shirt. Then there are the subtly animated features that bring a sense of calm. The attention to detail makes it all come together.

See the Pen Dribbble Recreation:Berlin Badge by Antoinette Janus

No, But I’ve Been to Tatooine by LukyVJ

While this example is a few years old, it holds up really well (as does everything Star-Wars related). Again, the designer chose simplicity rather than jamming it full of extras. But the result is still compelling. Plus, the included “Night Mode” makes for a cool change of scenery.

See the Pen Tatooine Badge by LukyVJ

It’s a Material World by Rasmus Bergström

Google’s Material Design has become a pretty big hit with designers. Here, we see a “verified” badge inspired by the design language. It shows great color and depth, making this example very easy on the eyes.

See the Pen Material design verified badge by Rasmus Bergström

Everyone Gets a Gold Star by Joey Hoer

One of the simplest pleasures of school was earning a coveted gold star sticker on a test. This snippet provides a fun online equivalent. Each star does its own little dance as you hover over it. No matter how old you get, you still want to collect those stars.

See the Pen SCSS Star Badges by Joey Hoer

I am Holographic Batman by Pixelmort

Who doesn’t want to be Batman (other than The Joker)? If you don’t get to be a caped crusader, earning this badge would be the next best thing. It sports a nice “hologram” effect as you move your cursor over the symbol. This is an excellent take on those old 3D stickers that were sold in vending machines.

See the Pen Batman holographic badge 🦇 by pixelmort

You’re an Explorer by Chris Johnson

Designed as a way to reward those who contribute to an online community, this spaceship badge is more than meets the eye. Hover over it, and the spaceship takes flight, complete with an alien pilot. The look is modern, crisp, and detailed.

See the Pen Contributor badge flip exploration by Chris Johnson

A Compelling Landscape by Christine Clark

Here’s a travel-inspired badge that is great fun and well put together. It starts out relatively blank, and then animation fills in the various components. It’s a different approach than others in this collection but is effective in grabbing a user’s attention.

See the Pen Landscape Badge CSS Animation by Christine Clark

Gamifying the Web

As silly as it may sound, earning a badge can evoke a smile and provide a tiny bit of satisfaction. There’s definitely an emotional effect that keeps us coming back for more.

In some cases, it may even be healthy. Setting small, achievable goals is a realistic path to success, and badges can play a role in helping us get there.

In terms of design, badges afford us the freedom to have fun – because that’s part of their purpose. We have permission to create something that can brighten someone’s day. There are no hard-and-fast rules.

Hopefully, the examples above inspire you to let your imagination go wild. Go ahead, you’ve earned it.