首先我们介绍一下HTML中按钮标签的样式设置：

普通按钮设置：

您可以通过将输入元素的类型属性设置为“button”来创建普通按钮。按钮上显示的文本是值属性的值。如果没有提供值属性，则只创建一个空按钮。例如：

Inputtype='button'value='立即购买'

tuyi.png

效果很明显，这是普通按钮的默认设置。

默认情况下，点击普通按钮没有响应。所以需要为普通按钮注册事件，手工编写相应的处理函数。如果您想在单击上述按钮时提交表单，您应该为该按钮注册一个onClick事件。例如：

form name=' buy ' action=' form . html ' method=' post '

按钮单击='提交表单(购买)'立即购买/按钮

/form

现在点击按钮，会触发onClick事件，调用事件处理函数submitForm(buy)。参数buy是要处理的表单的名称属性值。如果希望在单击按钮后提交表单，可以在事件处理程序中调用表单对象的submit()方法：

functionsubmitForm(f){

f . submit()；

}

这是默认设置，现在让我们看看html按钮标签的设置样式：

让我们向您展示一个完整的代码示例：

！doctypehtml

超文本标记语言

头

metacharset='utf-8 '

TitlePHP中文网站/标题

风格。div{

display : inline-block；

padd :3 em . 5 em；

background-image : linear-gradient(# DDD，# BBB)；

border:1pxsolidrgba(0，0，0， 2)；

border-radius :3 em；

box-shadow :01 pxwhite inset；

text-align : center；

text-shadow :01 px1 pxblack；

颜色：白色；

font-weight : bold；

}

. div:active{

box-shadow :05 em . 1 em . 2 em rgba(0，0，0， 6)插图；

border-color:rgba(0，0，0， 3)；

背景# bbb

}

/style

/head

身体

divclass='div '按钮/div

/body

/html

tuer.png

这样的效果不明显，比默认好很多。当我们学习js时，我们可以使用js技术来使默认按钮更加漂亮。

本文转载自中文网站