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

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?

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

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

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

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

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

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

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

The post 8 CSS & JavaScript Snippets for Creating Gamification Badges appeared first on Speckyboy Design Magazine.

With more complex coloring and special effects, designers can leverage borders to draw attention to important information. They can also play a role in user engagement and microinteractions.

With that in mind, let’s take a look at some examples of borders that are further enhanced with the best that CSS (and maybe a little JavaScript) have to offer.

SVG Border Magic

SVG images have become one of our best secret weapons when it comes to creating razor-sharp effects that work at various screen sizes.

In this example, it’s used to add a multicolor animated border that automatically responds to the size and shape of its container. No matter how large or small you resize the element, the border stays true.

See the Pen CSS border (using an SVG) by Louis Hoebregts

Fascinating Transitions

One staple use of CSS transitions has been changing a button’s border from one color to another.

It can still grab a user’s attention, but there are some interesting twists we can implement. This collection of unique border transitions adds an element of fun and is a great way to stand out.

See the Pen CSS Border transitions by Giana

Attention Getter

Here’s a solution that offers a smooth animated border. What’s nice about this setup is that it draws you in, but is far from being cheesy or over-the-top. It would make an outstanding call-to-action button.

See the Pen Animated CSS Gradient Border by Mike Schultz

Adding Function to Forms

Form inputs are another common design element that can benefit from border effects. The slick animations in this Pen make for terrific microinteractions.

They leave no doubt in the user’s mind that they’ve successfully clicked into an input. It may be a small thing, but it makes the experience that much better. As a bonus, you’ll also find background and label effects as well.

See the Pen Awesome input focus effects by Takuma.I

Bordering on Groovy

Outlined text can be a powerful asset to any design. Even better if you add a compelling effect, such as this liquid-like flow animation. It would make for a super-cool logo or even header text.

See the Pen CSS-only shimmering neon text by Giana

Cool Clippings

The clip-path effect is a print design favorite that has come to the web in recent years. It essentially enables design elements to become transparent shapes, thus allowing backgrounds to display through them.

In this example, you’ll see it applied to both a container’s border and text. There are any number of possibilities for crafting a unique look with this one.

See the Pen -webkit-background-clip:text CSS effect by Jintos

Elegant Link Hovering

Here’s an example of how a plain old link (or HTML span, in this case) can be dressed up with a border effect.

Choose from an impressive list of hover effects, each one adding a stunning animated border. This is an easy way to add a touch of class to text-based navigation.

See the Pen Sass mixin library for text hover by Antonija Šimić

A Hand Drawn Look

In most cases, borders tend to add a very clean and professional look. But what if you want something a little more hand-crafted?

This collection uses CSS border-radius to add a touch of curve, giving the buttons a rustic feel.

See the Pen Imperfect Buttons by Tiffany Rayside

Bordering on Success

The examples above prove that designers no longer have to settle for the basics when it comes to styling borders. Now, a border can not only add a splash of color, but also movement as well.

And these effects can be added as an element renders on the screen or as users interact with them. Either way, border effects can add a unique yet subtle charm to any website.

More CSS Effects Snippets

The post 8 CSS Code Snippets for Creating Stunning Border Effects appeared first on Speckyboy Design Magazine.

In that way, a button click is sort of like the successful conclusion designers are trying to draw us to. That’s why it’s so important to choose buttons that both look great and provide obvious visual cues.

With that in mind, we’ve found a collection of CSS button libraries that you can use to drive interaction on your own web projects. Enjoy!

bttn.css Library

bttn.css is a collection of lightly-styled buttons that feature different shapes, sizes, and colors. All styles can be called with simple class names. With the minified CSS file coming in at just 4kb, this library is also quite lightweight.

CSS Buttons Collection

The title may be simple, but Buttons is a library with over 20 collections of styles to choose from. Standouts include the slightly-glassy Delta, the fun and sassy Theta, the roomy and minimal Mu, and keyboard-like Phi. Be sure to check out the ultra-cool click effects in the demo.

Sass & Compass Buttons

