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.

The post 100 Tiny CSS Tools & Apps for Web Designers 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.

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.

Obvious CSS Buttons

Built using LESS, Obvious Buttons are colorful, attractive, and easy to customize. They also provide a simple animated effect when clicked.

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 12 High-Quality Free CSS Button Libraries & Frameworks appeared first on Speckyboy Design Magazine.

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.

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.