css布局美化按钮渐变立体效果代码-html代码-BFW代码库

代码语言：html

代码描述：css布局实现大中小三种大小的立体渐变按钮美化效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>

<head>
    <style>
        * {
          box-sizing: border-box;
        }
        body {
          margin: 0;
          background: #eaedf1;
          font-family: 'Lato', sans-serif;
        }
        .header {
          background: white;
          padding: 30px;
          text-align: center;
        }
        .header h1 {
          font-weight: 300;
          display: inline;
        }
        h2 {
          color: #89867e;
          text-align: center;
          font-weight: 300;
        }
        .color {
          width: 350px;
          margin: 0 auto;
        }
        .color li {
          margin: 0 15px 0 0;
          width: 30px;
          height: 30px;
          display: inline-block;
          border-radius: 100%;
        }
        .color .red    {background: #fa5a5a;}
        .color .yellow {background: #f0d264;}
        .color .green  {background: #82c8a0;}
        .color .cyan   {background: #7fccde;}
        .color .blue   {background: #6698cb;}
        .color .purple {background: #cb99c5;}
        
        .content, 
        .content-gradient, 
        .content-3d {
          margin: 40px auto;
        }
        .content {
          width: 80%;
          max-width: 700px;
        }
        .content-3d {
          width: 50%;
          max-width: 300px;
        }
        pre {
          width: 100%;
          padding: 30px;
          background-color: rgba(0, 0, 0, 0.72);
          color: #f8f8f2;
          border-radius: 0 0 4px 4px;
          margin-top: 20px;
          white-space: pre-wrap; /* css-3 */
          white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
          white-space: -pre-wrap; /* Opera 4-6 */
          white-space: -o-pre-wrap; /* Opera 7 */
          word-wrap: break-word; /* Internet Explorer 5.5+ */
        }
        pre .bt  {color: #f8f8f2;} /* <> */
        pre .anc {color: #f92672;} /* anchor tag */
        pre .att {color: #a6a926;} /* attribute */
        pre .val {color: #e6db74;} /* value */
        
        .btn-container, .container {
          background-color: white;
          border-radius: 4px;
          text-align: center;
          margin-bottom: 40px;
        }
        .container h2 {
          padding-top: 30px;
          font-weight: 300;
        }
        .btn, .btn-two {
          margin: 9px;
        }
        .btn-gradient {
          margin: 5px;
        }
        a[class*="btn"] {text-decoration: none;}
        input[class*="btn"], 
        button[class*="btn"] {border: 0;}
        
        /* Here you can change the button sizes */
        .btn.large, 
        .btn-two.large, 
        .btn-effect.large {
          padding: 20px 40px; 
          font-size: 22px;
        }
        .btn.small, 
        .btn-two.small, 
        .btn-gradient.small, 
        .btn-effect.small {
          padding: 8px 18px;  
          font-size: 14px;
        }
        .btn.mini, 
        .btn-two.mini, 
        .btn-gradient.mini, 
        .btn-effect.mini {
          padding: 4px 12px;  
          font-size: 12px;
        }
        .btn.block, 
        .btn-two.block, 
        .btn-gradient.block, 
        .btn-effect.block {
          display: block;
          width: 60%;
          margin-left: auto;
          margin-right: auto;
          text-align: center;
        }
        .btn-gradient.large {
          padding: 15px 45px; 
          font-size: 22px;
        }
        
        /* Colors for .btn and .btn-two */
        .btn.blue, .btn-two.blue     {background-color: #7fb1bf;}
        .btn.green, .btn-two.green   {background-color: #9abf7f;}
        .btn.red, .btn-two.red       {background-color: #fa5a5a;}
        .btn.purple, .btn-two.purple {background-color: #cb99c5;}
        .btn.cyan, .btn-two.cyan     {background-color: #7fccde;}
        .btn.yellow, .btn-two.yellow {background-color: #f0d264;}
        
        .rounded {
          border-radius: 10px;
        }
        
        /* default button style */
        .btn {
          position: relative;
          border: 0;
          padding: 15px 25px;
          display: inline-block;
          text-align: center;
          color: white;
        }
        .btn:active {
          top: 4px; 
        }
        
        /* color classes for .btn */
        .btn.blue {box-shadow: 0px 4px #74a3b0;}
        .btn.blue:active {box-shadow: 0 0 #74a3b0; background-color: #709CA8;}
        
        .btn.green {box-shadow: 0px 4px 0px #87a86f;}
        .btn.green:active {box-shadow: 0 0 #87a86f; background-color: #87a86f;}
        
        .btn.red {box-shadow:0px 4px 0px #E04342;}
        .btn.red:active {box-shadow: 0 0 #ff4c4b; background-color: #ff4c4b;}
        
        .btn.purple {box-shadow:0px 4px 0px #AD83A8;}
        .btn.purple:active {box-shadow: 0 0 #BA8CB5; background-color: #BA8CB5;}
        
        .btn.cyan {box-shadow:0px 4px 0px #73B9C9;}
        .btn.cyan:active {box-shadow: 0 0 #73B9C9; background-color: #70B4C4;}
        
        .btn.yellow {box-shadow:0px 4px 0px #D1B757;}
        .btn.yellow:active {box-shadow: 0 0 #ff4c4b; background-color: #D6BB59;}
        
        /* Button two - I have no creativity for names */
        .btn-two {
          color: white; 
          padding: 15px 25px;
          display: inline-block;
          border: 1px solid rgba(0,0,0,0.21);
          border-bottom-color: rgba(0,0,0,0.34);
          text-shadow:0 1px 0 rgba(0,0,0,0.15);
          box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 
                      0 2px 0 -1px rgba(0,0,0,0.13), 
                      0 3px 0 -1px rgba(0,0,0,0.08), 
                      0 3px 13px -1px rgba(0,0,0,0.21);
        }
        .btn-two:active {
          top: 1px;
          border-color: rgba(0,0,0,0.34) rgba(0,0,0,0.21) rgba(0,0,0,0.21);
          box-shadow: 0 1px 0 rgba(255,255,255,0.89),0 1px rgba(0,0,0,0.05) inset;
          position: relative;
        }
        /* 3D Button */
        .btn-3d {
          position: relative;
          display: inline-block;
          font-size: 22px;
          padding: 20px 60px;
          color: white;
          margin: 20px 10px 10px;
          border-radius: 6px;
          text-align: center;
          transition: top .01s linear;
          text-shadow: 0 1px 0 rgba(0,0,0,0.15);
        }
        .btn-3d.red:hover    {background-color: #e74c3c;}
        .btn-3d.blue:hover   {background-color: #699DD1;}
        .btn-3d.green:hover  {background-color: #80C49D;}
        .btn-3d.purple:hover {background-color: #D19ECB;}
        .btn-3d.yellow:hove.........完整代码请登录后点击上方下载按钮下载查看