Web Design: Buttons (Part 2: Buttons Using CSS)


Buttons Intro   |    Traditional Buttons Using Images   |    Buttons Using CSS   |    HTML buttons   |    Top


 

Generating Buttons Using CSS

You can also generate buttons using Cascading Style Sheets to generate various effects.

In the early days of the Web, buttons were ususally created as independent images. Each button with a different label was a separate image. For example:

To display two buttons, you need a button to have a different instruction, you would need to use a graphics program to modify a button and reference it separately. For example:

home button sample About button sample


While these use the same basic graphic, they are two separate images. The code to display them would typically include the image tag, and the source where the graphic is loaded. Optionally, you might include alternative text:

<img src="images/btn_home.png" alt="home" />
<img src="images/btn_about.png" alt="about" />

Downsides included a requirement for substantial image manipulation; the requirement for web space for all of those graphics; the time needed to generate and upload them.

There are many ways to create buttons. When using HTML forms, buttons are automatically generated when including the value submit in the form input type. However, there are new approaches to using HTML forms.

When including buttons that are not forms, in the old days of the Web, buttons were ususally created as independent images. Each time you need a button to have a different instruction, you would need to use a graphics program to modify a button and reference it separately. For example:

home button sample About button sample


Note: No links are associated with these buttons. They are just examples.

In the modern world of web development, buttons can be implemented using HTML forms, images, or using Cascading Style Sheets (CSS).

This section addresses the three technical approaches to including buttons on your website.

As a side note, in addition to the technical approaches discussed here, ther are stylistic concerns to be thought through. It takes some practice to ensure your buttons are visually compelling without overbalancing the content on the page. Also, the style of button you use must be consistent with the general look and feel of your website.

Submit Buttons in HTML Forms

HTML forms are generally used to pass data to a server. Forms usually contain any number of controls for entering data, such as checkboxes, radio buttons, text or password fields or areas, and a Submit button.

When the Submit button is clicked, the data entered into the form is sent to the page specified in the form's action attribute. For example:

HTML Forms code showing form with standard Submit button


<form name="input" action="html_form_action.php" method="get">
Enter your name: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

This results in the following:

Enter your first name:

 

Changing HTML Forms Submit Buttons with CSS

You can employ CSS to create a class with a background image for the button. Whenever you include a web form, you can then specify that class and replace the standard web Submit button with your own style.

This is how you would apply the class to the Forms code (changes in red):

<form name="input" action="html_form_action.php" method="get">
Enter your name: <input type="text" name="user" />
<input type="submit" value="Submit" class="button" />
</form>

You would then add CSS definitions associated with the class you specified.

CSS Definition for New Submit Button

.button {
background: white url('../images/btn/btn_red_200.png') no-repeat top;
width: 200px;
height: 35px;
color:white;
border:hidden;
}

Optional Enhancement


If you wish, using a second CSS class that specifies a hover action, you can add a Javascript rollover effect to specify a different button image upon a mouseover event (e.g., when hovering over the button).

CSS Definition for Image Swap on Hover

.button:hover {
background: white url('../images/btn/btn_blue_85.png') no-repeat top;
}

Putting it Together

Here's the final result:

Enter your first name:

 

And that's what we've got to add about Submit buttons in HTML! Read on for more tips.


Buttons Intro   |    Traditional Buttons Using Images   |    Buttons Using CSS   |    HTML buttons   |    Top