Styling the Submit Button

Although most are similar, each browser generates its own default submit button style. When the button is clicked, the style changes to provide a visual indication that the button is in the down position.

The form submit button can be custom styled with CSS. JavaScript can be used to change the style when the button is clicked to signify the down position.

To implement (working example and code further below):

1. Create two CSS classes, one to style the submit button when it is up (unclicked) and one when it is down (clicked).

2. Create a form submit button with an id value. Its class name is the button up style.

3. Copy the JavaScript from the text box further below, edit if needed, and paste it into the page with the button and CSS style.

An Example Styled Submit Button

Here is an example. The border color and style, and the button text color and letter spacing, change when clicked to the down position.

Implementing the Example Styled Submit Button

The Two CSS Classes

Here are the CSS classes for the example button. The up position class is named "button_up" and the down position class is named "button_down".

<style type="text/css">
.button_up { 
   border:2px solid blue; 
   border-radius:10px;
   padding:5px; 
   background-color:white; 
   color:blue; 
   text-align:center; 
   font-size:12px; 
   font-weight:bold; 
   width:200px; 
   cursor:pointer; 
   }
.button_down { 
   border:2px solid red; 
   border-radius:10px;
   padding:5px; 
   background-color:#eee; 
   color:red; 
   text-align:center; 
   font-size:12px; 
   font-weight:bold; 
   width:200px; 
   letter-spacing:3px;
   }
</style>

The JavaScript (further below) will use the class names to change the button's style when it is clicked.

The border color for the button_up class is blue. For the button_down class it is red. The text color differences are blue and red. The background color differences are white and pale gray.

The button_down class has a letter-spacing class that the button_up class does not. The letter-spacing style is 3 pixels. It expands the button text with 3 pixels between each letter when the button is clicked.

The button_up class has a cursor style that the button_down class does not. The cursor style is the pointer icon, the same as expected when hovering over web page links. If the button is so styled that it is not recognized as a button, the cursor pointer icon can let the site user know it is clickable.

Your buttons may, of course, have whatever style desired for your implementation.

The Submit Button

Here is the code for the example submit button form field.

<input 
   type="button" 
   id="button_to_style" 
   class="button_up" 
   onmousedown="ButtonIsDown()" 
   onmouseup="ButtonIsUp()" 
   value="Button Text">

The example button is type="button" to work as a demonstration. Change type="button" to type="submit" for use with a regular form.

The button id value is "button_to_style", which the JavaScript (further below) will use to change the button's style.

The class is specified as "button_up" to display the button's up position style when the page first loads.

The onmousedown and onmouseup attributes call corresponding JavaScript functions. The JavaScript functions change the button's style accordingly.

The JavaScript

Here is the JavaScript.

<script type="text/javascript">
function ButtonIsDown() { 
document.getElementById("button_to_style").className = "button_down"; 
}
function ButtonIsUp() { 
document.getElementById("button_to_style").className = "button_up"; 
}
</script>

The "button_to_style" in both places is the same as the submit button's id value. "button_down" and "button_up" are the corresponding class names.

Whenever the submit button's id or the class names change, the JavaScript needs to be updated accordingly.

Going Live with the Styled Submit Button

When the style is the way you want it, you are ready to go live.

For a regular form submission, the button is type="submit". The button will work just like a regular form button.

Will Bontrager