錨是行內元素，所以只有在單擊鏈接的內容時它們才會激活，如果可以實現為按鈕的效果，就可以有更大的可單擊區域，實現方法為：display設置為block，修改width、height和其他屬性，代碼如下：
a{
display:block;
width:6.6em;
line-height:1.4;//使用line-height來控制高度，而不是用height，能夠使得按鈕中的文本垂直居中
text-align:center;
text-decoration:none;
border: 1px solid #66a300;
background-color: #8cca12;
color: #fff;
}
實現的結果如下，鏈接顯示為塊級元素，單擊塊中的任何地方都會激活鏈接：
簡單的翻轉
使用:hover、:focus等偽類即可以創建翻轉效果
a :hover,a:focus{
background-color: #f7a300;
border-color: #ff7400;
}
a :active {
background-color: #a7a7a7;
border-color: #868686;
}
懸停或獲得焦點時
激活時
圖像翻轉
修改背景圖像對于簡單的按鈕很合適，但是對于復雜的按鈕就要使用背景圖像。
<a href="#" >Book Now »</a>
a :link,a:visited{
display: block;
width: 203px;
height: 72px;
text-indent: -1000em; //使用大的負文本縮進隱藏錨文本
background: url(img/button.png) left top no-repeat;
}
a :hover, a:focus {
background-image: url(img/button-over.png);
}
a :active {
background-image: url(img/button-active.png);
}
正常狀態
鼠標懸停狀態
激活狀態
這種應用多圖像方法的缺點是：在瀏覽器第一次加載鼠標懸停的圖像時有短暫的延遲，會造成閃爍現象，讓人感覺按鈕反應遲鈍。
Pixy樣式的翻轉
解決上述問題的方法是：
1、將鼠標懸停的圖像作為背景應用于父元素，從而預加載它們。
2、不切換多個背景圖像，而是使用一個圖像并切換它的背景位置，使用單個圖像減少了服務器請求的數量，而且可以將所有按鈕狀態放在一個地方——Pixy方法，如下代碼：
<a href="#" >Book Now »</a>
a{
display: block;
width: 203px;
height: 72px;
text-indent: -1000em;
background: url(img/buttons.png) -203px 0 no-repeat;
}
a:hover {
background-position: right top;
}
a:active {
background-position: left top;
}
用一個圖像表示這些按鈕狀態
實現的效果和上述一樣。
