一组简单好看的css3渐变按钮

主要代码如下:

  body {
     background:#fff
 }
 /* Mixins */
         /* bg shortcodes */
         .bg-gradient1 span,.bg-gradient1:before {
     background:#52A0FD;
     background:-webkit-linear-gradient(left,#52A0FD 0%,#00e2fa 80%,#00e2fa 100%);
     background:linear-gradient(to right,#52A0FD 0%,#00e2fa 80%,#00e2fa 100%);
 }
 .bg-gradient2 span,.bg-gradient2:before {
     background:#44ea76;
     background:-webkit-linear-gradient(left,#44ea76 0%,#39fad7 80%,#39fad7 100%);
     background:linear-gradient(to right,#44ea76 0%,#39fad7 80%,#39fad7 100%);
 }
 .bg-gradient3 span,.bg-gradient3:before {
     background:#fa6c9f;
     background:-webkit-linear-gradient(left,#fa6c9f 0%,#ffe140 80%,#ffe140 100%);
     background:linear-gradient(to right,#fa6c9f 0%,#ffe140 80%,#ffe140 100%);
 }
 /* General */
         .wrapper {
     margin:5% auto;
     text-align:center;
 }
 a {
     text-decoration:none;
 }
 a:hover,a:focus,a:active {
     text-decoration:none;
 }
 /* fancy Button */
         .fancy-button {
     display:inline-block;
     margin:30px;
     font-family:'Montserrat',Helvetica,Arial,sans-serif;
     font-size:17px;
     letter-spacing:0.03em;
     text-transform:uppercase;
     color:#ffffff;
     position:relative;
 }
 .fancy-button:before {
     content:'';
     display:inline-block;
     height:40px;
     position:absolute;
     bottom:-5px;
     left:30px;
     right:30px;
     z-index:-1;
     border-radius:30em;
     -webkit-filter:blur(20px) brightness(0.95);
     filter:blur(20px) brightness(0.95);
     -webkit-transform-style:preserve-3d;
     transform-style:preserve-3d;
     -webkit-transition:all 0.3s ease-out;
     transition:all 0.3s ease-out;
 }
 .fancy-button i {
     margin-top:-1px;
     margin-right:20px;
     font-size:1.265em;
     vertical-align:middle;
 }
 .fancy-button span {
     display:inline-block;
     padding:18px 60px;
     border-radius:50em;
     position:relative;
     z-index:;
     will-change:transform,filter;
     -webkit-transform-style:preserve-3d;
     transform-style:preserve-3d;
     -webkit-transition:all 0.3s ease-out;
     transition:all 0.3s ease-out;
 }
 .fancy-button:focus,.fancy-button:active {
     color:#ffffff;
 }
 .fancy-button:hover {
     color:#ffffff;
 }
 .fancy-button:hover span {
     -webkit-filter:brightness(1.05) contrast(1.05);
     filter:brightness(1.05) contrast(1.05);
     -webkit-transform:scale(0.95);
     transform:scale(0.95);
 }
 .fancy-button:hover:before {
     bottom:;
     -webkit-filter:blur(10px) brightness(0.95);
     filter:blur(10px) brightness(0.95);
 }
 .fancy-button.pop-onhover:before {
     opacity:;
     bottom:10px;
 }
 .fancy-button.pop-onhover:hover:before {
     bottom:-7px;
     opacity:;
     -webkit-filter:blur(20px);
     filter:blur(20px);
 }
 .fancy-button.pop-onhover:hover span {
     -webkit-transform:scale(1.04);
     transform:scale(1.04);
 }
 .fancy-button.pop-onhover:hover:active span {
     -webkit-filter:brightness(1) contrast(1);
     filter:brightness(1) contrast(1);
     -webkit-transform:scale(1);
     transform:scale(1);
     -webkit-transition:all 0.15s ease-out;
     transition:all 0.15s ease-out;
 }
 .fancy-button.pop-onhover:hover:active:before {
     bottom:;
     -webkit-filter:blur(10px) brightness(0.95);
     filter:blur(10px) brightness(0.95);
     -webkit-transition:all 0.2s ease-out;
     transition:all 0.2s ease-out;
 }

效果演示:

转载自 http://www.jq22.com/webqd6285