首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

旋钮常用样式

2012-09-02 
按钮常用样式按钮常用样式CSS样式 .btnNormal {background: url(../images/btn_normal.png) no-repeat s

按钮常用样式
按钮常用样式


CSS样式

.btnNormal {background: url("../images/btn_normal.png") no-repeat scroll0 transparent}.btnOver {background: url("../images/btn_hover.png") no-repeat scroll0 transparent;}.btnClick {background: url("../images/btn_press.png") no-repeat scroll0 transparent;}


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



<input type="button" id="btn" 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鼠标从按钮上移除的事件

热点排行