CSS button model with submit

Button model	Examples
	Simple button:
	Button with image:
	Button with onmouseover:
	Button with unique design:

CSS setting:

1) reset.css CSS reset based on YUI library
2) basic.css General CSS settings of the page
3) button.css General CSS for button desing
4) button_ie.css Additional CSS settings for IE. Conditional formatting is available under IE. The settings won't disturb any other borwser. More info...

<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="basic.css" />
<link rel="stylesheet" type="text/css" href="button.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="button_ie.css" />
<![endif]-->

Button codes

The normal submit input can be found between two b tags, with specific CSS classes.
Firstly the general css settings should be defined, then set the different withs and graphics for the buttons.

Standard button

<b class="b w100"><b><input type="submit" value="Sign up" /></b></b>

Standard button with an icon

<b class="b ia w100"><b><input type="submit" value="Sign up" /></b></b>

Special button

<b class="b spec"><b><input type="submit" value="" /></b></b>

CSS classes

b

This is the background of the 1px width line on the left and right side of the button.
IE and FF browsers calculate the width of the tags in different ways because of the properties of the border and padding. In FF the padding and the border generate additional width, that is why a 100px width div with 1px border and 2px paddign will be 100+2*1+2*2 = 106px. In case of IE this will remain 100px.

.b {
	background-image: url(s.gif);
	background-repeat: repeat-x;
	display: block;
	padding-left: 1px;
	padding-right: 1px;
}
/* IE browsers need to reset the padding*/
/*button_ie.css*/
.b {
	text-align: center;
	padding-left: 0px;
	padding-right: 0px;
}

The second b tag will be the background of the button and this tag will be responsible for the height of the button too.

.b b {
	background-image: url(c.gif);
	background-repeat: repeat-x;
	height: 20px;
	padding-top: 1px;
	display: block;
}

The input after the second b tag contains the text the text-style and the mouse pointer. Input is required the handle the Enter button without javascript.

.b b input {
	font-size: 12px;
	border: none;
	font-weight: normal;
	color: #333;
	background: transparent;
	width: 100%;
	cursor: pointer;
	padding-top: 1px;
}

This setting removes the pointed line in FF when the focus is on the button. More info...

.b b input::-moz-focus-inner {border: none;}

ia

Icon can be put into the button with the following settings. This class will affect on input tag. You should check the length of the text and the size of the icon.
Transparent PNG won't work with IE6, so GIF should be used.

.b.ia b input {
	background-image: url(accept.png);
	background-repeat: no-repeat;
	background-position: 7px 1px;
	padding-left: 18px;
}

spec

Different buttons can be made by setting new classes in button.css.

b.spec {
	background-image: url(spec-btn.png);
	background-repeat: no-repeat;
	width: 188px;
	height: 93px;
}
.b.spec b {
	background-image: none;
}
.b.spec b input {
	height: 93px;
}

w100

This class set the width of the button. It is worth to preset all the button width which should be used in the projekt. Use readable class names: w100 means width 100px-t, w230 means width 230px

.b.w100 b, .b.w100 {
	width: 98px;
}
/*a fent említett méret gondok miatti külön IE meghatározás*/
/*button_ie.css tartalma*/
.b.w100 {
	width: 100px;
}

Special button

You can add interactivity to the button with a small javascript.

Javascript include and changes in button element.

<script type="text/javascript" src="button.js"></script>
<b class="b w100" onmouseover="changeButton(true, this);" onmouseout="changeButton(false, this);">
 <b><input type="submit" value="Sign up" />

This script changes the background and the text-style.

function changeButton(ev, el){
	if(ev) {
		el.getElementsByTagName("b")[0].getElementsByTagName("input")[0].style.color="ffffff";
		el.getElementsByTagName("b")[0].style.backgroundImage="url(c-c.gif)";
		
	} else {
		el.getElementsByTagName("b")[0].getElementsByTagName("input")[0].style.color="333333";
		el.getElementsByTagName("b")[0].style.backgroundImage="url(c.gif)";
	}
}

Notes

If you didn't prefer to use the b tags, then the normal div tags should be used too.
What is the difference? Almost nothing, b has less char than div.
If you selected div then shouldn't use display: block; setting in the relevant classes as div default setting is block.

.b {
	background-image: url(s.gif);
	background-repeat: repeat-x;
	padding-left: 1px;
	padding-right: 1px;
}

The b tag has an additional positive feature. You can make px sized design element (e.g separator line). In case of div you can do it as well, but font-parameter is a must and IE needs a space char to display it in the correct way. Space should be replaced the old "spacer.gif" too.