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>
    

这个的效果如图：

这个的效果是不是很明显，比默认的时候好看多了，等到我们学到js的时候，我们还能用js的技术把这默认的按钮设置的更加美观。

好了，以上就是关于html button标签的样式设置，还有美化样式的总结(想学更多就来PHP中文网)，有问题的可以在下方提问。

【小编推荐】

html下拉菜单怎么做？html下拉菜单的代码实例介绍

html单选按钮默认选中怎么做？input标签的单选按钮用法实例

以上就是html button标签的样式怎么设置？html button标签的样式介绍的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！