Apps optimize

Create custom buttons with CSS3

Ryan Boudreaux demonstrates how to build custom buttons with CSS3 code in this tutorial.

Creating customized buttons which include drop shadows, gradients, text shadows, border radius, separate hover, and active styling effects can all be accomplished with CSS3 styling properties. The effects are quite impressive and you can do all this within your text editor -- no need to use your graphic image editor. This short demonstration will walk you through the steps to styling your buttons with two example navigation sections.

HTML

There isn't much in our navigation examples within the HTML code, just two sections that reference separate gradients and button styles respectively. The two sections each call a unique id to a background gradient and each anchor reference within each section calls a class to the button style assigned for that particular section. The HTML code snippet is displayed below.

<h2>Button Style &quot;A&quot;</h2>
<section id="bg_grad_a">
<a href="#" class="button_a">Home</a>
<a href="#" class="button_a">Blog</a>
<a href="#" class="button_a">Services</a>
<a href="#" class="button_a">About</a>
</section>
<h2>Button Style &quot;B&quot;</h2>
<section id="bg_grad_b">
<a href="#" class="button_b">Home</a>
<a href="#" class="button_b">About</a>
<a href="#" class="button_b">News</a>
<a href="#" class="button_b">Log In</a>
<a href="#" class="button_b">Catalog</a>
</section>

Notice that each href="#" this is a dummy link, meaning that for demonstration purposes when the link/button is clicked, it will only stay on the current page. You can add in your own linking as necessary should you use this code for your own purposes (i.e., href="web/blog"). As you will see later, the anchor text in the HTML determines the visual text displayed within the button -- another nice feature that makes it easy to duplicate and modify as needed for any project.

Without applying any styles in our index.html file, it looks like Figure A as displayed in Chrome 20.0.1.

Figure A

CSS3 styling

First, lets add in some styling to the two individual button styles. As you can tell from the HTML and resulting display, they are named "Style A" and "Style B". We will style them as classes named .button_a and .button_b, and start with a top border color and base background color as shown in the CSS code snippets below:

