【CSS語法】 圖形按鈕設計

woff

將文字超連結，設計成為圖形按鈕~

範例預覽： http://www.flycan.com/flycancss/BTN_design.htm

1. 樣式部份設定如下：

1. <style type="text/css">
   
2. <!--
   
3. a:link, a:visited {　　　　　　　　　　　/*將超連結的一般狀態和瀏覽過的狀態設定為相同*/
   
4. display: block;　　　　　　　　　　　/*將超連結設定為區塊模式，就可以設定長度和寬度*/
   
5. height: 22px;　　　　　　　　　　　　/*設定區塊的高度*/
   
6. width: 155px;　　　　　　　　　　　　/*設定區塊的寬度*/
   
7. padding-top: 8px;　　　　　　　　　　/*設定文字在區塊中的上方間距*/
   
8. background-image: url(BT01.gif);　　/*設定區塊的背景圖*/
   
9. font-size: 12px;　　　　　　　　　　　/*設定文字大小*/
   
10. color: #000000;　　　　　　　　　　　/*設定文字顏色*/
    
11. float: left;　　　　　　　　　　　　　/*設定區塊靠左水平排列*/
    
12. text-decoration: none;　　　　　　　/*將超連結去底線*/
    
13. }
    
14. a:hover {　　　　　　　　　　　　　　　　/*設定超連結被滑鼠移入時的狀態*/
    
15. display: block;　
    
16. height: 20px;　
    
17. width: 155px;　
    
18. padding-top: 10px;
    
19. background-image: url(BT02.gif);
    
20. font-size: 12px;
    
21. color: #FFFFFF;
    
22. float: left;　
    
23. text-decoration: none;
    
24. }
    
25. -->
    
26. </style>

複製代碼

2322751

支持~~頂頂~~~  

TTisatalent

支持一下吧  

qaz741100

不錯不錯.,..我喜歡  

amyd122768658

頂一個先.......