Improve UX with Unique Buttons – Tutorials & Resources
Sharing is caring!
Last Updated on June 15, 2017
Buttons are more than a crucial part of your site’s brand. They also contribute in a big way to user experience (UX). One way to improve UX site-wide is to pay attention to your button styles. If you pick unique buttons that are fun to use, your users will be more likely to stick around (and come back for more).
We’ve got dozens of tutorials and free button archives in the lists below. You’ll also find everything from online button generators to how-to’s for cool animated CSS buttons and more. If you’re looking to improve your user experience and you know buttons are one way to do it, you’ll find a lot here to love.
CSS Button Tutorials
The ten tutorials below share tools and tips to help you make great looking buttons. The buttons in the tutorial examples are limited, but they’ll give you ideas for how to craft your own styles.
1. Make Unique Buttons with CSS Only and No Images
There are plenty of button tutorials out there with free images to download, but what if you want to make buttons with pure CSS and skip the file management that comes with using image buttons? CSS Buttons With Pseudo-Elements has got you covered in that case, with some eye-friendly options you won’t believe come from stylesheet code alone. This is a very useful tutorial.
2. Chunky 3D Web Buttons with CSS3
If you just need simple, good-looking buttons you can style yourself in any color, check out Orman Clark’s Chunky 3D Web Buttons: The CSS3 Version is a great resource. The buttons look like they were designed this decade, and the instruction and code are easy to follow and easy to modify.
3. Great Looking Buttons with CSS Entities
Just Some Other Awesome CSS3 Buttons shows you how to make fantastic, no-image buttons using CSS3 entities. The buttons are sharp looking and can include a full array of little in-button icons for improved UX. The markup is pretty simple too, which is always a plus.
4. Make Your Own Buttons in Sketch
A Better Way to Make Buttons in Sketch shows you how to make your own buttons using Sketch for Mac. But truth to tell, you could use just about any graphics or drawing program to achieve the same result. The key here is timesaving. The author figured out a way to create his own infinitely varied button mill so he can churn out large volumes of custom crafted UI images in no time.
5. Awesome Animated CSS3 Buttons
CSS3 Gradient Buttons provides some absolutely stunning buttons. This one includes great images that improve UX by showing visually what the button does. The buttons aren’t hard to implement at all. The hover effect adds extra information and the Animated Buttons are really fun to walk through.
6. Build Your Own Social Media Buttons, Fast
Create 3D Social Media Buttons with CSS3 makes it easy to create good-looking social media buttons from scratch using CSS3. The code is amazingly compact and so is the tutorial.
7. Make Realistic Button Switches with CSS Only
The buttons and switches you can make by using Button Switches with Checkboxes and CSS3 Fanciness look so real you might put fingerprints on your monitor from trying to feel them. They’re pleasing to the eye and fun to use, which of course contributes to an improved UX. They come in several very popular styles, and the accompanying tutorials are easy to follow.
8. Simple CSS3 Gradient Buttons
9. Pretty CSS3 Buttons
This tutorial from PaperMashup also gives you pure CSS buttons. It’s a pretty bare-bones, short tutorial, easy to understand and implement for lots of different sizes and colors.
10. Plain CSS Buttons
Archives of Free Buttons
If you’d rather just use pre-existing buttons, we have you covered. This section contains links to 6 websites that provide loads of free buttons, available for download.
1. Bootstrap Buttons
Bootstrap is a free, open source framework that lets you design a responsive website without too much mucking around with CSS. Bootstrap Buttons lets any non-coder create their own navbars and buttons from scratch.
2. Free Buttons from Freepik
Freepic has over 1800 free buttons you can download and use in your web projects. The buttons are in .ai and .eps formats, grouped by categories. They are also fully searchable by keyword. If you can imagine a button, they’ve probably got an image for it here.
3. 25,000 Free Buttons
Actually it’s 26,789 free buttons available on Vecteezy, but that didn’t look as good in the heading. These buttons are all vector graphics that you can edit and shape to your needs. The searchability lacks a little bit, but if you can stand wading through page after page of samples to find what you want, it’s definitely worth a look.
4. 5000+ Free Button Vectors
All Free Download offers 5000 more free button vectors. Once you’re in the “free button downloads” category, it’s hard to refine it by button type. That said, there are some really great images here, free of charge.
5. Free Button Icons
MaxButtons offers 346 free button icon sets. That represents over 40,000 icons. Find buttons for social media, fitness, food and beverage, circuitry, or whatever else you can think up. They’re all displayed on one page, so just do an in-page word search to find the button you’re looking for.
MaxButtons also make a free WordPress plugin, WordPress Button Generator. It allows you to make your own buttons from scratch.
6. 200 Free Buttons
Design Shock offers 2,000 buttons in ten different styles as part of a fairly cheap commercial pack. Of these, 200 of those available for free.
If looking through a catalog at thousands of button images is not your thing, try a button generator. Here are 5 of them — many online.
1. Da Button Factory
Da Button Factory allows you to create buttons by typing in your text and adjusting settings like font, size, text shadow, and color. Just download your free custom button image when you’re done.
2. Button Optimizer
Button Optimizer is a very useful online tool that lets you make your own web call-to-action (CTA) buttons. There’s a little control panel for button text, size, color, and so on. You can watch your button change as you fiddle with the knobs and sliders. Then when you like what you see, just click to download the button either as a PNG image or as CSS code.
3. CSS Button Generator
CSS Button Generator is different from the others in that it works with CSS3. You can set your color, box, border, background, and hover properties. Then you can copy and paste the code into your project.
Free-Buttons is a standalone app. It helps you make 100% CSS web buttons and menus from a simple UI. Choose your button style, type your text, and the app delivers clean CSS.
5. CSS Tricks
CSS Tricks is another online generator with an eye-catching, easy to use interface that delivers lean CSS3 code and very attractive, customizable buttons.
Other Button Resources
These articles will change the way you see and use buttons:
- The Button Test by Marc Hemeon of DesignInc about why buttons are so crucial for an improved UX. It includes a list of best practices.
- Buttons Matter in Online Content Design by Susan Gunelius at ACI about why buttons matter enough to deserve a lot more attention than they usually get.
- 7 Basic Best Practices for Buttons by Caroline Jarrett with essential advice about buttons ranging from their looks to their placement. While some of this may seem obvious, the author shows how they’re anything but.
Aside from your logo, your buttons are the most recognizable brand element on your site. Unique, well-designed buttons establish trust and continuity while giving users a better overall experience on your site. For an improved UX, stick with a few button types and colors. Make sure they’re unique and fitted to your brand.
Use the tutorials above, plus free button download sites, online button generators, and other resources to make the most of your buttons.