CSS Buttons

Recently, I encountered a conundrum. The form submit button on one of our widgets got changed to a gaudy square red thing by the CSS at the web site where the widget was published.

The widget was created to be published on many websites. For design considerations, the submit button's design needed to be permanent.

There were two potential solutions:

1. Use an image instead of a submit button. (Not a satisfactory solution, in this case, as an extra server interaction would be needed for the browser to acquire the image.)

2. Use CSS to publish what looks like and behaves like a submit button. (This is the solution I implemented.)

I'll describe how to use CSS to construct various button styles – including one that looks similar to a form submit button browsers generate automatically.

JavaScript is used to change the button's appearance when it's clicked.

Here are examples:

Click on the buttons to see their appearance change, then change back when the click is released.

The example left button changes its border when it's clicked.

The middle button has a gradient background color, which changes when it's clicked. (Because it emulates a form button, its corners differ depending on whether or not the web page with the button is viewed on a Windows computer.)

The right button has a gradient background color. Both the border and the background gradient change when the button is clicked. (For more information about gradients, see the CSS Color Gradients article.)

Code and notes for the left button style —

First the code. Notes follow.

<style type="text/css">
.button-left-example {
   width:120px; 
   padding:5px; 
   background-color:#f8f2be;
   border-radius:7px;  
   color:#52503f; 
   cursor:pointer; 
   font-weight:bold; 
   font-family:sans-serif;
   text-align:center;
   }
.submitterup-left-example {
   border:3px outset #f8f2be; 
   }
.submitterdn-left-example {
   border:3px inset #f8f2be; 
   }
</style>
<div class="button-left-example submitterup-left-example" 
   onclick="alert('You clicked!')" 
   onmousedown="this.className='button-left-example submitterdn-left-example'" 
   onmouseup="this.className='button-left-example submitterup-left-example'">
<div style="font-size:24px;">Yes</div>
<div style="font-size:14px;">Send My Stuff!</div>
</div>

There are two sections in the above code to discuss — the CSS class names and the div attributes.

The class names are printed in blue. The attribute names are printed in red.

The CSS class definitions

The button-left-example class name is the basic style for the button. The button's design may be changed as you please.

I suggest keeping the cursor:pointer; style so the mouse pointer turns into a link pointer icon when hovering over the button. It shows the user the button is clickable, not just a static image.

The submitterup-left-example class name is the style for when the button is up (unclicked).

The submitterdn-left-example class name is the style for when the button is down (being clicked on).

Both styles submitterup-left-example and submitterdn-left-example affect the buttons border. These, too, may be changed as you please.

The div attributes

The onclick attribute tells the browser what action to take when the button is clicked. See the Giving the buttons some action section further below for examples of various actions a click can initiate.

The onmousedown attribute changes the CSS style to the "down" style when the button is clicked.

The onmouseup attribute changes the CSS style back to the "up" style when the button is clicked.

Code and notes for the right button style —

The code, then notes.

<style type="text/css">
.button-right-example {
   width:120px; 
   padding:5px; 
   background-color:#fcfae5;
   border-radius:5px;  
   color:#63614c; 
   cursor:pointer; 
   font-weight:bold; 
   font-family:sans-serif;
   text-align:center;
   }
.submitterup-right-example {
   border:4px outset #c6c298; 
   background-color:#aea985;
   background:-webkit-linear-gradient(#fcfae5, #aea985); /* For Safari */
   background:linear-gradient(#fcfae5, #aea985); /* Standard syntax (must be last) */
   }
.submitterdn-right-example {
   border:4px inset #c6c298; 
   background-color:#fcfae5;
   background:-webkit-linear-gradient(#aea985, #fcfae5); /* For Safari */
   background:linear-gradient(#aea985, #fcfae5); /* Standard syntax (must be last) */
   }
</style>
<div class="button-right-example submitterup-right-example" 
   onclick="alert('You clicked!')" 
   onmousedown="this.className='button-right-example submitterdn-right-example'" 
   onmouseup="this.className='button-right-example submitterup-right-example'">
<div style="font-size:24px;">Yes</div>
<div style="font-size:14px;">Send My Stuff!</div>
</div>

As with the previous example, the class names are printed in blue. The attribute names are printed in red.

The CSS class definitions

The class definitions are similar to the previous example. The difference is the button is designed with color gradients (which change when the button is clicked). See the CSS Color Gradients article for detailed information about the CSS gradient declarations.

The div attributes

The div attributes are similar to the previous example. Only the class names have changed.

Code and notes for the middle button style —

Here's the code. Notes follow.

<style type="text/css">
.button-middle-example {
   width:200px; 
   height:15px; 
   padding-top:1px; 
   border:1px solid #000; 
   border-radius:10px;  
   color:#333; 
   cursor:pointer; 
   font-size:12px; 
   font-family:sans-serif;
   text-align:center;
   }
.submitterup-middle-example {
   background-color:#efefef;
   background:-webkit-linear-gradient(#fff, #ccc, #fff); /* For Safari */
   background:linear-gradient(#fff, #ccc, #fff); /* Standard syntax (must be last) */
   }
.submitterdn-middle-example {
   background-color:#cfcfcf;
   background:-webkit-linear-gradient(#b6e3f6, #5fa0d3, #b6e3f6); /* For Safari */
   background:linear-gradient(#b6e3f6, #5fa0d3, #b6e3f6); /* Standard syntax (must be last) */
   }
</style>
<div id="submitter-id" 
   class="button-middle-example submitterup-middle-example" 
   onclick="alert('You clicked!')" 
   onmousedown="this.className='button-middle-example submitterdn-middle-example'" 
   onmouseup="this.className='button-middle-example submitterup-middle-example'">
Yes, Send My Stuff!
</div>
<script type="text/javascript">
if( navigator.userAgent.indexOf('Windows') > -1 ) { document.getElementById("submitter-id").style.borderRadius = "3px"; }
</script>

The CSS class definitions and the div attributes are similar to the "right button style" above.

The primary difference is the addition of JavaScript (printed in green). The JavaScript adjusts the corners of the buttons if the browser is running on Windows. The adjusted corners are a closer match to the default button style most Windows browsers generate.

Giving the buttons some action —

An onclick attribute can cause a form to be submitted, a JavaScript function to run, or pretty much anything else JavaScript can do, such as redirecting the browser to another page. Here are examples:

• To submit a form, the form tag needs to have an id value. It's id value is used in the code to cause the form to be submitted.

  onclick="document.getElementById('id-value-of-form-tag').submit()"
  

• To run a JavaScript function specify the function name as in this example.

  onclick="NameOfFunction()"
  

• This example will spawn an alert when the button is clicked.

  onclick="alert('Thanks for clicking!')"
  

• To redirect the browser to a different URL, specify the URL as in this example.

  onclick="location.href='//www.willmaster.com/'"
  

Any HTML div tag can be coded to function like a form submission button, or a button to do other duties, such as redirect the web page when clicked.

Will Bontrager