網頁按鈕立體效果CSS實現

　　最近學習網頁設計，看着那個按鈕真的難看，總想搞得好看點，幾經摸索和查找，終於搞出一個還將就看的，

迫不及待拿出來跟大家分享下，先看效果，左邊那個是按下去的效果。

　　　　　　　　

　　實現原理：就是利用文本的陰影效果。在CSS中文本的陰影可以設置多個，我這里就用了兩個陰影，一個是左上，

一個是右下，為了體現送效果，我把背景設為淡綠。

　　

a.css3d{
     color:red;text-align:center;
     text-decoration: none;
     background-color: rgb(200, 200, 200);
     font-weight: 100px;
     font-size: 2em;
     display: inline-block;
     padding: 4px 20px 4px 20px;
     border-radius: 4px;
     margin: 10px;
     width: 200px;
     box-shadow: -3px -3px 0px #ddd,3px 3px 0px #333;
}
a.css3d:active{
     box-shadow: 3px 3px 0px #ddd,-3px -3px 0px #333;
}