CSS Buttons: Tutorials and examples

Default avatar.
July 15, 2011

Creating buttons with CSS is one of the most experimented-with web design techniques around. Examples and tutorials abound. The biggest recent trend in CSS button design seems to be eliminating images, especially background images, from buttons. But there are plenty of other things designers are doing with buttons, some that do include images. Below we’ve collected more than twenty tutorials, examples, and tools for creating CSS buttons, most of which use CSS3. Included are buttons to suit virtually every design style. We’ve tried to focus on newer techniques here, leaving out the long-standing techniques (like the sliding door method for creating rounded corners) that most designers are already familiar with. If you have other tutorials or examples you’d like to share, please do so in the comments!

Tutorials and articles

Rediscovering the button element

A really helpful article discussing the button element in CSS, which is often overlooked by designers. It’s a bit older, but still has tons of useful information on creating more stylish buttons with CSSrediscoveringbuttonelement

Beautiful CSS buttons with icon set

Here’s another article that talks about how to create buttons with icons, though using span classes rather than the button element. beautifulcssbuttons

Build kick-ass practical CSS3 buttons

This video tutorial from Nettuts+ shows how to create practical CSS3 buttons that even include what appears to be a Twitter bird icon image, but is in fact created entirely with CSS3practicalcss3buttons

Beautiful Photoshop-like buttons with CSS3

While the buttons here aren’t particularly forward-thinking in terms of look, what is amazing is that they were created entirely using CSS3, without using an images, and were only based on buttons created in Photoshop. photoshoplikebuttons

Better button and navigation interactions

This is a great, simple tutorial from Darren Hoyt on creating better behaviors for your buttons that encourage visitors to interact with your site. betterinteractions

Super awesome buttons with CSS3 and RGBA

This tutorial from Zurb covers using CSS3 and alpha-blending using RGBA to create scalable buttons with only a single PNG image. superawesomebuttons

Building beautiful buttons with CSS gradients

A tutorial for building a button using CSS gradients similar to those used by Mozilla for Firefox Personas. bbbcssgradients

How to design a sexy button using CSS

This tutorial shows how to create a big, vibrant button without using images. sexycssbutton

Realistic looking CSS3 buttons

These are simple buttons, created entirely with CSS3, including some pseudo-elements. realisticbuttons

Pretty CSS3 buttons

This tutorial shows how to create a simple, slightly glossy-style button that’s scalable and can be created in any color without images. prettycss3buttons

CSS3 buttons without any images

A simple tutorial for creating dynamic buttons that use only CSS3 and no images. There are four states for each button, including disabled, hovered, and clicked states. css3buttonsnoimages

5 different tutorials of dynamic CSS round corners link buttons

This is a collection of five different tutorials for creating CSS buttons with rounded corners. Two include the use of images, but the other three don’t. roundcorners

Create a CSS3 button that degrades nicely

Until all browsers properly support CSS3, we’re going to run into issues when using it to create things like buttons. This tutorial shows how to create great CSS3 buttons that also look fine in older browsers, like IE6 and 7nicelydegrade

Apple’s navigation bar using only CSS

This tutorial shows how to recreate the button-style navigation menu on Apple’s website. It works best in Safari 3+, but still looks fine in other browsers. applenavigation

Create a CSS3 call to action button

This tutorial shows how to create a call to action button entirely with CSS that includes different default and hover states. calltoaction

Sexy buttons with CSS3

This simple tutorial shows how to create nicely-styled buttons with unique hover and active states. The buttons can be scaled and their color can be changed easily. sexybuttons

Glossy buttons without images using only CSS3

Looking at these buttons, it’s hard to believe they’re made without images unless you look very closely. The code is complicated, but the end result looks great, complete with hover effect. glossybuttons

CSS3 buttons with icons

This tutorial shows how to create CSS3 buttons with gradients that also include icon images and are cross-browser compatible. buttonswithicons

Roll your own Google buttons

This tutorial shows how to make scalable Google-style buttons with colored borders. The end results are minimalist and clean. googlebuttons

Examples and tools

10 awesome CSS3 buttons to use on your website

Here’s a collection of ten buttons you can use on your website. They’re all pretty basic but are created using just CSS3 with no images. 10awesomebuttons

CSS3 gradient buttons

This is a huge collection of CSS3 buttons from Web Designer Wall. Included are a variety of shapes, sizes, and colors, all with gradients. One of the best parts about them, though, is how gracefully these buttons degrade in browsers that don’t have full CSS3 support. css3gradients

Button maker

CSS-Tricks offers this free CSS3 button creator. Just define the background colors for each state of the button, the size, and the text attributes, and it will create the CSS code for you. buttonmaker

Radioactive buttons

These buttons use CSS animations in Safari to create a pulsing, glowing effect. In other browsers that support CSS3, they’re still perfectly functional and look just fine. radioactivebuttons Know other techniques for creating awesome CSS buttons that weren’t mentioned here? Or have a favorite example? Please share them in the comments!

Cameron Chapman

Cameron Chapman is a freelance writer and designer from New England. You can visit her site or follow her on Twitter.

Read Next

15 Best New Fonts, March 2023

Fonts are one of the most critical tools in any designer’s toolbox. With clever use, you can transform a design from hu…

20 Best New Websites, March 2023

We have another exciting collection of the best new sites on the web for you. In this month’s episode, there are severa…

Exciting New Tools for Designers, March 2023

We have invoicing apps and scheduling tools. Some resources will save you the trouble of hiring a designer or developer…

Free Download: Budget Planner UI Kit

Designing an onboarding process can be tricky; there are so many different options, and if you get it wrong, you could …

3 Essential Design Trends, February 2023

There’s a common theme in this month’s collection of website design trends – typography. All three of these trends show…

Free Download: Education Icons

Icons are essential for successful web design. They provide an eye-catching, unobtrusive way to communicate important i…

15 Best New Fonts, February 2023

The fonts you embed in your website transform the design and can mean the difference between an extraordinary brand exp…

Unlocking the Power of Design to Help Users Make Smart Decisions

Users are faced with decision-making on websites every day. The decision-making process can be far more complex than it…

20 Best New Websites, February 2023

The quality of websites in 2023 has moved up a gear, with designers cherry-picking trends as tools, embracing new ideas…

AI’s Impact on the Web Is Growing

Despite the massive strides tech has taken in the last few years, we rarely see a week as tumultuous as this. When your…

Exciting New Tools for Designers, February 2023

No matter what you’re working on, you can guarantee that there’s a cool app, resource, or service that will help you do…

15 Best New Fonts, January 2023

Your choice of typeface significantly impacts the tone of voice your designs adopt. Heritage, ambition, freshness, ener…