Not to be confused with the other library called, ahem, Buttons. This library contains simple and attractive CSS buttons in a variety of shapes. Extra goodies include icon button styles that utilize FontAwesome.

Pushy Pressable 3D Buttons

Pushy Buttons may not be the fanciest set you’ll find, but they’re colorful and easy to spot in a crowd. Plus, they provide an oddly-satisfying bounce when clicked. In the end, isn’t that all we really need from a button?

btns.css Framework

Personally, I like buttons that make use of smooth CSS transitions. btns.css does a great job with subtle color transitions on hover and even versions that will expand and contract size.

Press.css Library

Press.css provides great-looking flat buttons in whatever size, shape, and color you need. With only three included effects, code size is kept to a minimum (12kb). They also work swimmingly with FontAwesome icons.

CSS Button Hover Effects

Hovering on a button activates a smooth CSS transition that brings a FontAwesome icon into view – either alongside or in place of text. Part of a great CodePen collection of CSS buttons.

Social Buttons for Bootstrap

Social Buttons for Bootstrap combine the goodness of the Bootstrap framework with FontAwesome icons. All the big social media networks are included, over 20 in all. There are classes for each network, along with classes for different sizes. Colors are made to match each respective service.

beautons Button Toolkit

beautons is a button library that’s all about simplicity. Choose from various sizes, styles, and button states. CSS classes can be combined to mix and match different styles.

Chunky 3D Web Buttons

Orman Clark’s Chunky 3D Web Buttons is not just a collection of sexy buttons. It’s also a full-blown tutorial demonstrating how they were made. So you can start with the basics and go on to add your own touches.

Radioactive CSS Buttons

What separates Radioactive Buttons are the interesting hover effects that can be added in. For instance, hovering can result in a subtle pulsating color change (as if the button really were radioactive). This is done through looping a CSS transition a set number of times. The result is a fun, attention-grabbing button.

It’s All About Those Clicks

Buttons can often be a bit overlooked when putting together a website. After all, they generally don’t take up much screen real estate and are not the most exciting design element. Still, utilizing the right one can draw attention and encourage a click.

Note how several of the libraries above use interesting hover and click effects. These types of effects can bring a bit of functional fun to buttons and improve the overall UX.

Next time you’re designing a website or working on a call-to-action (CTA), think about buttons as more than just a simple design element. Think of them as the gateway to your sites’ goals.

Using one of the libraries featured above really can make a difference in your conversion rates.

The post 10+ High-Quality Free CSS Button Libraries & Frameworks appeared first on Speckyboy Design Magazine.

Without needing to install anything, all you have to do is bookmark, and save them for that day when required.

From assessing your website’s accessibility to generating sophisticated flexbox or grid layouts, refining typography, choosing the perfect color scheme, copying and pasting CSS animations, to beautifying code screenshots, this collection covers a broad range of web design needs.

No matter what kind of CSS time-saver you’re searching for, you’ll likely find it here. Keep these tools at your fingertips to make your CSS workflow quicker and that little bit easier.

CSS Grid Tools

These tools will allow you to construct grid CSS layouts quicker. They offer interfaces for defining columns, rows, and areas, making layout adjustments straightforward and code generation instant.

CSS Animation Tools

These CSS animation tools offer user-friendly interfaces to define keyframes, animation timing, and other effects, enhancing user engagement without needing JavaScript.

CSS Spinner & Loader Tools

These tools offer various types of copy and paste spinners and loaders that can be easily integrated into your web projects to maintain user attention during loading periods.

CSS Box Shadow Tools

These tiny tools will help create depth and emphasis on elements through shadow effects. With easy-to-use sliders and color pickers, these tools will generate the CSS code for soft shadows, glows, and more.

CSS Image Filter Tools

From blurring and color adjustments to custom filters, these image filter apps provide live previews and code snippets for enhanced image styling.

CSS Background Generators

These tools allow for the creation of animated and dynamic backgrounds. They offer options for gradients, images, and videos, enriching your web designs with backgrounds that can be static, animated, or interactive.

CSS Pattern Tools

