對於一個交互式表單，按鈕是必不可少的。按鈕一般分為兩類，一類本身就具有特定的功能，叫做特殊按鈕，如Submit（提交按鈕）——用於傳輸用戶所填寫的信息至服務器、Reset（復原按鈕）——清除所填寫的信息以利重新填寫；另一類本身不具特殊功能的，叫作普通按鈕。特殊按鈕只能用於表單才能發揮特殊的功能。而普通按鈕除可在表單中應用外，在網頁的其它地方使用也很方便。
一、制作常規按鈕
制作按鈕非常簡單，在<input>標記中把type參數設置為：type="submit"就獲得一個提交按鈕，如本例的“提交”按鈕；在<input> 標記中把type參數設置為：type="reset"就獲得一個復原按鈕，如本例的“重寫”按鈕；在<input>標記中把type參數設置為：type="button"就獲得一個普通按鈕。本例的按鈕源代碼如下：
<input type="submit" name="Submit" value="提 交">
<input type="reset" name="Reset" value="重 寫">
<input type="button" name="butto11" value="點我試試" onclick="alert('謝謝您點擊！')" >
按鈕的制雖簡單，但在制作按鈕時要注意兩點：
1、對於特殊按鈕，一般不需另加動作，當按下按鈕時就有動作發生；而對於普通按鈕，必須加上指定的動作並用相就的事件來觸發，才會在事件發生時激發動作，否則按下普通按鈕，什麼也不發生。在本例的普通按鈕上加了一個彈出提示窗口的動作：alert('謝謝您點擊！')，並用onclick事件來觸發，所以當你在那個按鈕上點擊時會彈出一個窗口，並顯示“謝謝您點擊！”這句話。
2、按鈕上的文字是通過設置value參數來實現的，其默認值是英文名。
二、改變按鈕的外觀
HTML對文本提供了豐富的顏色設置，唯獨對表單按鈕默認的則是Windows系統的顏色，顯得有點死板，而且也沒有提供按鈕的顏色設置參數，因此，要改變表單按鈕的外觀，只能借助於CSS了。請看下面的示例：
你看！這個按鈕是不是變了樣，新鮮多了吧？我們來看看它的源代碼作了那些改變。按鈕源代碼：
<input type="submit" name="Submit" value="提 交" style=" font-size: 12px; background: #CCCCFF; border-width: thin thin thin thin; border-color: #CCCCFF #CCCCCC #CCCCCC #CCCCFF">
從源代碼中可以看出，按鈕的基本參數設置沒變，只是加了一段CSS代碼，正是這段CSS代碼改變了按鈕的外觀風格。在這段CSS代碼中，不僅重新設置了表單按鈕的背景色和字號大小，而且還對按鈕的邊框線進行了設置，把上邊框線、左邊框線設置淺一點的顏色，而把下邊框線、右邊框線設置深一點的顏色，其目的是使表單按鈕產生立體效果。當然，你可以任意改變CSS代碼中顏色，以使按鈕的顏色與所在網頁的顏色協調。
若想使表單按鈕一改那死板板的老面孔，能象網頁中其它導航菜單那樣具有動態變換樣式的效果且仍具其特殊地表單按鈕功能，使它更具吸引人的魅力，采用本文介紹的制作方法是個不錯的主意。請看下面的示例子。
一、動態變換文本按鈕
鼠標不在按鈕上
鼠標在按鈕上
你看！這個按鈕的效果不錯吧？！制作這種效果的思路是這樣的，利用CSS屬性可以動態改變的特點，先給按鈕定義兩種外觀樣式，再在<input>標記中加上兩個事件，即onmuseover（鼠標在按鈕上）和onmuseout （鼠標離開按鈕），我們用這兩個事件分別調用不同的CSS定義的按鈕外觀樣式，從而達到動態變換的效果。為了提高CSS的利用率（若有多個按鈕，則可重復使用），把CSS放到<head>與</head>之間，在按鈕中用class 調用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">
從上面的代碼中可看到，當鼠標移到按鈕上，也就是onmuseover事件發生，那麼按鈕將采用style2甩定義的外觀樣式；當鼠標移開按鈕時，也就是onmuseout事件發生，那麼按鈕就采用style1所定義的外觀樣式，從而實現了動態變化的目的。後面那個class="style1"的作用是當onmouseover、onmouseout這兩個事件都沒發生時，采用style1所定義的外觀樣式，從而保持了按鈕外觀的一致性。
二、動態變換圖像按鈕
鼠標不在按鈕上
鼠標在按鈕上
本例與上例在制作思路和制作方法上均沒有多大區別，只是采用了兩張圖片來作按鈕背景，但產生的效果卻非同一般。在制作這種效果的按鈕時要注意兩點：
1、作按鈕背景的圖片最好用具透明背景的gif圖片，這樣可以做出各種各樣形狀的按鈕，將具有很強的個性；
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代碼與例一有較大的區別，這裡要注意：url後面的括號中是按鈕背景圖片的地址，也就是含路徑的圖片文件名，你在實際制作時要把它改成圖片的實際地址。
另外再多講一句，你若是用圖形化網頁制作工具（如Dreamweaver)，那麼凡是用CSS產生的效果，一般在編輯窗中是看不到的， 如本文的按鈕效果，只有在預覽時才能看到，在編輯窗口中看到的仍是表單默認的那種樣子。
- 上一頁:CSS的“頂級技巧”
- 下一頁:如何使用CSS來進行網頁排版