css3练习--3D按钮

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3练习 -3D按钮</title>
</head>

<body>
    <a class="btn" href="javascript:;">this is demo</a>
</body>
</html>
    *{margin:0;padding: 0;}
    a{text-decoration: none;}
    body{text-align:center;}
    .btn{
          font-family: 'Segoe Print';
          font-size:50px;
          color:#FFF;
          padding:20px 70px;
          line-height:50px;
          margin-top:200px;
          display: inline-block;
          background: -webkit-linear-gradient(top,#f78ab4,#ef5991);
          text-shadow:0 -2px rgba(0,0,0,0.2);
          border-radius:8px;
          box-shadow: 0 8px 0 #c5376d, 0 10px 10px rgba(0, 0, 0,.35);
          transition:0.2s;
    }
    .btn:active{
        box-shadow: 0 4px 0 #c5376d, 0 4px 10px rgba(0, 0, 0,.35);
        transform:translate(0, 4px)
    }

 

posted @ 2015-05-23 14:45  xiaojiu  阅读(220)  评论(0)  编辑  收藏  举报