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

谁借莪１个温暖的怀抱￠ 2024-04-20 10:23 55阅读 0赞

主要代码如下:

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1  body {
      2     background:#fff
      3 }
      4 /* Mixins */
      5         /* bg shortcodes */
      6         .bg-gradient1 span,.bg-gradient1:before {
      7     background:#52A0FD;
      8     background:-webkit-linear-gradient(left,#52A0FD 0%,#00e2fa 80%,#00e2fa 100%);
      9     background:linear-gradient(to right,#52A0FD 0%,#00e2fa 80%,#00e2fa 100%);
     10 }
     11 .bg-gradient2 span,.bg-gradient2:before {
     12     background:#44ea76;
     13     background:-webkit-linear-gradient(left,#44ea76 0%,#39fad7 80%,#39fad7 100%);
     14     background:linear-gradient(to right,#44ea76 0%,#39fad7 80%,#39fad7 100%);
     15 }
     16 .bg-gradient3 span,.bg-gradient3:before {
     17     background:#fa6c9f;
     18     background:-webkit-linear-gradient(left,#fa6c9f 0%,#ffe140 80%,#ffe140 100%);
     19     background:linear-gradient(to right,#fa6c9f 0%,#ffe140 80%,#ffe140 100%);
     20 }
     21 /* General */
     22         .wrapper {
     23     margin:5% auto;
     24     text-align:center;
     25 }
     26 a {
     27     text-decoration:none;
     28 }
     29 a:hover,a:focus,a:active {
     30     text-decoration:none;
     31 }
     32 /* fancy Button */
     33         .fancy-button {
     34     display:inline-block;
     35     margin:30px;
     36     font-family:'Montserrat',Helvetica,Arial,sans-serif;
     37     font-size:17px;
     38     letter-spacing:0.03em;
     39     text-transform:uppercase;
     40     color:#ffffff;
     41     position:relative;
     42 }
     43 .fancy-button:before {
     44     content:'';
     45     display:inline-block;
     46     height:40px;
     47     position:absolute;
     48     bottom:-5px;
     49     left:30px;
     50     right:30px;
     51     z-index:-1;
     52     border-radius:30em;
     53     -webkit-filter:blur(20px) brightness(0.95);
     54     filter:blur(20px) brightness(0.95);
     55     -webkit-transform-style:preserve-3d;
     56     transform-style:preserve-3d;
     57     -webkit-transition:all 0.3s ease-out;
     58     transition:all 0.3s ease-out;
     59 }
     60 .fancy-button i {
     61     margin-top:-1px;
     62     margin-right:20px;
     63     font-size:1.265em;
     64     vertical-align:middle;
     65 }
     66 .fancy-button span {
     67     display:inline-block;
     68     padding:18px 60px;
     69     border-radius:50em;
     70     position:relative;
     71     z-index:2;
     72     will-change:transform,filter;
     73     -webkit-transform-style:preserve-3d;
     74     transform-style:preserve-3d;
     75     -webkit-transition:all 0.3s ease-out;
     76     transition:all 0.3s ease-out;
     77 }
     78 .fancy-button:focus,.fancy-button:active {
     79     color:#ffffff;
     80 }
     81 .fancy-button:hover {
     82     color:#ffffff;
     83 }
     84 .fancy-button:hover span {
     85     -webkit-filter:brightness(1.05) contrast(1.05);
     86     filter:brightness(1.05) contrast(1.05);
     87     -webkit-transform:scale(0.95);
     88     transform:scale(0.95);
     89 }
     90 .fancy-button:hover:before {
     91     bottom:0;
     92     -webkit-filter:blur(10px) brightness(0.95);
     93     filter:blur(10px) brightness(0.95);
     94 }
     95 .fancy-button.pop-onhover:before {
     96     opacity:0;
     97     bottom:10px;
     98 }
     99 .fancy-button.pop-onhover:hover:before {
    100     bottom:-7px;
    101     opacity:1;
    102     -webkit-filter:blur(20px);
    103     filter:blur(20px);
    104 }
    105 .fancy-button.pop-onhover:hover span {
    106     -webkit-transform:scale(1.04);
    107     transform:scale(1.04);
    108 }
    109 .fancy-button.pop-onhover:hover:active span {
    110     -webkit-filter:brightness(1) contrast(1);
    111     filter:brightness(1) contrast(1);
    112     -webkit-transform:scale(1);
    113     transform:scale(1);
    114     -webkit-transition:all 0.15s ease-out;
    115     transition:all 0.15s ease-out;
    116 }
    117 .fancy-button.pop-onhover:hover:active:before {
    118     bottom:0;
    119     -webkit-filter:blur(10px) brightness(0.95);
    120     filter:blur(10px) brightness(0.95);
    121     -webkit-transition:all 0.2s ease-out;
    122     transition:all 0.2s ease-out;
    123 }

效果演示:

![792609-20190828100534557-1448762815.png][]

转载自 [http://www.jq22.com/webqd6285][http_www.jq22.com_webqd6285]

转载于:https://www.cnblogs.com/ncellit/p/11422382.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/ba4a6141d75044528ed5093191f67bbe.gif
[792609-20190828100534557-1448762815.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/f238370ba7bb49bd83d65cac91060d95.png
[http_www.jq22.com_webqd6285]: http://www.jq22.com/webqd6285