旋钮样式

按钮样式
CSS样式
Java代码 
.btnNormal {  
    background: url("../images/btn_normal.png") no-repeat scroll  
        0 transparent  
}  
 
.btnOver {  
    background: url("../images/btn_hover.png") no-repeat scroll  
        0 transparent;  
}  
 
.btnClick {  
    background: url("../images/btn_press.png") no-repeat scroll  
        0 transparent;  
} 

.btnNormal {
background: url("../images/btn_normal.png") no-repeat scroll
0 transparent
}

.btnOver {
background: url("../images/btn_hover.png") no-repeat scroll
0 transparent;
}

.btnClick {
background: url("../images/btn_press.png") no-repeat scroll
0 transparent;
}


JS代码，当鼠标移到按钮上，离开按钮上，点击按钮时修改按钮样式
Java代码 
function click(){  
        $("#btn").attr("class", "btnClick");  
    }  
      
    function mouseOver(){  
        $("#btn").attr("class", "btnOver");  
    }  
      
    function mouseOut(){  
        $("#btn").attr("class", "btnNormal");  
    } 

function click(){
$("#btn").attr("class", "btnClick");
}

function mouseOver(){
$("#btn").attr("class", "btnOver");
}

function mouseOut(){
$("#btn").attr("class", "btnNormal");
}


Java代码 
<input type="button" id="btn" class="btnNormal" name="btn" value="确 定" style="font-size:12px;padding-bottom:3px;color:white;margin-left:50px;width:96px;height:28px;border:0px;" onclick="click()" onmouseover="mouseOver()" onmouseout="mouseOut()"/> 

<input type="button" id="btn" class="btnNormal" name="btn" value="确 定" style="font-size:12px;padding-bottom:3px;color:white;margin-left:50px;width:96px;height:28px;border:0px;" onclick="click()" onmouseover="mouseOver()" onmouseout="mouseOut()"/>


font-size:12px;设置按钮中文本字体大小
padding-bottom:3px;padding样式设置按钮中文本字体位置
color:white;设置按钮中文本颜色
margin-left:50px;设置按钮与左边元素距离
border:0px;设置按钮边框，设置为0时可以去掉加上背景后的按钮边框
onmouseover鼠标移到按钮上的事件
onmouseout鼠标从按钮上移除的事件