網(wǎng)頁設(shè)計師在設(shè)計網(wǎng)頁按鈕時可能需要設(shè)計變色效果，我們可以用CSS來實現(xiàn)，網(wǎng)頁設(shè)計培訓(xùn)小編詳解一下制作流程，需要的朋友可以收藏。

首先準(zhǔn)備兩張圖片，一張正常狀態(tài)的圖片，一張按下去效果圖片，例如下圖。





設(shè)置鏈接a的背景為第一張圖片，a:hover的背景為第二張圖片

代碼如下：

HTML代碼：

< a href="#" id="theLink" >< /a >

CSS代碼：

#theLink{
display:block;/*因為標(biāo)簽a是內(nèi)鏈元素，所以利用這句話將內(nèi)鏈元素轉(zhuǎn)化成塊狀元素，后面的width和height才起作用*/
width:120px;
height:41px;
margin:0 auto;
background:url(../images/normal.gif) no-repeat;
}
#theLink:hover{background:url(../images/press.gif) no-repeat;}