These tiny tools specialize in generating repeatable, tileable patterns for web backgrounds. With options for shapes, colors, and level of complexity. They will provide unique ways to fill background spaces with visually appealing designs.

CSS Gradient Tools

Quickly create smooth and seamless gradients with these tools. They provide interfaces for radial or linear gradients, allowing for the customization of direction, color stops, and opacity for vibrant backgrounds or element fills.

CSS Generators

These tools are quick and efficient ways to produce ready-to-use CSS snippets for multiple design needs.

CSS Color Tools

Copy and paste palette generators, color pickers, and tools to ensure color harmony and contrast and help select complementary colors for cohesive designs.

CSS Typography Tools

These simple tools focus on text and readability. They allow for the manipulation of font sizes, line heights, and spacing, providing previews and code for typographic perfection in web design.

CSS Icon Tools

From generating icon fonts to SVGs, these tools simplify the process of integrating and styling icons, ensuring crisp, scalable graphics across devices.

CSS Quality Checkers

These tools will analyze and optimize your CSS files. They identify unused styles, redundancies, and potential improvements, helping to streamline stylesheets for faster load times and better performance.

Web Accessibility Tools

These tools ensure web content is accessible to all users, including those with disabilities. Recommendations for improvements to enhance usability for everyone.

Interactive CSS Learning

Through exercises, tutorials, and live coding environments, you can learn more about CSS properties and best practices in a practical, engaging manner.

Generate Code Screenshots

Ideal for tutorials, blogs, or documentation, these tools stylize code for readability and aesthetic appeal, supporting various programming languages and themes.

The post 100 Tiny CSS Tools & Apps for Web Designers appeared first on Speckyboy Design Magazine.

Sometimes, though, it all looks and feels like cheesy marketing talk that’s been both written and designed by someone detached from reality. They might even convince you to do the exact opposite of the intended action.

So, what makes a good CTA? Here are 10 examples of Calls-to-Action that are well-designed, cleverly written or just plain unique.

MailChimp

Full disclosure – I think MailChimp does as good a job with their CTAs as anyone. In fact, there were a number of instances on their site to choose from. But, my absolute favorite is their “Prepare for Launch” dialogue for sending out a mail campaign.

Even if there were no text, the animated chimp hand hovering above the red button alone lets you know what you’re supposed to do. It’s simple, fun and I feel a strange sense of accomplishment when I click the “Send Now” button.

ManageWP

ManageWP has made the bulk of their home page a CTA. The headline and brief descriptive text tell you exactly what their service does and simply asks for an email address to get started. The visuals are interesting and the content is right to the point.

Blue Apron

Checking out Blue Apron’s site, their home page really is a series of CTAs. I love this particular section because it conveys what you’re getting and how much it costs in an easy-to-read format.

Even the little Free Delivery icon is a nice touch. Best of all, they used a background of fresh food ingredients to drive the point home. Who’s hungry?

Spotify

Like Blue Apron above, Spotify features a background of its main selling point in its CTA. But they take a decidedly simpler approach the rest of the way.

This slider highlights a few important things about the streaming music service, but mostly encourages you to click or scroll for further detail. It doesn’t try to wow you – just make it easier for you to sign up or learn more.

Zillow

Zillow is the place to go for all things related to researching real estate. And right from the start, you’ll find a CTA area that lets you do all the things. It’s all right there, without the need to search around. This is as useful as a call can get.

B&O Play

An offshoot of Bang and Olufsen, B&O Play carries on the minimalist design and branding of its parent. And this Call-to-Action is a perfect example. You get a big dose of beautiful industrial design, along with calls to see the featured collection or start the process of buying these slick headphones.

While it’s easy to look at this and say, “It looks nice enough, but so what?” the point is that you should treat CTAs as an important part of your overall brand. They should reflect who you are and what you do.

Mercy Corps

When you’re tackling some of the world’s most difficult situations, there’s no time to waste. Mercy Corps creates a sense of urgency with their CTA. The photo, coupled with a bold, serious headline ensures that visitors understand the gravity of it all.

They’re helping us to see the people affected, and providing us with a way to respond.

Nest

