Web 2.0 Customized Buttons
With HTML you have very limited control over how input buttons look. If you want to create a button for a form, when using the just HTML you get the same default browser button. Most of the time this is a gray button with black text, and does not fit the color scheme of your site. If you use CSS, gray buttons are the thing of the past.
Just like most HTML elements, you can use CSS to customize the buttons on your site to fit your site’s design. As with most elements, you can control almost every aspect of your button’s look from the font type all the way down to the background. We are going to use an image with a gradient to create a Web 2.0 style button. First thing we did was create an image that was four pixels wide, and twenty pixels tall. We then used the gradient tool to create a fade between two of the main colors on our site. In our image, we choose the green and blue in the CSS Juice logo. Here is our results.
As you can tell by itself, this image is hard to see, and tell what is actually happening. But with CSS, we can have this image repeat as a background, and thus making the image seem larger. The benefit to creating the image so small is two-fold. If we have users with a slower connection, then they do not have to download a very large image. Our image is only 340 bytes large, this means that users on dial-up will get the same effect, but without the wait. The second reason is with CSS, we can have the image repeat, if we use a smaller image we can reuse this image on larger buttons.
Lets look at the CSS code for our buttons now.
button {
background: url(images/cssjuice_fade.jpg) repeat;
color: white;
}
That is all the CSS code we need to make the faded button. The image does most of the work for us. If you don’t want the fade look, you can use the background attribute to change the background of your buttons. If you don’t use the input element instead of button element, you should create a class to apply to the input element.
Here is a before and after “picture” of the button.
As you can see the Web 2.0 buttons better fits our site’s theme than the default button.
One way that you can use this effect is with a form. You could either make the text or background of a form’s submit button green, where as the cancel or reset button be red. Similar to the buttons below.