一、制作常規(guī)按鈕
制作按鈕非常簡單，在<input>標(biāo)記中把type參數(shù)設(shè)置為：type="submit"就獲得一個(gè)提交按鈕，如本例的“提交”按鈕；在<input> 標(biāo)記中把type參數(shù)設(shè)置為：type="reset"就獲得一個(gè)復(fù)原按鈕，如本例的“重寫”按鈕；在<input>標(biāo)記中把type參數(shù)設(shè)置為：type="button"就獲得一個(gè)普通按鈕。本例的按鈕源代碼如下：
<input type="submit" name="Submit" value="提 交">
<input type="reset" name="Reset" value="重 寫">
<input type="button" name="butto11" value="點(diǎn)我試試" onclick="alert('謝謝您點(diǎn)擊！')" >
按鈕的制雖簡單，但在制作按鈕時(shí)要注意兩點(diǎn)：
1、對于特殊按鈕，一般不需另加動(dòng)作，當(dāng)按下按鈕時(shí)就有動(dòng)作發(fā)生；而對于普通按鈕，必須加上指定的動(dòng)作并用相就的事件來觸發(fā)，才會在事件發(fā)生時(shí)激發(fā)動(dòng)作，否則按下普通按鈕，什么也不發(fā)生。在本例的普通按鈕上加了一個(gè)彈出提示窗口的動(dòng)作：alert('謝謝您點(diǎn)擊！')，并用onclick事件來觸發(fā)，所以當(dāng)你在那個(gè)按鈕上點(diǎn)擊時(shí)會彈出一個(gè)窗口，并顯示“謝謝您點(diǎn)擊！”這句話。
2、按鈕上的文字是通過設(shè)置value參數(shù)來實(shí)現(xiàn)的，其默認(rèn)值是英文名。
二、改變按鈕的外觀
HTML對文本提供了豐富的顏色設(shè)置，唯獨(dú)對表單按鈕默認(rèn)的則是Windows系統(tǒng)的顏色，顯得有點(diǎn)死板，而且也沒有提供按鈕的顏色設(shè)置參數(shù)，因此，要改變表單按鈕的外觀，只能借助于CSS了。請看下面的示例：
你看！這個(gè)按鈕是不是變了樣，新鮮多了吧？我們來看看它的源代碼作了那些改變。按鈕源代碼：
<input type="submit" name="Submit" value="提 交" style=" font-size: 12px; background: #CCCCFF; border-width: thin thin thin thin; border-color: #CCCCFF #CCCCCC #CCCCCC #CCCCFF">
從源代碼中可以看出，按鈕的基本參數(shù)設(shè)置沒變，只是加了一段CSS代碼，正是這段CSS代碼改變了按鈕的外觀風(fēng)格。在這段CSS代碼中，不僅重新設(shè)置了表單按鈕的背景色和字號大小，而且還對按鈕的邊框線進(jìn)行了設(shè)置，把上邊框線、左邊框線設(shè)置淺一點(diǎn)的顏色，而把下邊框線、右邊框線設(shè)置深一點(diǎn)的顏色，其目的是使表單按鈕產(chǎn)生立體效果。當(dāng)然，你可以任意改變CSS代碼中顏色，以使按鈕的顏色與所在網(wǎng)頁的顏色協(xié)調(diào)。
若想使表單按鈕一改那死板板的老面孔，能象網(wǎng)頁中其它導(dǎo)航菜單那樣具有動(dòng)態(tài)變換樣式的效果且仍具其特殊地表單按鈕功能，使它更具吸引人的魅力，采用本文介紹的制作方法是個(gè)不錯(cuò)的主意。請看下面的示例子。
一、動(dòng)態(tài)變換文本按鈕
鼠標(biāo)不在按鈕上
鼠標(biāo)在按鈕上
你看！這個(gè)按鈕的效果不錯(cuò)吧？！制作這種效果的思路是這樣的，利用CSS屬性可以動(dòng)態(tài)改變的特點(diǎn)，先給按鈕定義兩種外觀樣式，再在<input>標(biāo)記中加上兩個(gè)事件，即onmuseover（鼠標(biāo)在按鈕上）和onmuseout （鼠標(biāo)離開按鈕），我們用這兩個(gè)事件分別調(diào)用不同的CSS定義的按鈕外觀樣式，從而達(dá)到動(dòng)態(tài)變換的效果。為了提高CSS的利用率（若有多個(gè)按鈕，則可重復(fù)使用），把CSS放到<head>與</head>之間，在按鈕中用class 調(diào)用CSS格式。本例在<head>與</head>之間的CSS代碼是這樣的：
<style type="text/css">
<!--
.style1 { font-size: 12px; background: #CCCCFF; border-width: thin thin thin thin; border-color: #CCCCFF #CCCCCC #CCCCCC #CCCCFF}
.style2 { font-size: 12px; font-weight: bold; background: #CCFFCC; border-width: thin medium medium thin; border-color: #CCFF99 #999999 #999999 #CCFF99}
-->
</style>
本例按鈕的代碼如下：
<input type="submit" name="Submit" value="提 交" onmouseover="this.className='style2'" onmouseout="this.className='style1'" class="style1">
從上面的代碼中可看到，當(dāng)鼠標(biāo)移到按鈕上，也就是onmuseover事件發(fā)生，那么按鈕將采用style2甩定義的外觀樣式；當(dāng)鼠標(biāo)移開按鈕時(shí)，也就是onmuseout事件發(fā)生，那么按鈕就采用style1所定義的外觀樣式，從而實(shí)現(xiàn)了動(dòng)態(tài)變化的目的。后面那個(gè)class="style1"的作用是當(dāng)onmouseover、onmouseout這兩個(gè)事件都沒發(fā)生時(shí)，采用style1所定義的外觀樣式，從而保持了按鈕外觀的一致性。
二、動(dòng)態(tài)變換圖像按鈕
鼠標(biāo)不在按鈕上
鼠標(biāo)在按鈕上
本例與上例在制作思路和制作方法上均沒有多大區(qū)別，只是采用了兩張圖片來作按鈕背景，但產(chǎn)生的效果卻非同一般。在制作這種效果的按鈕時(shí)要注意兩點(diǎn)：
1、作按鈕背景的圖片最好用具透明背景的gif圖片，這樣可以做出各種各樣形狀的按鈕，將具有很強(qiáng)的個(gè)性；
2、背景圖片的大小要與按鈕的大小一致，否則，由于背景的平鋪填充，將使按鈕面目全非。
下面是本例在<head>與</head>之間的CSS代碼：
<style type="text/css">
<!--
.style3 { font-size: 12px; background: url(image/buttonbg1.gif); border: 0px; width: 60px; height: 22px}
.style4 { font-size: 12px; font-weight: bold; background: url(image/buttonbg2.gif); border: 0px 0; width: 60px; height: 22px}
-->
</style>
本例的按鈕代碼如下：
<input type="submit" name="Submit2" value="提 交" onmouseover="this.className='style4'" onmouseout="this.className='style3'" class="style3">
從按鈕代碼可看出它與例一的按鈕代碼完全相同，但本例的CSS代碼與例一有較大的區(qū)別，這里要注意：url后面的括號中是按鈕背景圖片的地址，也就是含路徑的圖片文件名，你在實(shí)際制作時(shí)要把它改成圖片的實(shí)際地址。
另外再多講一句，你若是用圖形化網(wǎng)頁制作工具（如Dreamweaver)，那么凡是用CSS產(chǎn)生的效果，一般在編輯窗中是看不到的， 如本文的按鈕效果，只有在預(yù)覽時(shí)才能看到，在編輯窗口中看到的仍是表單默認(rèn)的那種樣子。
