利用css3制造3D样式按钮-HTML教程-爱易网页

利用css3制造3D样式按钮

日期：2014-05-17　浏览次数：20582 次

利用css3制作3D样式按钮

效果图如下：

源码如下：

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <style type="text/css"> 
    body {
        font-family: Arial, sans-serif;
    }
 
    #container {
        margin: 120px auto;
        text-align: center;
    }
 
    .button {
        -webkit-transform: rotateX( 35deg );
        position: relative;
        display: inline-block;
        width: 100px;
        padding: 42px 15px;
        margin: 0px 10px;
        background-color: #C91826;
        color: #fff;
        font-weight: bold;
        font-size: 40px;
        text-decoration: none;
        text-align: center;
        text-shadow: 0px -1px 0px rgba(0,0,0,0.5);
 
        border: 1px solid;
        border-color: #B21522;
        border-radius: 78px;
        -moz-border-radius: 78px;
        -webkit-border-radius: 78px;
 
        box-shadow: 		inset 0px -4px 5px rgba(255,255,255,0.2),
                            inset 0px 1px 5px rgba(255,255,255,0.2),
                            /**/
                            0px 12px 0px #231F20,
                            0px 14px 0px #231F20,
                            0px 16px 0px #231F20,
                            /**/
                            0px 8px 5px rgba(0,0,0,0.5);
 
        -moz-box-shadow: 	inset 0px -4px 5px rgba(255,255,255,0.2),
                            inset 0px 1px 5px rgba(255,255,255,0.2),
                            /**/
                            0px 12px 0px #231F20,
                            0px 14px 0px #231F20,
                            0px 16px 0px #231F20,
                            /**/
                            0px 8px 5px rgba(0,0,0,0.5);
 
        -webkit-box-shadow: inset 5px -4px 5px rgba(255,255,255,0.2),
                            inset 5px 1px 5px rgba(255,255,255,0.2),
                            /**/
                            0px 12px 0px #231F20,
                            0px 14px 0px #231F20,
                            0px 16px 0px #231F20;
    }
 
    .button:hover {
        background-color: #B21522;
        color: #e3e3e3;	
    }
 
    .button:active {
        top: 8px;
        box-shadow: 		inset 0px 4px 5px rgba(255,255,255,0.4),
                            inset 0px -1px 5px rgba(255,255,255,0.2),
                            /**/
                            0px 8px 0px #231F20,
                            /**/
                            0px 9px 5px rgba(0,0,0,0.5);
 
        -moz-box-shadow: 	inset 0px 4px 5px rgba(255,255,255,0.4),
                            inset 0px -1px 5px rgba(255,255,255,0.2),
                            /**/
                            0px 8px 0px #231F20,
                            /**/
                            0px 9px 5px rgba(0,0,0,0.5);
 
        -webkit-box-shadow: inset 0px 4px 5px rgba(255,255,255,0.4),
                            inset 0px -1px 5px rgba(255,255,255,0.2),
                            /**/
                            0px 8px 0px #231F20,
                            /**/
                            0px 9px 5px rgba(0,0,0,0.5);
    }
    </style> 
</head> 
<body> 
  <div id="container"> 
    <a href="#" class="button">开始</a> 
    <a href="#" class="button">结束</a> 
  </div> 
</body> 
</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

利用css3制造3D样式按钮

相关资料更多>

推荐阅读更多>