HTML gives you limited control over the appearance of your input buttons. With HTML, you are only able to generate a default browser button for a form or any project that requires the creation of buttons. More often than not, HTML buttons appear as grey with black text, never mind if it does not go along well with your website’s color scheme. These days are over with CSS.

As in most elements in HTML, CSS could be used to customize your buttons to suit your taste. You are given the power to choose the color of your button, your font color, type, and size, and even the background of your buttons.

As an example, let us take an image with gradient and create a Web 2.0 style button. Firstly, we will create a 4px-wide and 20px-tall image. Next, let us use the gradient tool to input a fading effect between our site’s two main colors. We used green and blue in our image based on our CSS Juice logo. This is what we get:

By itself, it is hard to tell the appearance of the image. But with CSS, we could use the image as a repeat background to make it larger. Making the image small has its advantages. It is definitely beneficial to users with slow Internet connections. The image is only 340 bytes, thus quicker download speed. Another advantage is we can reuse the image on larger buttons.
Review the following CSS-styled button:
button {
background: url(images/cssjuice_fade.jpg) repeat;
color: white;
}
Have you noticed how simple it is to create a faded button with CSS? All it takes to make it work is selecting an image. If you want to remove the fade effect, style the background of your buttons by using the input element instead of the button element. Just remember to create a class and apply it to the input element. As you can see there is nothing complicated in the process and I think you will agree to this claim more after you have performed this trick for you web pages.

Tags: Customized Buttons in Web 2.0