/* Button Style A */
.button_a {
   border-top: 1px solid #96d1f8;
   /* Old browsers */
   background: #65a9d7;
}
/* Button Style B */
.button_b {
   border-top: 1px solid #ffb3fc;
   /* Old browsers */
   background: #d9b3ff
If you are following along go ahead and refresh your browser and the index.html now takes on this appearance as shown in Figure B.

Figure B

Still not much to look at, but we are getting the base styles set; the cross-browser styles will come soon.

Next, let's add in some text shadow, give the text a color and font size, set a font family, remove the text decoration from the links, add in some padding, and set the vertical alignment to middle as shown in the CSS code snippets below:

Button Style A
   text-shadow: rgba(0,0,0,.4) 1px 2px 1px;
   color: white;
   font-size: 18px;
   font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   padding: 7.5px 15px;
   vertical-align: middle;
Button Style B
   text-shadow: rgba(0,0,0,.5) 1px 2px 1px;
   color:#E5E5E5;
   font-size: 18px;
   font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
   font-variant:small-caps;
   padding: 5.5px 15px;
   text-decoration: none;
   vertical-align: middle;
Refresh your browser again, and the index.html now takes on this appearance as shown in Figure C.

Figure C

Next, let's add in a linear gradient background layer to the buttons, calling cross browser  prefix functionality, along with a border radius, and a box shadow using rgba colors and stops for each as shown in the CSS3 code snippets below:

  Button Style A
   /* Chrome,Safari4+ */
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   /* Chrome10+,Safari5.1+ */
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   /* FF3.6+ */
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   /* IE10+ */
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   /* Opera 11.10+ */
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   /* Chrome,Safari4+ */
   -webkit-border-radius: 5px;
   /* FF3.6+ */
   -moz-border-radius: 5px;
   /* Old browsers */
   border-radius: 5px;
   /* Chrome,Safari4+ */
   -webkit-box-shadow: rgba(0,0,0,1) 1px 2px 1px;
   /* FF3.6+ */
   -moz-box-shadow: rgba(0,0,0,1) 1px 2px 1px;
   /* Old browsers */
   box-shadow: rgba(0,0,0,1) 1px 2px 1px;
Button Style B
  /* Chrome,Safari4+ */
   background: -webkit-gradient(linear, left top, left bottom, from(#b366ff), to(#d9b3ff));
   /* Chrome10+,Safari5.1+ */
   background: -webkit-linear-gradient(top, #b366ff, #d9b3ff);
   /* FF3.6+ */
   background: -moz-linear-gradient(top, #b366ff, #d9b3ff);
   /* IE10+ */
   background: -ms-linear-gradient(top, #b366ff, #d9b3ff);
   /* Opera 11.10+ */
   background: -o-linear-gradient(top, #b366ff, #d9b3ff);
   /* Chrome,Safari4+ */
   -webkit-border-radius: 7px;
   /* FF3.6+ */
   -moz-border-radius: 7px;
   /* Old browsers */
   border-radius: 7px;
   /* Chrome,Safari4+ */
   -webkit-box-shadow: rgba(0,0,0,1) 1px 2px 1px;
   /* FF3.6+ */
   -moz-box-shadow: rgba(0,0,0,1) 1px 2px 1px;
Refresh again, and the index.html now takes on this appearance as shown in Figure D.

Figure D

The buttons are starting to take shape now. Next, we need to add the hover and active pseudo class states to our styles for both the "A" and "B" styles as shown in the CSS code snippets below:

Button Style A
/* Button A Hover  */
.button_a:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
}
/* Button A Active */
.button_a:active {
   border-top-color: #1b435e;
   background: #1b435e;
}
Button Style B
/* Button B Hover  */
.button_b:hover {
       border-top-color: #6b248f;
    background: #6b248f;
    color: #ccc;
}
/* Button B Active */
.button_b:active {
   border-top-color: #4c1a65;
   background: #4c1a65;
}
Another refresh, and the index.html now takes on this appearance when a button is on hover as shown in Figure E.

Figure E

Next, let's style our sections with a background gradient to help set the buttons apart from the rest of the page. The CSS3 includes cross browser prefixes for border radius, linear gradients, gradients, and DXImageTransform for handling Internet Explorer.

/* Gradient Background Style A */
#bg_grad_a {
height: 40px;
width: 360px;
padding-top:20px;
padding-left:30px;
/* Chrome,Safari4+ */
-webkit-border-radius: 15px;
/* FF3.6+ */
-moz-border-radius: 15px;
/* Old browsers */
border-radius: 15px;
background: rgb(38,38,38);
/* FF3.6+ */
background: -moz-linear-gradient(top, rgba(38,38,38,1) 0%,
rgba(42,42,42,1) 2%,
rgba(43,43,43,1) 4%,
rgba(43,43,43,1) 96%,
rgba(42,42,42,1) 98%,
rgba(38,38,38,1) 100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(38,38,38,1)),
color-stop(2%,rgba(42,42,42,1)),
color-stop(4%,rgba(43,43,43,1)),
color-stop(96%,rgba(43,43,43,1)),
color-stop(98%,rgba(42,42,42,1)),
color-stop(100%,rgba(38,38,38,1)));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(top, rgba(38,38,38,1) 0%,
rgba(42,42,42,1) 2%,rgba(43,43,43,1) 4%,
rgba(43,43,43,1) 96%,rgba(42,42,42,1) 98%,
rgba(38,38,38,1) 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(top, rgba(38,38,38,1) 0%,
rgba(42,42,42,1) 2%,rgba(43,43,43,1) 4%,
rgba(43,43,43,1) 96%,rgba(42,42,42,1) 98%,
rgba(38,38,38,1) 100%);
/* IE10+ */
background: -ms-linear-gradient(top, rgba(38,38,38,1) 0%,
rgba(42,42,42,1) 2%,rgba(43,43,43,1) 4%,
rgba(43,43,43,1) 96%,
rgba(42,42,42,1) 98%,
rgba(38,38,38,1) 100%);
/* W3C */
background: linear-gradient(to bottom, rgba(38,38,38,1) 0%,
rgba(42,42,42,1) 2%,rgba(43,43,43,1) 4%,
rgba(43,43,43,1) 96%,
rgba(42,42,42,1) 98%,
rgba(38,38,38,1) 100%);
/* IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262626', andColorstr='#262626',GradientType=0 );
}
/* Gradient Background Style B */
#bg_grad_b {
height: 50px;
width: 410px;
padding-top:15px;
padding-left:30px;
/* Chrome,Safari4+ */
-webkit-border-radius: 15px;
/* FF3.6+ */
-moz-border-radius: 15px;
/* Old browsers */
border-radius: 15px;
/* FF3.6+ */
background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
/* IE10+ */
background: -ms-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
/* W3C */
background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
/* IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
}
Refresh our browser again and the index.html now takes on this appearance when a button is on hover as shown in Figure F.

Figure F

Styling the buttons to fit your own needs and requirements might mean just having to create a new color scheme or adjusting the padding, height, and width depending on your web pages. This demonstration gives you a good starting point to create your own custom buttons. The HTML and CSS files are provided for you in this download.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

8 comments
FallingRock
FallingRock

This is really going forward backwards. 600 lines of obscure code to make one button! Really?! How cool. Can't wait to quit my day job and spend my life debugging my favorite new CSS3 trick. Thanks so much for this progressive insight. Can I do it for Windows 8? Facebook? MY toilet Ipad? Please show me how to do more inane crap the hard way with modern dementia.

rcemory
rcemory

How much of your post would be applicable to IE 6,7,or 8 if we added jQuery?

lilbubba
lilbubba

The last piece is skippable in my opinion, but being able to style buttons to create menus on the fly has a lot of value. 11 lines (including comments) to achieve the buttons I think is definitely worth while.

RJBoudreaux
RJBoudreaux

You might want to try http://css3pie.com/ Progressive Internet Explorer (PIE) makes Internet Explorer 6 through 9 capable of rendering several CSS3 features including linear gradients, border radius, and box shadow.