Content.exe
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
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.
Now we add the javascript styled button
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 😉