美文网首页
收藏的一些button样式

收藏的一些button样式

作者: 小忆123 | 来源:发表于2017-08-19 14:57 被阅读20次

    body{

    background:#f5faff;

    }

    .demo_con{

    width:960px;

    margin:40pxauto0;

    }

    .button{

    width:140px;

    line-height:38px;

    text-align:center;

    font-weight:bold;

    color:#fff;

    text-shadow:1px1px1px#333;

    border-radius:5px;

    margin:020px20px0;

    position:relative;

    overflow:hidden;

    }

    .button:nth-child(6n){

    margin-right:0;

    }

    .button.gray{

    color:#8c96a0;

    text-shadow:1px1px1px#fff;

    border:1pxsolid#dce1e6;

    box-shadow:01px2px#fffinset,0-1px0#a8abaeinset;

    background:-webkit-linear-gradient(top,#f2f3f7,#e4e8ec);

    background:-moz-linear-gradient(top,#f2f3f7,#e4e8ec);

    background:linear-gradient(top,#f2f3f7,#e4e8ec);

    }

    .button.black{

    border:1pxsolid#333;

    box-shadow:01px2px#8b8b8binset,0-1px0#3d3d3dinset,0-2px3px#8b8b8binset;

    background:-webkit-linear-gradient(top,#656565,#4c4c4c);

    background:-moz-linear-gradient(top,#656565,#4a4a4a);

    background:linear-gradient(top,#656565,#4a4a4a);

    }

    .button.red{

    border:1pxsolid#b42323;

    box-shadow:01px2px#e99494inset,0-1px0#954b4binset,0-2px3px#e99494inset;

    background:-webkit-linear-gradient(top,#d53939,#b92929);

    background:-moz-linear-gradient(top,#d53939,#b92929);

    background:linear-gradient(top,#d53939,#b92929);

    }

    .button.yellow{

    border:1pxsolid#d2a000;

    box-shadow:01px2px#fedd71inset,0-1px0#a38b39inset,0-2px3px#fedd71inset;

    background:-webkit-linear-gradient(top,#fece34,#d8a605);

    background:-moz-linear-gradient(top,#fece34,#d8a605);

    background:linear-gradient(top,#fece34,#d8a605);

    }

    .button.green{

    border:1pxsolid#64c878;

    box-shadow:01px2px#b9ecc4inset,0-1px0#6c9f76inset,0-2px3px#b9ecc4inset;

    background:-webkit-linear-gradient(top,#90dfa2,#84d494);

    background:-moz-linear-gradient(top,#90dfa2,#84d494);

    background:linear-gradient(top,#90dfa2,#84d494);

    }

    .button.blue{

    border:1pxsolid#1e7db9;

    box-shadow:01px2px#8fcaeeinset,0-1px0#497897inset,0-2px3px#8fcaeeinset;

    background:-webkit-linear-gradient(top,#42a4e0,#2e88c0);

    background:-moz-linear-gradient(top,#42a4e0,#2e88c0);

    background:linear-gradient(top,#42a4e0,#2e88c0);

    }

    .round,

    .side,

    .tags{

    padding-right:30px;

    }

    .round:after{

    position:absolute;

    display:inline-block;

    content:"\003c";

    top:50%;

    right:10px;

    margin-top:-10px;

    width:17px;

    height:20px;

    padding-left:3px;

    line-height:18px;

    font-size:10px;

    font-weight:normal;

    border-radius:10px;

    text-shadow:-2px01px#333;

    -webkit-transform:rotate(-90deg);

    -moz-transform:rotate(-90deg);

    transform:rotate(-90deg);

    }

    .gray.round:after{

    box-shadow:1px01pxrgba(255,255,255,1)inset,1px01pxrgba(0,0,0,.2);

    background:-webkit-linear-gradient(top,#dce1e6,#dde2e7);

    background:-moz-linear-gradient(top,#dce1e6,#dde2e7);

    background:linear-gradient(top,#dce1e6,#dde2e7);

    text-shadow:-2px01px#fff;

    }

    .black.round:after{

    box-shadow:1px01pxrgba(255,255,255,.5)inset,1px01pxrgba(0,0,0,.9);

    background:-webkit-linear-gradient(top,#333,#454545);

    background:-moz-linear-gradient(top,#333,#454545);

    background:linear-gradient(top,#333,#454545);

    }

    .red.round:after{

    box-shadow:1px01pxrgba(255,255,255,.6)inset,1px01pxrgba(130,25,25,.9);

    background:-webkit-linear-gradient(top,#b12222,#b42323);

    background:-moz-linear-gradient(top,#b12222,#b42323);

    background:linear-gradient(top,#b12222,#b42323);

    }

    .yellow.round:after{

    box-shadow:1px01pxrgba(255,255,255,.8)inset,1px01pxrgba(148,131,4,.9);

    background:-webkit-linear-gradient(top,#cf9d00,#d2a000);

    background:-moz-linear-gradient(top,#cf9d00,#d2a000);

    background:linear-gradient(top,#cf9d00,#d2a000);

    }

    .green.round:after{

    box-shadow:1px01pxrgba(255,255,255,.8)inset,1px01pxrgba(51,126,66,.9);

    background:-webkit-linear-gradient(top,#64c878,#6dcb80);

    background:-moz-linear-gradient(top,#64c878,#6dcb80);

    background:linear-gradient(top,#64c878,#6dcb80);

    }

    .blue.round:after{

    box-shadow:1px01pxrgba(255,255,255,.8)inset,1px01pxrgba(18,85,128,.9);

    background:-webkit-linear-gradient(top,#1e7db9,#2b85bd);

    background:-moz-linear-gradient(top,#1e7db9,#2b85bd);

    background:linear-gradient(top,#1e7db9,#2b85bd);

    }

    .side:after{

    position:absolute;

    display:inline-block;

    content:"\00bb";

    top:3px;

    right:-4px;

    width:38px;

    height:30px;

    font-weight:normal;

    line-height:26px;

    border-radius:005px5px;

    text-shadow:-2px01px#333;

    -webkit-transform:rotate(-90deg);

    -moz-transform:rotate(-90deg);

    transform:rotate(-90deg);

    }

    .gray.side:after{

    text-shadow:-2px01px#fff;

    border-top:1pxsolid#d4d4d4;

    box-shadow:-2px01px#eceef1inset;

    background:-webkit-linear-gradient(right,#e1e6ea,#f2f2f660%);

    background:-moz-linear-gradient(right,#e1e6ea,#f2f2f660%);

    background:linear-gradient(right,#e1e6ea,#f2f2f660%);

    }

    .black.side:after{

    border-top:1pxsolid#222;

    box-shadow:-2px01px#606060inset;

    background:-webkit-linear-gradient(right,#373737,#55560%);

    background:-moz-linear-gradient(right,#373737,#55560%);

    background:linear-gradient(right,#373737,#55560%);

    }

    .red.side:after{

    border-top:1pxsolid#aa1e1e;

    box-shadow:-2px01px#c75959inset;

    background:-webkit-linear-gradient(right,#b82929,#d73f3f60%);

    background:-moz-linear-gradient(top,#b82929,#d73f3f60%);

    background:linear-gradient(top,#b82929,#d73f3f60%);

    }

    .yellow.side:after{

    border-top:1pxsolid#ba8f06;

    box-shadow:-2px01px#deb842inset;

    background:-webkit-linear-gradient(right,#d5a406,#fdc40b60%);

    background:-moz-linear-gradient(right,#d5a406,#fdc40b60%);

    background:linear-gradient(right,#d5a406,#fdc40b60%);

    }

    .green.side:after{

    border-top:1pxsolid#53b567;

    box-shadow:-2px01px#8ad599inset;

    background:-webkit-linear-gradient(right,#69ca7c,#91e5a560%);

    background:-moz-linear-gradient(right,#69ca7c,#91e5a560%);

    background:linear-gradient(right,#69ca7c,#91e5a560%);

    }

    .blue.side:after{

    border-top:1pxsolid#1971a8;

    box-shadow:-2px01px#559dcainset;

    background:-webkit-linear-gradient(right,#2482bd,#3fa2e060%);

    background:-moz-linear-gradient(right,#2482bd,#3fa2e060%);

    background:linear-gradient(right,#2482bd,#3fa2e060%);

    }

    .tags:after{

    font-weight:normal;

    position:absolute;

    display:inline-block;

    content:"FREE";

    top:-3px;

    right:-33px;

    color:#fff;

    text-shadow:none;

    width:85px;

    height:25px;

    line-height:28px;

    -webkit-transform:rotate(45deg)scale(.7,.7);

    -moz-transform:rotate(45deg)scale(.7,.7);

    transform:rotate(45deg)scale(.7,.7);

    }

    .gray.tags:after{

    background:#8c96a0;

    border:2pxsolid#fff;

    }

    .black.tags:after{

    background:#333;

    border:2pxsolid#777;

    }

    .red.tags:after{

    background:#b42323;

    border:2pxsolid#df4141;

    }

    .yellow.tags:after{

    background:#d2a000;

    border:2pxsolid#fcc100;

    }

    .green.tags:after{

    background:#64c878;

    border:2pxsolid#9bebac;

    }

    .blue.tags:after{

    background:#1e7db9;

    border:2pxsolid#54b1e9;

    }

    .button.rarrow,

    .button.larrow{

    overflow:visible;

    }

    .rarrow:after,

    .rarrow:before,

    .larrow:after,

    .larrow:before{

    position:absolute;

    content:"";

    display:block;

    width:28px;

    height:28px;

    -webkit-transform:rotate(45deg);

    -moz-transform:rotate(45deg);

    transform:rotate(45deg);

    }

    .rarrow:before{

    width:27px;

    height:27px;

    top:6px;

    right:-13px;

    clip:rect(autoauto26px2px);

    }

    .rarrow:after{

    top:6px;

    right:-12px;

    clip:rect(autoauto26px2px);

    }

    .gray.rarrow:before{

    background:#d6dbe0;

    }

    .gray.rarrow:after{

    box-shadow:01px0#fffinset,-1px00#b7babdinset;

    background:-webkit-linear-gradient(topleft,#f2f3f7,#e4e8ec);

    background:-moz-linear-gradient(topleft,#f2f3f7,#e4e8ec);

    background:linear-gradient(topleft,#f2f3f7,#e4e8ec);

    }

    .black.rarrow:before{

    background:#333;

    }

    .black.rarrow:after{

    box-shadow:01px0#8B8B8Binset,-1px00#3d3d3dinset,-2px00#8B8B8Binset;

    background:-webkit-linear-gradient(topleft,#656565,#4C4C4C);

    background:-moz-linear-gradient(topleft,#656565,#4C4C4C);

    background:linear-gradient(topleft,#656565,#4C4C4C);

    }

    .red.rarrow:before{

    background:#B42323;

    }

    .red.rarrow:after{

    box-shadow:01px0#E99494inset,-1px00#954B4Binset,-2px00#E99494inset;

    background:-webkit-linear-gradient(topleft,#D53939,#B92929);

    background:-moz-linear-gradient(topleft,#D53939,#B92929);

    background:linear-gradient(topleft,#D53939,#B92929);

    }

    .yellow.rarrow:before{

    background:#D2A000;

    }

    .yellow.rarrow:after{

    box-shadow:01px0#FEDD71inset,-1px00#A38B39inset,-2px00#FEDD71inset;

    background:-webkit-linear-gradient(topleft,#FECE34,#D8A605);

    background:-moz-linear-gradient(topleft,#FECE34,#D8A605);

    background:linear-gradient(topleft,#FECE34,#D8A605);

    }

    .green.rarrow:before{

    background:#64C878;

    }

    .green.rarrow:after{

    box-shadow:01px0#B9ECC4inset,-1px00#6C9F76inset,-2px00#B9ECC4inset;

    background:-webkit-linear-gradient(topleft,#90DFA2,#84D494);

    background:-moz-linear-gradient(topleft,#90DFA2,#84D494);

    background:linear-gradient(topleft,#90DFA2,#84D494);

    }

    .blue.rarrow:before{

    background:#1E7DB9;

    }

    .blue.rarrow:after{

    box-shadow:01px0#8FCAEEinset,-1px00#497897inset,-2px00#8FCAEEinset;

    background:-webkit-linear-gradient(topleft,#42A4E0,#2E88C0);

    background:-moz-linear-gradient(topleft,#42A4E0,#2E88C0);

    background:linear-gradient(topleft,#42A4E0,#2E88C0);

    }

    .larrow:before{

    top:6px;

    left:-13px;

    width:27px;

    height:27px;

    clip:rect(2px26pxautoauto);

    }

    .larrow:after{

    top:6px;

    left:-12px;

    clip:rect(2px26pxautoauto);

    }

    .gray.larrow:before{

    background:#d6dbe0;

    }

    .gray.larrow:after{

    box-shadow:0-1px0#b7babdinset,1px00#fffinset;

    background:-webkit-linear-gradient(topleft,#f2f3f7,#e4e8ec);

    background:-moz-linear-gradient(topleft,#f2f3f7,#e4e8ec);

    background:linear-gradient(topleft,#f2f3f7,#e4e8ec);

    }

    .black.larrow:before{

    background:#333;

    }

    .black.larrow:after{

    box-shadow:0-1px0#3d3d3dinset,0-2px0#8B8B8Binset,1px00#8B8B8Binset;

    background:-webkit-linear-gradient(topleft,#656565,#4C4C4C);

    background:-moz-linear-gradient(topleft,#656565,#4C4C4C);

    background:linear-gradient(topleft,#656565,#4C4C4C);

    }

    .red.larrow:before{

    background:#B42323;

    }

    .red.larrow:after{

    box-shadow:0-1px0#954B4Binset,0-2px0#E99494inset,1px00#E99494inset;

    background:-webkit-linear-gradient(topleft,#D53939,#B92929);

    background:-moz-linear-gradient(topleft,#D53939,#B92929);

    background:linear-gradient(topleft,#D53939,#B92929);

    }

    .yellow.larrow:before{

    background:#D2A000;

    }

    .yellow.larrow:after{

    box-shadow:0-1px0#A38B39inset,0-2px0#FEDD71inset,1px00#FEDD71inset;

    background:-webkit-linear-gradient(topleft,#FECE34,#D8A605);

    background:-moz-linear-gradient(topleft,#FECE34,#D8A605);

    background:linear-gradient(topleft,#FECE34,#D8A605);

    }

    .green.larrow:before{

    background:#64C878;

    }

    .green.larrow:after{

    box-shadow:0-1px0#6C9F76inset,0-2px0#B9ECC4inset,1px00#B9ECC4inset;

    background:-webkit-linear-gradient(topleft,#90DFA2,#84D494);

    background:-moz-linear-gradient(topleft,#90DFA2,#84D494);

    background:linear-gradient(topleft,#90DFA2,#84D494);

    }

    .blue.larrow:before{

    background:#1E7DB9;

    }

    .blue.larrow:after{

    box-shadow:0-1px0#497897inset,0-2px0#8FCAEEinset,1px00#8FCAEEinset;

    background:-webkit-linear-gradient(topleft,#42A4E0,#2E88C0);

    background:-moz-linear-gradient(topleft,#42A4E0,#2E88C0);

    background:linear-gradient(topleft,#42A4E0,#2E88C0);

    }

    .gray:hover{

    background:-webkit-linear-gradient(top,#fefefe,#ebeced);

    background:-moz-linear-gradient(top,#f2f3f7,#ebeced);

    background:linear-gradient(top,#f2f3f7,#ebeced);

    }

    .black:hover{

    background:-webkit-linear-gradient(top,#818181,#575757);

    background:-moz-linear-gradient(top,#818181,#575757);

    background:linear-gradient(top,#818181,#575757);

    }

    .red:hover{

    background:-webkit-linear-gradient(top,#eb6f6f,#c83c3c);

    background:-moz-linear-gradient(top,#eb6f6f,#c83c3c);

    background:linear-gradient(top,#eb6f6f,#c83c3c);

    }

    .yellow:hover{

    background:-webkit-linear-gradient(top,#ffd859,#e3bb38);

    background:-moz-linear-gradient(top,#ffd859,#e3bb38);

    background:linear-gradient(top,#ffd859,#e3bb38);

    }

    .green:hover{

    background:-webkit-linear-gradient(top,#aaebb9,#82d392);

    background:-moz-linear-gradient(top,#aaebb9,#82d392);

    background:linear-gradient(top,#aaebb9,#82d392);

    }

    .blue:hover{

    background:-webkit-linear-gradient(top,#70bfef,#4097ce);

    background:-moz-linear-gradient(top,#70bfef,#4097ce);

    background:linear-gradient(top,#70bfef,#4097ce);

    }

    .gray:active{

    top:1px;

    box-shadow:01px3px#a8abaeinset,03px0#fff;

    background:-webkit-linear-gradient(top,#e4e8ec,#e4e8ec);

    background:-moz-linear-gradient(top,#e4e8ec,#e4e8ec);

    background:linear-gradient(top,#e4e8ec,#e4e8ec);

    }

    .black:active{

    top:1px;

    box-shadow:01px3px#111inset,03px0#fff;

    background:-webkit-linear-gradient(top,#424242,#575757);

    background:-moz-linear-gradient(top,#424242,#575757);

    background:linear-gradient(top,#424242,#575757);

    }

    .red:active{

    top:1px;

    box-shadow:01px3px#5b0505inset,03px0#fff;

    background:-webkit-linear-gradient(top,#b11a1a,#bf2626);

    background:-moz-linear-gradient(top,#b11a1a,#bf2626);

    background:linear-gradient(top,#b11a1a,#bf2626);

    }

    .yellow:active{

    top:1px;

    box-shadow:01px3px#816b1finset,03px0#fff;

    background:-webkit-linear-gradient(top,#d3a203,#dba907);

    background:-moz-linear-gradient(top,#d3a203,#dba907);

    background:linear-gradient(top,#d3a203,#dba907);

    }

    .green:active{

    top:1px;

    box-shadow:01px3px#4d7254inset,03px0#fff;

    background:-webkit-linear-gradient(top,#5eac6e,#72b37e);

    background:-moz-linear-gradient(top,#5eac6e,#72b37e);

    background:linear-gradient(top,#5eac6e,#72b37e);

    }

    .blue:active{

    top:1px;

    box-shadow:01px3px#114566inset,03px0#fff;

    background:-webkit-linear-gradient(top,#1a71a8,#1976b1);

    background:-moz-linear-gradient(top,#1a71a8,#1976b1);

    background:linear-gradient(top,#1a71a8,#1976b1);

    }

    .gray.side:hover:after{

    background:-webkit-linear-gradient(right,#e7ebee,#f8f8f860%);

    background:-moz-linear-gradient(right,#e7ebee,#f8f8f860%);

    background:linear-gradient(right,#e7ebee,#f8f8f860%);

    }

    .black.side:hover:after{

    background:-webkit-linear-gradient(right,#555,#6f6f6f60%);

    background:-moz-linear-gradient(right,#555,#6f6f6f60%);

    background:linear-gradient(right,#555,#6f6f6f60%);

    }

    .red.side:hover:after{

    background:-webkit-linear-gradient(right,#c43333,#dc494960%);

    background:-moz-linear-gradient(right,#c43333,#dc494960%);

    background:linear-gradient(right,#c43333,#dc494960%);

    }

    .yellow.side:hover:after{

    background:-webkit-linear-gradient(right,#e1b21a,#fbc71d60%);

    background:-moz-linear-gradient(right,#e1b21a,#fbc71d60%);

    background:linear-gradient(right,#e1b21a,#fbc71d60%);

    }

    .green.side:hover:after{

    background:-webkit-linear-gradient(right,#85da95,#94e0a560%);

    background:-moz-linear-gradient(right,#85da95,#94e0a560%);

    background:linear-gradient(right,#85da95,#94e0a560%);

    }

    .blue.side:hover:after{

    background:-webkit-linear-gradient(right,#338fc8,#56b2eb60%);

    background:-moz-linear-gradient(right,#338fc8,#56b2eb60%);

    background:linear-gradient(right,#338fc8,#56b2eb60%);

    }

    .gray.side:active:after{

    top:4px;

    border-top:1pxsolid#9fa6ab;

    box-shadow:-1px01px#a8abaeinset;

    background:-webkit-linear-gradient(right,#e4e8ec,#e4e8ec60%);

    background:-moz-linear-gradient(right,#e4e8ec,#e4e8ec60%);

    background:linear-gradient(right,#e4e8ec,#e4e8ec60%);

    }

    .black.side:active:after{

    box-shadow:-1px01px#111inset;

    background:-webkit-linear-gradient(right,#414040,#4d4c4c60%);

    background:-moz-linear-gradient(right,#414040,#4d4c4c60%);

    background:linear-gradient(right,#414040,#4d4c4c60%);

    }

    .red.side:active:after{

    box-shadow:-1px01px#4b0707inset;

    background:-webkit-linear-gradient(right,#b11a1a,#b11a1a60%);

    background:-moz-linear-gradient(right,#b11a1a,#b11a1a60%);

    background:linear-gradient(right,#b11a1a,#b11a1a60%);

    }

    .yellow.side:active:after{

    box-shadow:-1px01px#816b1finset;

    background:-webkit-linear-gradient(right,#d3a203,#dba90760%);

    background:-moz-linear-gradient(right,#d3a203,#dba90760%);

    background:linear-gradient(right,#d3a203,#dba90760%);

    }

    .green.side:active:after{

    box-shadow:-1px01px#33663dinset;

    background:-webkit-linear-gradient(right,#63a870,#72b37e60%);

    background:-moz-linear-gradient(right,#63a870,#72b37e60%);

    background:linear-gradient(right,#63a870,#72b37e60%);

    }

    .blue.side:active:after{

    box-shadow:-1px01px#114566inset;

    background:-webkit-linear-gradient(right,#1a71a8,#1976b160%);

    background:-moz-linear-gradient(right,#1a71a8,#1976b160%);

    background:linear-gradient(right,#1a71a8,#1976b160%);

    }

    .gray.rarrow:hover:after,

    .gray.rarrow:hover:after{

    background:-webkit-linear-gradient(topleft,#fefefe,#ebeced);

    background:-moz-linear-gradient(topleft,#fefefe,#ebeced);

    background:linear-gradient(topleft,#fefefe,#ebeced);

    }

    .black.rarrow:hover:after,

    .black.larrow:hover:after{

    background:-webkit-linear-gradient(topleft,#818181,#575757);

    background:-moz-linear-gradient(topleft,#818181,#575757);

    background:linear-gradient(topleft,#818181,#575757);

    }

    .red.rarrow:hover:after,

    .red.larrow:hover:after{

    background:-webkit-linear-gradient(topleft,#eb6f6f,#c83c3c);

    background:-moz-linear-gradient(topleft,#eb6f6f,#c83c3c);

    background:linear-gradient(topleft,#eb6f6f,#c83c3c);

    }

    .yellow.rarrow:hover:after,

    .yellow.larrow:hover:after{

    background:-webkit-linear-gradient(topleft,#ffd859,#e3bb38);

    background:-moz-linear-gradient(topleft,#ffd859,#e3bb38);

    background:linear-gradient(topleft,#ffd859,#e3bb38);

    }

    .green.rarrow:hover:after,

    .green.larrow:hover:after{

    background:-webkit-linear-gradient(topleft,#aaebb9,#82d392);

    background:-moz-linear-gradient(topleft,#aaebb9,#82d392);

    background:linear-gradient(topleft,#aaebb9,#82d392);

    }

    .blue.rarrow:hover:after,

    .blue.larrow:hover:after{

    background:-webkit-linear-gradient(topleft,#70bfef,#4097ce);

    background:-moz-linear-gradient(topleft,#70bfef,#4097ce);

    background:linear-gradient(topleft,#70bfef,#4097ce);

    }

    .gray.rarrow:active:after,

    .gray.larrow:active:after{

    background:-webkit-linear-gradient(topleft,#e4e8ec,#e4e8ec);

    background:-moz-linear-gradient(topleft,#e4e8ec,#e4e8ec);

    background:linear-gradient(topleft,#e4e8ec,#e4e8ec);

    }

    .black.rarrow:active:after,

    .black.larrow:active:after{

    background:-webkit-linear-gradient(topleft,#424242,#575757);

    background:-moz-linear-gradient(topleft,#424242,#575757);

    background:linear-gradient(topleft,#424242,#575757);

    }

    .red.rarrow:active:after,

    .red.larrow:active:after{

    background:-webkit-linear-gradient(topleft,#b11a1a,#bf2626);

    background:-moz-linear-gradient(topleft,#b11a1a,#bf2626);

    background:linear-gradient(topleft,#b11a1a,#bf2626);

    }

    .yellow.rarrow:active:after,

    .yellow.larrow:active:after{

    background:-webkit-linear-gradient(topleft,#d3a203,#dba907);

    background:-moz-linear-gradient(topleft,#d3a203,#dba907);

    background:linear-gradient(topleft,#d3a203,#dba907);

    }

    .green.rarrow:active:after,

    .green.larrow:active:after{

    background:-webkit-linear-gradient(topleft,#63a870,#72b37e);

    background:-moz-linear-gradient(topleft,#63a870,#72b37e);

    background:linear-gradient(topleft,#63a870,#72b37e);

    }

    .blue.rarrow:active:after,

    .blue.larrow:active:after{

    background:-webkit-linear-gradient(topleft,#1a71a8,#1976b1);

    background:-moz-linear-gradient(topleft,#1a71a8,#1976b1);

    background:linear-gradient(topleft,#1a71a8,#1976b1);

    }

    .gray.rarrow:active:after{

    box-shadow:01px0#b7babdinset,-1px00#b7babdinset;

    }

    .gray.larrow:active:after{

    box-shadow:0-1px0#b7babdinset,1px00#b7babdinset;

    }

    .black.rarrow:active:after{

    box-shadow:01px0#333inset,-1px00#333inset;

    }

    .black.larrow:active:after{

    box-shadow:0-1px0#333inset,1px00#333inset;

    }

    .red.rarrow:active:after{

    box-shadow:01px0#640909inset,-1px00#640909inset;

    }

    .red.larrow:active:after{

    box-shadow:0-1px0#640909inset,1px00#640909inset;

    }

    .yellow.rarrow:active:after{

    box-shadow:01px0#816b1finset,-1px00#816b1finset;

    }

    .yellow.larrow:active:after{

    box-shadow:0-1px0#816b1finset,1px00#816b1finset;

    }

    .green.rarrow:active:after{

    box-shadow:01px0#4d7254inset,-1px00#4d7254inset;

    }

    .green.larrow:active:after{

    box-shadow:0-1px0#4d7254inset,1px00#4d7254inset;

    }

    .blue.rarrow:active:after{

    box-shadow:01px0#114566inset,-1px00#114566inset;

    }

    .blue.larrow:active:after{

    box-shadow:0-1px0#114566inset,1px00#114566inset;

    }

    相关文章

      网友评论

          本文标题:收藏的一些button样式

          本文链接:https://www.haomeiwen.com/subject/yiutdxtx.html