Example analysis of how CSS3 pseudo-classes make 3D buttons

This is a 3d button implemented through css3 pseudo-class. The html code is:

        <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 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, 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";}

The above is the detailed content of Example analysis of how CSS3 pseudo-classes make 3D buttons. For more information, please follow other related articles on the PHP Chinese website!