html button標(biāo)簽的樣式如何設(shè)置？html button標(biāo)簽的樣式說(shuō)明
發(fā)表時(shí)間：2023-09-03 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]本篇文章主要的介紹了關(guān)于HTML button標(biāo)簽的樣式設(shè)置，還有關(guān)于HTML button標(biāo)簽的美化樣式介紹，接下來(lái)就讓我們一起來(lái)閱讀本篇文章吧首先我們先介紹HTML中的button標(biāo)簽的樣式設(shè)置：普通按鈕設(shè)置：把input元素的type屬性設(shè)置為“button”，可以創(chuàng)建普通按鈕。按鈕上顯示的...
本篇文章主要的介紹了關(guān)于HTML button標(biāo)簽的樣式設(shè)置，還有關(guān)于HTML button標(biāo)簽的美化樣式介紹，接下來(lái)就讓我們一起來(lái)閱讀本篇文章吧
首先我們先介紹HTML中的button標(biāo)簽的樣式設(shè)置：
普通按鈕設(shè)置：
把input元素的type屬性設(shè)置為“button”，可以創(chuàng)建普通按鈕。按鈕上顯示的文本是value屬性的值，如果沒有提供value屬性，則只創(chuàng)建一個(gè)空按鈕。如：
<input type="button" value="立即購(gòu)買">
效果很明顯，這是默認(rèn)普通按鈕的設(shè)置。
默認(rèn)情況下，在普通按鈕上點(diǎn)擊，是沒有任何反應(yīng)的。因此，需要為普通按鈕注冊(cè)事件，并手動(dòng)編寫相應(yīng)的處理函數(shù)。假如希望單擊上述按鈕時(shí)，提交表單，則要為按鈕注冊(cè)onClick 事件。如：
<form name="buy" action="form.html" method="post">
<button onClick="submitForm(buy)">立即購(gòu)買</button>
</form>現(xiàn)在點(diǎn)擊按鈕，就會(huì)觸發(fā)onClick事件，并調(diào)用事件處理函數(shù)submitForm(buy)，參數(shù)buy為待處理表單name屬性的值。如果希望點(diǎn)擊按鈕后提交表單，就可以在事件處理函數(shù)中調(diào)用form對(duì)象的submit()方法：
function submitForm(f) {
f.submit();
}這是一個(gè)默認(rèn)情況的設(shè)置，現(xiàn)在我們來(lái)看看給html button標(biāo)簽設(shè)置樣式：
給大家看一個(gè)完整的代碼實(shí)例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文網(wǎng)</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>這個(gè)的效果如圖：
這個(gè)的效果是不是很明顯，比默認(rèn)的時(shí)候好看多了，等到我們學(xué)到j(luò)s的時(shí)候，我們還能用js的技術(shù)把這默認(rèn)的按鈕設(shè)置的更加美觀。
好了，以上就是關(guān)于html button標(biāo)簽的樣式設(shè)置，還有美化樣式的總結(jié)(想學(xué)更多就來(lái)PHP中文網(wǎng))，有問(wèn)題的可以在下方提問(wèn)。
【小編推薦】
html下拉菜單怎么做？html下拉菜單的代碼實(shí)例介紹
html單選按鈕默認(rèn)選中怎么做？input標(biāo)簽的單選按鈕用法實(shí)例
以上就是html button標(biāo)簽的樣式怎么設(shè)置？html button標(biāo)簽的樣式介紹的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
