styling form buttons with divs

by Adrian on Aug.28, 2009, under Programming

Styling a button inside a form with multiple div`s to achieve a curved button with click events etc, can be done relatively easy with the use of javascript.

For example:

firstly lets take a look at our raw code

<form method="post" action="">
      <input type="submit" name="submit">
</form>

Next we place the button within no script tags, so it only displays if javascript is switched off, so that
non javascript enabled browsers can still submit.

<form method="post" action="">
      <noscript>
          <input type="submit" name="submit">
      </noscript>
</form>

Now we add the javascript styled button

 
<form method="post" action="" name="mainForm">
      <noscript>
          <input type="submit" name="submit">
      </noscript>
	<script type="text/javascript">
	<!--					
 
	// do the submission
	function submitform(){
		document.mainForm.submit();
		}
 
	// print the button
	document.write('<a href="javascript:submitform();" style="text-decoration:none; color:#fff; font-weight:bold;">');
 
	document.write('<div id="buyButtonMid">');
	document.write('<div id="buyButtonLeft"></div>');
	document.write('submit');
	document.write('<div id="buyButtonRight"></div>');
	document.write('</div>');
 
	document.write('</a>');
 
 
	// -->
 
	</script>
</form>

Then style your button accordingly with your css,

/* buy button */
#buyButtonRight{
	width:16px;
	height:44px;
	display:block;
	position:absolute;
	top:0;
	right:0;
	cursor:pointer;
	}
 
#buyButtonLeft{
	width:16px;
	height:44px;
	display:block;
	position:absolute;
	top:0;
	left:0;
	cursor:pointer;
	}
 
#buyButtonMid{
	height:24px;
	min-width:20px;
	/*max-width:300px;*/
	padding:13px 20px 7px 20px;
	display:block;
	position:relative;
	float:left;
	cursor:pointer;
	color:#ffffff; 
	font-size:13px; 
	text-decoration:none;
	}
 
 
/* normal */
#buyButtonLeft{background:url('images/add2bas_left.jpg');}	
#buyButtonMid{background:url('images/add2bas_mid.jpg');}	
#buyButtonRight{background:url('images/add2bas_right.jpg');}
 
/* hover */
#buyButtonMid:hover #buyButtonLeft{background:url('images/add2bas_left_hover.jpg');}
#buyButtonMid:hover {background:url('images/add2bas_mid_hover.jpg');}
#buyButtonMid:hover #buyButtonRight{background:url('images/add2bas_right_hover.jpg');}
 
/* click */
#buyButtonMid:active #buyButtonLeft{background:url('images/add2bas_left_click.jpg') no-repeat;}
#buyButtonMid:active {background:url('images/add2bas_mid_click.jpg');}
#buyButtonMid:active #buyButtonRight{background:url('images/add2bas_right_click.jpg');}