html button标签的样式怎么设定？html button标签的样式介绍-百分百源码网

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

发布时间：09/01 来源：未知浏览：关键词：

本篇文章主要的介绍了关于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>

这个的结果如图：