2009-08-28 16:57:46 - Article

styling form buttons with divs

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 😉

Comments.log - 0 entries

Leave a Response

System Notice: Your email address will not be published. Required fields are marked with *

LOADING...
Initializing CyberDev systems...