网页按钮立体效果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;
}