css創(chuàng)建按鈕式超鏈接

2012/11/26 10:52:07作者：佚名來源：網(wǎng)絡(luò)

移動端

【實例介紹】

css創(chuàng)建按鈕式超鏈接
很多網(wǎng)頁上的超鏈接都制作成各種按鈕的效果，這里當(dāng)鼠標(biāo)移動到按鈕上時實現(xiàn)按下去的
效果，其原理是變換邊框之間的顏色。下面使用css制作一個漂亮的按鈕鏈接。

【實例代碼】


<!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" />
<title>創(chuàng)建按鈕式超鏈接</title>
</head>
<style><!--
a{         
 font-family: Arial;
 font-size: .8em;
 text-align:center;
 margin:4px;}
a:link, a:visited{     
 color: #A52310;
 padding:4px 10px 4px 10px;
 background-color: #ecd81c;
 text-decoration: none;
 border-top: 1px solid #EEEEEE;  
 border-left: 1px solid #EEEEEE;
 border-bottom: 1px solid #72221;
 border-right: 1px solid #72221;}
a:hover{        
 color:#831826;   
 padding:5px 8px 3px 12px;    
 background-color:#e2c4c8;   
 border-top: 1px solid #71121;  
 border-left: 1px solid #71121;
 border-bottom: 1px solid #EEEEEE;
 border-right: 1px solid #EEEEEE;}-->
</style>
<body>
<a href="#" _fcksavedurl="#">首頁</a>
<a href="#" _fcksavedurl="#">公司簡介</a>
<a href="#" _fcksavedurl="#">公司新聞</a>
<a href="#" _fcksavedurl="#">公司動態(tài)</a>
<a href="#" _fcksavedurl="#">聯(lián)系我們</a>
<a href="#" _fcksavedurl="#">論壇</a>
</body>
</html>

【代碼分析】

頁面body部分與所有HTML頁面一樣，利用超鏈接建立最簡單的菜單結(jié)構(gòu)。在<head>內(nèi)

對<a>標(biāo)簽進(jìn)行整體控制，設(shè)置不同狀態(tài)下的樣式，對于鼠標(biāo)指針經(jīng)過時的超鏈接，相應(yīng)改變
文字顏色、背景色、位置和邊框，最終顯示效果如圖16．2所示。

創(chuàng)建按鈕式超鏈接
【素材及源碼下載】