CSS Badges to Level Up Your Projects

If you spend enough time online, 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 offer really interesting 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 bling that designers are bringing 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

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. It makes you want to collect them all.

Ever Been to Berlin?

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’s the subtly animated features that bring a sense of calm. The attention to detail makes it all come together.

No, But I’ve Been to Tatooine

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.

It’s a Material World

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.

Everyone Gets a Gold Star

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.

I am Holographic Batman

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 nifty “hologram” effect as you move your cursor over the symbol. This is a great take on those old 3D stickers that were sold in vending machines.

You’re an Explorer

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.

A Compelling Landscape

Here’s a travel-inspired badge that is great fun and well put together. It starts out as relatively blank, 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.

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. 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.

The post CSS Badges to Level Up Your Projects appeared first on Speckyboy Web Design Magazine.