styling form buttons with divs
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.
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');} |
Job done 😉
9,843 views
This entry was posted on Friday, August 28th, 2009 at 4:57 pm and is filed under Programming. You can follow any responses to this entry through the RSS 2.0 feed.