CSS3 Buttons For Every Web Browser

The age of using images for buttons on websites is quickly coming to an end, thanks to expanded browser support for CSS3 properties like rounded corners, gradients and text shadows. Browsers, like Firefox and Safari, actually started supporting some of these properties long before CSS3 became a buzzword, but now with IE slowly getting into the game, there are no more excuses. Pure CSS buttons are easy to design, implement and manage — welcoming words to any front-end web developer!

I’ll show you, step by step, how to create CSS buttons, but if you’d like to view the demo now and grab the code, here it is. Of course, there are plenty of websites out there where you can generate a CSS3 button in seconds. My favorite is CSS3 Generator. Although, you don’t really learn from a generator, so we’ll build a CSS button from scratch and better understand how it works.

Input & Anchor Tag

In most cases, you’ll use either the input or anchor tag to display a button that will either trigger an action on the current page or send the visitor off to another page. Let’s go ahead and write the markup for our two elements.

<input type="submit" value="Accept" class="btn" />
<a href="#" class="btn">Decline</a>


Notice that we’re using the CSS class btn. This will be our base CSS class for our buttons. In an effort to keep object oriented CSS in mind, we’ll first create a simple class of btn, which all of our buttons will inherit and then extend that with additional classes for color and size differences.

CSS Round 1

First, let’s set some elemental properties on the btn class. This is mostly to override default browser styling of the elements and lay the groundwork for a button-like design.

     .btn {
          /* Round 1 */
          border:1px solid #666;
          cursor:pointer;
          display:block;
          margin:10px auto 0;
          padding:5px;
          text-align:center;
          text-decoration:none;
          width:140px;
     }

CSS Round 2

Now, for the fun part, let’s style these input and anchor tags and turn them into buttons, using the border radius, gradient, and text shadow properties, along with a few others for good measure.

     .btn {
          /* Round 1 */
          border:1px solid #666;
          cursor:pointer;
          display:block;
          margin:10px auto 0;
          padding:5px;
          text-align:center;
          text-decoration:none;
          width:140px;
          /* Round 2 */
          -moz-border-radius:15px;
          -webkit-border-radius:15px;
          background:#20c167;
          background-image:-moz-linear-gradient(top, #20c167, #157f44);
          background-image:-o-linear-gradient(top, #20c167, #157f44);
          background-image:-webkit-gradient(linear, center top, center bottom,
               from(#20c167), to(#157f44));
          background-image:linear-gradient(top, #20c167, #157f44);
          border-radius:15px;
          color:#FFF;
          font-size:.75em;
          font-weight:bold;
          text-shadow:-1px -1px 0 #444;
     }

As you can see below, our CSS3 buttons are taking shape. The gradient, rounded corners and text shadow combine to create one sexy button, if I must say so.

CSS Round 3

Let’s extend the btn class with one called decline, which we’ll use to, you guessed it, style the decline button. If we use our base button class to cover the browser overrides and general button styles, then we can use semantically named classes to change the button’s size, color and anything else we need to.

     .decline {
          background:#ad232e;
	  background-image:-moz-linear-gradient(top, #ff3443, #ad232e);
	  background-image:-o-linear-gradient(top, #ff3443, #ad232e);
	  background-image:-webkit-gradient(linear, center top, center bottom,
               from(#ff3443), to(#ad232e));
          background-image:linear-gradient(top, #ff3443, #ad232e);
          width:90px;
     }

Now we’re cookin’! Our decline button is a little smaller and has a nice red gradient. By using this approach, creating all sorts of buttons for your website should be no big deal. Just use a base class like btn and then extend it with custom classes to create different buttons.

What about IE?

Before you stop reading and start creating CSS3 buttons, we should probably talk about IE. Funny how that browser always wiggles its way into CSS discussions. Now, Microsoft does have its own proprietary gradient filter, but I’m not the biggest fan of using it. Instead, to make our buttons more cross-browser compatible, we’ll use a 1 pixel background image.

     .btn {
          background:#20c167 url(btnAccept-default.gif) repeat-x left bottom;
     }
     .decline {
          background:#ff3443 url(btnDecline-default.gif) repeat-x left bottom;
     }

With our gradient background image in place, we have an okay looking button in IE7/IE8 and a pretty nice one in IE9. Unfortunately, there still isn’t text shadow support in IE9, but at least we have rounded corners.

Finishing Touches

Lastly, for a nice button press effect, we’ll reverse the gradient colors on the active state of the element.

     .btn:active {
          background:#157f44;
	  background-image:-moz-linear-gradient(top, #157f44, #20c167);
	  background-image:-o-linear-gradient(top, #157f44, #20c167);
          background-image:-webkit-gradient(linear, center top, center bottom,
               from(#157f44), to(#20c167));
	  background-image:linear-gradient(top, #157f44, #20c167);
     }

So there you have it — a great looking button styled with the latest CSS3 properties that works in all the major browsers. For a closer look at the code, view the demo. Thanks for reading and feel free to leave comments or questions!

---

David F. Weiss is a Front-End Web Designer/Developer & Web Enthusiast, who lives and works in Connecticut, USA. He is passionate about the web and spends way too many hours in front of a computer and not enough time with his wife and little princess.