CSS3 pseudo-Class How to do 3D Button example analysis

This is a 3d button implemented by the CSS3 pseudo-class, and the HTML code is:

        <p id= "Container_buttons" >                    <p><a class= "A_demo_three" > Point me! </a></p>                    <p><a class= "A_demo_three Second_button" > Come on, don't be afraid! </a></p>                    <p><a class= "A_demo_three Third_button" > Autumn Leaf Network Blog (www.mizuiren.com) </a> </p>        </p>

The CSS code is:

   #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, 2       px 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 5p       x 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 #0b698   b, 0px 10px 5px #999;   }. Second_button::before {content: "2";} . third_button::before {content: "3";}