Love the web

A situation I came across recently required a submit button where the text and length could change dynamically yet it was not allowed to rely on any Javascript.

Here's the finished product:

The input needed to be type='submit' as type='image' wouldn't have allowed for varying text and length.

Here's how I styled it:

Make a button graphic (both ends). It should be atleast 300px wide to cope with really wide stuff with hover state below

The HTML:

<div class='submit_button'> <span class='submit_button_end'> <input class='submit_input' type='submit' value='Submit button' tabindex='#' /> </span> </div>

The CSS (you may need to tweak the padding, margins, line-height and color to match your particular design):

div.submit_button { background: transparent url('/images/bg-submit-button.png') no-repeat 0 0; display: block; float: left; height: 24px; /* total height of the button */ padding-left: 15px; /* end width */ } span.submit_button_end { background: #fff url('/images/bg-submit-button.png') no-repeat 100% 0; /* specify bg colour */ display: block; float: left; font-weight: normal; height: 24px; /* total height of the button */ } input.submit_input { font-size: 13px; background: none; border: none; padding: 0 0 2px 15px; /* end width */ color: #fff; cursor: pointer; position: relative; height: 22px; /* total height minus bottom padding */ line-height: 22px; /* same as above */ left: -15px; /* end width */ margin-right: -15px; /* end width */ padding-right: 15px; /* end width */ } input.submit_input:hover {color: #fff;} div.submit_button:hover {background-position: 0 100%;} div.submit_button:hover span.submit_button_end {background-position: 100% 100%;}

IE displays its buttons a bit differently, so you'll need to stick these additions onto your IE6 and IE7 stylesheets:

IE6:

input.submit_input { overflow: visible; line-height: 21px; /* 1px less than line-height of submit_input*/ top: 0; /* This may need to be 1px in some cases */ }

IE7:

input.submit_input { overflow: visible; top: 0; /* This may need to be 1px in some cases */ }