html button标签的样式怎么设置？html button标签的样式介绍

互联网 18-9-3

本篇文章主要的介绍了关于HTML button标签的样式设置，还有关于HTML button标签的美化样式介绍，接下来就让我们一起来阅读本篇文章吧

首先我们先介绍HTML中的button标签的样式设置：

普通按钮设置：

把input元素的type属性设置为“button”，可以创建普通按钮。按钮上显示的文本是value属性的值，如果没有提供value属性，则只创建一个空按钮。如：

<input type="button" value="立即购买">

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

默认情况下，在普通按钮上点击，是没有任何反应的。因此，需要为普通按钮注册事件，并手动编写相应的处理函数。假如希望单击上述按钮时，提交表单，则要为按钮注册onClick 事件。如：

<form name="buy" action="form.html" method="post">     <button onClick="submitForm(buy)">立即购买</button> </form>

现在点击按钮，就会触发onClick事件，并调用事件处理函数submitForm(buy)，参数buy为待处理表单name属性的值。如果希望点击按钮后提交表单，就可以在事件处理函数中调用form对象的submit()方法：

function submitForm(f) {     f.submit();   }

这是一个默认情况的设置，现在我们来看看给html button标签设置样式：

给大家看一个完整的代码实例：

<!doctype html> <html> <head> <meta charset="utf-8"> <title>PHP中文网</title> <style> .div {     display: inline-block;     padding: .3em .5em;     background-image: linear-gradient(#ddd, #bbb);     border: 1px solid rgba(0,0,0,.2);     border-radius: .3em;     box-shadow: 0 1px white inset;     text-align: center;     text-shadow: 0 1px 1px black;     color:white;     font-weight: bold; } .div:active{     box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;     border-color: rgba(0,0,0,.3);     background: #bbb; } </style> </head> <body> <div class="div">Button</div> </body> </html>

这个的效果如图：