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

css布局美化按钮渐变立体效果代码

代码语言：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 {
    .........完整代码请登录后点击上方下载按钮下载查看