首先我们先介绍HTML中的button标签的样式设置：
普通按钮设置：
把input元素的type属性设置为“button”，可以创建普通按钮。按钮上显示的文本是value属性的值，如果没有提供value属性，则只创建一个空按钮。如：
<inputtype="button"value="立即购买">
tuyi.png
效果很明显，这是默认普通按钮的设置。
默认情况下，在普通按钮上点击，是没有任何反应的。因此，需要为普通按钮注册事件，并手动编写相应的处理函数。假如希望单击上述按钮时，提交表单，则要为按钮注册onClick事件。如：
<formname="buy"action="form.html"method="post">
<buttononClick="submitForm(buy)">立即购买</button>
</form>
现在点击按钮，就会触发onClick事件，并调用事件处理函数submitForm(buy)，参数buy为待处理表单name属性的值。如果希望点击按钮后提交表单，就可以在事件处理函数中调用form对象的submit()方法：
functionsubmitForm(f){
f.submit();
}
这是一个默认情况的设置，现在我们来看看给htmlbutton标签设置样式：
给大家看一个完整的代码实例：
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>PHP中文网</title>
<style>
.div{
display:inline-block;
padding:.3em.5em;
background-image:linear-gradient(#ddd,#bbb);
border:1pxsolidrgba(0,0,0,.2);
border-radius:.3em;
box-shadow:01pxwhiteinset;
text-align:center;
text-shadow:01px1pxblack;
color:white;
font-weight:bold;
}
.div:active{
box-shadow:.05em.1em.2emrgba(0,0,0,.6)inset;
border-color:rgba(0,0,0,.3);
background:#bbb;
}
</style>
</head>
<body>
<divclass="div">Button</div>
</body>
</html>
tuer.png
这个的效果是不是很明显，比默认的时候好看多了，等到我们学到js的时候，我们还能用js的技术把这默认的按钮设置的更加美观。
本文转载自中文网
本文转载自中文网
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h54752.shtml