Home automation masters Nest bring the message of Earth Day and tie it in perfectly with their energy-saving thermostat.

The twinkling stars in the background coupled with the larger-than-life product shot really make an impact (it makes me think of a planet floating in space). What’s also nice here is that they allow the background some room to breathe.

Skagen

Skagen is a Danish company that sells minimalist watches, along with other fashion accessories. This CTA features an outstanding use of color and brand-appropriate simplicity. The lesson here is that, when you have a unique product, just let it speak for itself.

Patagonia

Patagonia is all about the experience of being outdoors. Their home page slider is a mix of products and causes – like this beautifully crafted image promoting an environmental film.

The images are big, bold and they aim to bring a little bit of the wild to your screen. It’s right on point with their target audience.

Calling for Clicks

A good CTA should consider the audience and the desired result of a user interaction. Color and imagery should be a reflection of your brand and help to convey the message. Motion is great, so long as it’s not outlandish. Text should be short and to the point.

The Calls-to-Action above all do a great job of guiding the user in a fairly simple manner. It goes to show that you don’t need something overly wordy or complicated to convince people to act.

The post 10 Outstanding Examples of Call-to-Actions Buttons for Inspiration appeared first on Speckyboy Design Magazine.

Many different factors go into creating a successful call to action button and the difference between a hit or miss can be as subtle as the shade of color you choose or even the font.

So where do you start? Check out these quick, yet effective pointers that will help get you on your way:

What type of online pages have call to action buttons?

Call to actions are traditionally associated with landing pages. However, capturing the attention of potential customers is vital in many other places, such as websites, email newsletters, videos and even blog posts. Just because you have already converted visitors into leads by signing them up for a webinar, doesn’t mean you can’t continue to market additional related content to them, like a free consultation. The most effective practice is to continue the conversation with customers by offering them further services or a free trial of a product.

A website homepage, as a most frequently visited page, presents a huge opportunity to drive traffic to a specific location. In many instances, a homepage should have more than one call to action, to drive different desired actions for separate target audiences.

Moreover, a website should have uniform call-to-actions spread across all web pages in order to increase the chances people will take another step through the door.

Words that matter

A button that entices people to click has to be a short and concise phrase, with no information clutter. For example:

“Click to find out on how you can get up to 50% off of home insurance”

The above is a little bit too much information. If your website or ad copy explains clearly what you offer, all your call-to-action button needs to say is:

“Get it here”

Many marketers like to add a sense of urgency into their CTA buttons, using words like “quick,” “today,” and “now.” These words call for immediate action, and reinforce the notion that clicking the button will provide a benefit institently. However, it’s also important to make the call to action button fit within the context of the site. For some target audiences, a phrase like “Buy Now” may be too aggressive. Make sure the language you use is suitable for your target audience.

Most importantly, let your potential customers know exactly what they’re going to achieve by clicking on a button, whether it’s “Add to Cart,” or “Free Download” make sure they have no surprises when they get to the next page. A call to action button that doesn’t properly tell the user where she’s going will result in a high bounce rate.

Lastly, be SEO aware. In order for search engines to read your buttons, they should contain readable text via CSS3, and add keyword rich alt tags, it’s important to avoid using a simple image replacement.

Size and color

In our present information packed world, users most often scan through pages with their eyes, without putting too much effort into reading. If they see something that could be valuable while scanning, they’ll put in the extra time to stop and read.

This means we have to emphasize the content we want the users to notice. The bigger your call to action is, the more likely it is that people will stop to see what you offer.
The colors you use should be bold and contrasting, making sure your button appears clickable.

Placement

It’s never just about the button – the entire “environment” where you place it is critical.

Eyetrack studies shows that the eye’s path tends to start in the upper left area of a page. It’s also dictated by simple logic. In the English language, we start reading from left to right and from top to bottom. This would be the best location for your most critical content, or the content you want the user to see first.

The call to action should be placed above the fold, and make sure the button stands out by giving it some white-space, making the area appear uncluttered.

The post The Science of Buttons: How to Get People to Click appeared first on Speckyboy Design Magazine.