What are CSS Buttons?

CSS buttons are buttons created with HTML and CSS code.

Why use CSS Buttons?

While Image Buttons doesn't add that much size to a Web page, the bandwidth requirements do add up, resulting in a slower page load.

Faster Web page load

To be sure Web pages you create load as fast as possible, CSS buttons can be used as a strong alternative to Image Buttons since they usually don't add as much to the total file size. Smaller file size means faster page load which of course is desirable for most sane Web developers.

There are, however, other benefits as well. For example - if coded correctly - resizable button text for Web site visitors, and easier site maintenance for Web developers.

Resizable button text for visitors

If the CSS code for a Web page define the em or percent unit for the font-size value, the text will be resizable even for users that use Internet Explorer version 6(and below) as their Web browser.

Unlike Image Buttons CSS Buttons will - along with the rest of the text - be resizable since the buttons are made out of pure text.

Of course the width and hight of Image Buttons can use the em or percent units to make them resizable, but it's more difficult to get the same look for the buttons in different Web browsers, and - since the file size of the buttons are/should be reduced as much as possible - the quality of the Image Buttons will decrease in an ugly way when they are enlarged.

Easier site maintenance

As for easier site maintenance you might, for example, wan't to change the visual size of a CSS button you use site-wide. This could easily be done by changing the width and height values for the CSS button, or have a larger value for the font-size of the button text to make the text stretch out the button's width and height automatically.

Or you might wanna change the background and/or the button text color of the button. This too is easily done by changing the values of the background or color property in the Style Sheet.

CSS Buttons Example - Previous and Next Buttons

Below is an example of how Previous and Next buttons can look like when created with CSS. Note that, if you change the text size of this Web page, they too will change their size.

To change the text size you can, in most browsers, press down the CTRL button while using the scroll wheel on your mouse, or - if you use Internet Explorer or Firefox - change the text size under the View menu(View -> Text size).

I linked to the CSS file in the head section of this HTML page like this:

<link type="text/css" rel="stylesheet" media="all" href="css_buttons_style.css" />

That's it guys...