Below is a relatively tidy button rendered through your browser using only HTML (no images).
If you consider how many buttons and menus you may need to use for your web page, it can all add up to a lot of bandwidth savings.
Here's the HTML:
nb: if you are seeing a faint border around the button, this has been applied by blogger and not part of the HTML posted below.
These styles are all applied using inline css, if you want to apply them using a css file just use the following syntax:
top: 82px;width: 101px;
box-shadow: 0px 0px 3px 2px #a3a3a3 inset;
-moz-box-shadow: 0px 0px 3px 2px #a3a3a3 inset; /*firefox*/
-webkit-box-shadow: 0px 0px 3px 2px #a3a3a3 inset; /*Chrome and Safari*/
-o-box-shadow: 0px 0px 3px 2px #a3a3a3 inset; /*Opera*/
-ms-box-shadow: 0px 0px 3px 2px #a3a3a3 inset; /*Internet Explorer 10*/
border: 2px solid #000000;
box-shadow: 0px 0px 3px 3px #333333;
-moz-box-shadow: 0px 0px 3px 3px #333333;
<a href="http://www.w3schools.com/html5/default.asp" style="color: black;" target="_blank">HTML</a>
This button has been drawn using the HTML5 gradient fill method. Unfortunately, there seems to be no support as yet, for rounding corners of the canvas.
So, I have used another div and applied an inset box-shadow to make it look like the corners are rounded.
However, there is some support for rounding the canvas corners when using the SVG gradient method.
This will be my next post.
For a more detailed look go to http://www.blueflux.eu/HTML5.html
This post was written as all the new methods were being released. Since then I have cleaned up the html to make it easier for anyone reading this to understand, and copy and paste the code into their own HTML editor to experiment with themselves.
There is also more support for CSS3 in most of the modern browsers available.
Instead of using the HTML5 Gradient, you can use CSS to do it instead, below is an example of a gradient fill:
( Support for this technique is still limited for example on IE9 and Opera and using HTML5 instead seems to have more support within all the browsers rather than using css. )
This will apply a gradient from one colour to another, starting at the top, and will be blended in half way down the height of the div( or canvas ) to the second colour:#FFFFFF.
background: linear-gradient(top, #AA8800, #FFFFFF 50%);
-moz-background: linear-gradient(top, #AA8800, #FFFFFF 50%);
-webkit-background: linear-gradient(top, #AA8800, #FFFFFF 50%);
-o-background: linear-gradient(top, #AA8800, #FFFFFF 50%);
-ms-background: linear-gradient(top, #AA8800, #FFFFFF 50%);
This will create a gradient that has another colour blending into and out of the centre of the div
background: linear-gradient(top, #AA8800, #FFFFFF 54%, #AA8800 10%,#AA8800);
There is now greater support for the border-radius property:
But again, support isn't 100% so you'll have to do the same as me and many other developers and make up your own mind on how to design your site and the best techniques to use to cover the wide variety of browsers that people use today.