CSS3偽類如何做3D按鈕的執行個體分析

這是通過css3偽類實現的3d按鈕，html代碼為：

        <p id="container_buttons">                    <p><a class="a_demo_three">點我！</a></p>                    <p><a class="a_demo_three second_button">來嘛，別害怕！</a></p>                    <p><a class="a_demo_three third_button">秋葉網路部落格（www.mizuiren.com）</a></p>        </p>

css代碼為：

   #container_buttons{cursor:pointer;}   .a_demo_three {            background-color:#3bb3e0;       font-family: 'Open Sans', sans-serif;            font-size:12px;            text-decoration:none;            color:#fff;       position:relative;       padding:10px 20px;       border-left:solid 1px #2ab7ec;       margin-left:35px;       background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);       background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);       background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);       background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);       background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);       background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(44,160,202)),color-stop(1, rgb(62,184,229)));       -webkit-border-top-right-radius: 5px;       -webkit-border-bottom-right-radius: 5px;       -moz-border-radius-topright: 5px;       -moz-border-radius-bottomright: 5px;       border-top-right-radius: 5px;       border-bottom-right-radius: 5px;       -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;       -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;       -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;       box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;   }   .a_demo_three:active {       top:3px;       background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);       background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);       background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);       background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);       background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);       background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(62,184,229)),color-stop(1, rgb(44,160,202)));       -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;       -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;       -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;       box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;   }   .a_demo_three::before {       text-align: center;       line-height: 20px;       background-color:#2561b4;       content:"1";       width:35px;       max-height:26px;       height:100%;       position:absolute;       display:block;       padding-top:8px;       top:0px;       left:-36px;       font-size:16px;       font-weight:bold;       color:#8fd1ea;       text-shadow:1px 1px 0px #07526e;       border-right:solid 1px #07526e;       background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);       background-image: -o-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);       background-image: -moz-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);       background-image: -webkit-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);       background-image: -ms-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);       background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(10,94,125)),color-stop(1, rgb(14,139,184)));            -webkit-border-top-left-radius: 5px;       -webkit-border-bottom-left-radius: 5px;       -moz-border-radius-topleft: 5px;       -moz-border-radius-bottomleft: 5px;       border-top-left-radius: 5px;       border-bottom-left-radius: 5px;       -webkit-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;       -moz-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;       -o-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;       box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;   }   #container_buttons{height:400px;line-height:50px;}   #container_buttons p{margin:20px 10px;}   .a_demo_three:active::before {       top:-3px;       -webkit-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;       -moz-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;       -o-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;       box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;   }   .second_button::before {content:"2";}   .third_button::before {content:"3";}