在網(wǎng)頁(yè)制作時(shí)，a是行內(nèi)元素，只有在單擊鏈接的內(nèi)容時(shí)才會(huì)激活鏈接。但是，有時(shí)候希望它顯示為按鈕樣式，因此可以將a的display屬性設(shè)置為block，然后修改width、height和其他屬性來(lái)創(chuàng)建需要的樣式和單擊區(qū)域。
【示例1】在頁(yè)面中為所有鏈接定義按鈕樣式效果，由于鏈接現(xiàn)在顯示為塊級(jí)元素，單擊塊中的任何地方都會(huì)激活鏈接。
a{ display: block; width: 6em; padding:0.2em; line-height: 1.4: background-color: #g488E9; border: lpx solid black; color: #000; text-decoration: none; text-align: center;}
在上面代碼中，寬度是以em為單位顯式設(shè)置的。由于塊級(jí)元素會(huì)擴(kuò)展，填滿可用的寬度，所以如果父元素的寬度大于鏈接所需的寬度，那么需要將希望的寬度應(yīng)用于鏈接。如果希望在頁(yè)面的主內(nèi)容區(qū)域中使用這種樣式的鏈接，就很可能出現(xiàn)這種情況。但是，如果這種樣式的鏈接出現(xiàn)在寬度比較窄的地方（如邊欄）中，那么可能只需設(shè)置父元素的寬度，而不需要為鏈接的寬度擔(dān)心。為什么使用line-height屬性定義按鈕的高度，而不是使用height屬性？這實(shí)際上是一個(gè)小技巧，能夠使按鈕中的文本垂直居中。如果設(shè)置height，就必須使用填充將文本壓低，模擬出垂直居中的效果。但是，文本在行框中總是垂直居中的，所以如果使用line-height屬性，文本就會(huì)出現(xiàn)在框的中間。
上述缺點(diǎn)：如果在網(wǎng)頁(yè)設(shè)計(jì)中，按鈕中的文本占據(jù)兩行，按鈕的高度就是需要的高度的兩倍。避免這個(gè)問題的唯一方法是調(diào)整按鈕和文本的尺寸，讓文本不換行，至少在文本字號(hào)超過合理值之前不會(huì)換行。
使用:hover偽類就可以創(chuàng)建翻轉(zhuǎn)效果，不需要JavaScript。如在鼠標(biāo)停留時(shí)設(shè)置鏈接的背景和文本顏色，從而實(shí)現(xiàn)非常簡(jiǎn)單的動(dòng)態(tài)效果。
a:hover { background-color:#369; color:#fff;}
【示例2】修改背景顏色對(duì)于簡(jiǎn)單的按鈕很合適，但是對(duì)于比較復(fù)雜的按鈕，最好使用背景圖像。在下面示例中，創(chuàng)建了兩個(gè)按鈕圖像，一個(gè)用于正常狀態(tài)，一個(gè)用于鼠標(biāo)停留狀態(tài)，也可以添加激活狀態(tài)，即使用:active動(dòng)態(tài)偽類觸發(fā)。
a:link, a:visited { display:block;
width:200px;
height:40px;
line-height:40px; color:#000;
text-decoration:none;
background:#9488E9 url(images/button.gif) no-repeat left top;
text-indent:50px;}a:hover{
background:#369 url(images/butten_over.gif) no-repeat left top; color:#fff;}
設(shè)置按鈕樣式上面代碼與前面示例相似。主要的差異是使用背景圖像而不是背景顏色，同時(shí)使用固定寬度和高度的按鈕，所以在CSS中設(shè)置顯式的像素尺寸。但是，也可以創(chuàng)建特大的按鈕圖像，或者結(jié)合使用背景顏色和圖像創(chuàng)建流體的或彈性的按鈕。
【示例3】多圖像方法的主要缺點(diǎn)是在瀏覽器第一次裝載鼠標(biāo)停留圖像時(shí)有短暫的延遲。這會(huì)造成閃爍效果，讓按鈕感覺起來(lái)有點(diǎn)兒反應(yīng)遲鈍?？梢詫⑹髽?biāo)停留圖像作為背景應(yīng)用于父元素，從而預(yù)先裝載它們。但是，有另一種方法。并不切換多個(gè)背景圖像，而是使用一個(gè)圖像并切換它的背景位置。使用單個(gè)圖像的好處是減少了服務(wù)器請(qǐng)求的數(shù)量，而且可以將所有按鈕狀態(tài)放在一個(gè)地方。
首先，創(chuàng)建組合的按鈕圖像
在網(wǎng)頁(yè)設(shè)計(jì)背景圖像在這個(gè)示例中，使用正常狀態(tài)和鼠標(biāo)停留狀態(tài)，也可以使用激活狀態(tài)和已訪問狀態(tài)。代碼幾乎與前面的示例相同。設(shè)計(jì)在正常狀態(tài)下，將翻轉(zhuǎn)圖像對(duì)準(zhǔn)左邊，而在鼠標(biāo)停留狀態(tài)下對(duì)準(zhǔn)右邊。
a:link,a:visited{ display:block;
width:200px;
height:40px;
line-height:40px;
color:#000; text-decoration:none;
background:#9488E9 url(images/pixy-rollover.gif) no-repeat left top; text-indent:50px;}a:hover{ background-color:#369; background-position:right top; color:#fff;}
由于IE仍然會(huì)向服務(wù)器請(qǐng)求新的圖像，這會(huì)產(chǎn)生輕微的閃爍，為了避免閃爍，需要將翻轉(zhuǎn)狀態(tài)應(yīng)用于鏈接的父元素，如包含它的段落。
p { background:#g488Eg url(images/pixy-rollover.gif) ;
no-repeat right top;}
在圖像重新裝載時(shí)，它仍然會(huì)消失一段時(shí)間。
但是，由于提前加載，現(xiàn)在會(huì)露出相同的圖像，消除了閃爍。