Web Design: Buttons (Part 4: HTML buttons)


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


 

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