這里主要利用A元素的偽類來實現：
a:link {color: #FF0000} /* 未訪問的鏈接 */ a:visited {color: #00FF00} /* 已訪問的鏈接 */ a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */ a:active {color: #0000FF} /* 選定的鏈接 */
鏈接在默認狀態下是內聯元素，轉換為塊級元素后可以獲得更大的點擊區域，可以設置寬度和高度，將鏈接轉換為塊狀，只需增加一個display:block的css屬性即可
display這個CSS在我以前的印象中就緊緊是用來控制HTML元素的隱藏和顯示，翻閱CSS文檔后發現display表述如下：
display：
取值：
none： 隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間
block： 指定對象為塊元素。
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> a { display: block; height: 34px; width: 107px; line-height: 2; text-align: center; background: yellow; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-top: 3px; } a:hover { background: green;} </style> </head></p> <p><body> <p><a href="#">免費注冊</a></p> </body> </html>
在給a設置背景的時候使用圖片能達到很好的效果，這里是做例子就使用一個單純的背景色。
效果如下：
鼠標移動到“按鈕”后的效果：