转：H5 页面36种漂亮的CSS3网页按钮Button样式

  • h5相关特效[source 点击查看](https://www.cnblogs.com/heyiming/)
  • 36种漂亮的CSS3网页按钮Button样式
  • 效果图
  • 代码

h5相关特效source 点击查看

36种漂亮的CSS3网页按钮Button样式

效果图

代码

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>36种漂亮的CSS3网页按钮Button样式</title>
<style type="text/css">
body{
background: #f5faff;
}
.demo_con{width: 960px;
margin:40px auto 0;
}
.button{width: 140px;
line-height: 38px;
text-align: center;
font-weight: bold;
color: #fff;
text-shadow:1px 1px 1px #333;
border-radius: 5px;
margin:0 20px 20px 0;
position: relative;
overflow: hidden;
}
.button:nth-child(6n){margin-right: 0;
}
.button.gray{color: #8c96a0;
text-shadow:1px 1px 1px #fff;
border:1px solid #dce1e6;
box-shadow: 0 1px 2px #fff inset,0 -1px 0 #a8abae inset;
background: -webkit-linear-gradient(top,#f2f3f7,#e4e8ec);
background: -moz-linear-gradient(top,#f2f3f7,#e4e8ec);
background: linear-gradient(top,#f2f3f7,#e4e8ec);
}
.button.black{border:1px solid #333;
box-shadow: 0 1px 2px #8b8b8b inset,0 -1px 0 #3d3d3d inset,0 -2px 3px #8b8b8b inset;
background: -webkit-linear-gradient(top,#656565,#4c4c4c);
background: -moz-linear-gradient(top,#656565,#4a4a4a);
background: linear-gradient(top,#656565,#4a4a4a);
}
.button.red{border:1px solid #b42323;
box-shadow: 0 1px 2px #e99494 inset,0 -1px 0 #954b4b inset,0 -2px 3px #e99494 inset;
background: -webkit-linear-gradient(top,#d53939,#b92929);
background: -moz-linear-gradient(top,#d53939,#b92929);
background: linear-gradient(top,#d53939,#b92929);
}
.button.yellow{border:1px solid #d2a000;
box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset;
background: -webkit-linear-gradient(top,#fece34,#d8a605);
background: -moz-linear-gradient(top,#fece34,#d8a605);
background: linear-gradient(top,#fece34,#d8a605);
}
.button.green{border:1px solid #64c878;
box-shadow: 0 1px 2px #b9ecc4 inset,0 -1px 0 #6c9f76 inset,0 -2px 3px #b9ecc4 inset;
background: -webkit-linear-gradient(top,#90dfa2,#84d494);
background: -moz-linear-gradient(top,#90dfa2,#84d494);
background: linear-gradient(top,#90dfa2,#84d494);
}
.button.blue{border:1px solid #1e7db9;
box-shadow: 0 1px 2px #8fcaee inset,0 -1px 0 #497897 inset,0 -2px 3px #8fcaee inset;
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:-2px 0 1px #333;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
transform:rotate(-90deg);
}
.gray.round:after{box-shadow:1px 0 1px rgba(255,255,255,1) inset,1px 0 1px rgba(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:-2px 0 1px #fff;
}
.black.round:after{box-shadow:1px 0 1px rgba(255,255,255,.5) inset,1px 0 1px rgba(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:1px 0 1px rgba(255,255,255,.6) inset,1px 0 1px rgba(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:1px 0 1px rgba(255,255,255,.8) inset,1px 0 1px rgba(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:1px 0 1px rgba(255,255,255,.8) inset,1px 0 1px rgba(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:1px 0 1px rgba(255,255,255,.8) inset,1px 0 1px rgba(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:0 0 5px 5px;
text-shadow:-2px 0 1px #333;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
transform:rotate(-90deg);
}
.gray.side:after{text-shadow:-2px 0 1px #fff;
border-top: 1px solid #d4d4d4;
box-shadow:-2px 0 1px #eceef1 inset;
background:-webkit-linear-gradient(right,#e1e6ea,#f2f2f6 60%);
background:-moz-linear-gradient(right,#e1e6ea,#f2f2f6 60%);
background:linear-gradient(right,#e1e6ea,#f2f2f6 60%);
}
.black.side:after{border-top: 1px solid #222;
box-shadow:-2px 0 1px #606060 inset;
background:-webkit-linear-gradient(right,#373737,#555 60%);
background:-moz-linear-gradient(right,#373737,#555 60%);
background:linear-gradient(right,#373737,#555 60%);
}
.red.side:after{border-top: 1px solid #aa1e1e;
box-shadow:-2px 0 1px #c75959 inset;
background:-webkit-linear-gradient(right,#b82929,#d73f3f 60%);
background:-moz-linear-gradient(top,#b82929,#d73f3f 60%);
background:linear-gradient(top,#b82929,#d73f3f 60%);
}
.yellow.side:after{border-top: 1px solid #ba8f06;
box-shadow:-2px 0 1px #deb842 inset;
background:-webkit-linear-gradient(right,#d5a406,#fdc40b 60%);
background:-moz-linear-gradient(right,#d5a406,#fdc40b 60%);
background:linear-gradient(right,#d5a406,#fdc40b 60%);
}
.green.side:after{border-top: 1px solid #53b567;
box-shadow:-2px 0 1px #8ad599 inset;
background:-webkit-linear-gradient(right,#69ca7c,#91e5a5 60%);
background:-moz-linear-gradient(right,#69ca7c,#91e5a5 60%);
background:linear-gradient(right,#69ca7c,#91e5a5 60%);
}
.blue.side:after{border-top: 1px solid #1971a8;
box-shadow:-2px 0 1px #559dca inset;
background:-webkit-linear-gradient(right,#2482bd,#3fa2e0 60%);
background:-moz-linear-gradient(right,#2482bd,#3fa2e0 60%);
background:linear-gradient(right,#2482bd,#3fa2e0 60%);
}
.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:2px solid #fff;
}
.black.tags:after{background: #333;
border:2px solid #777;
}
.red.tags:after{background: #b42323;
border:2px solid #df4141;
}
.yellow.tags:after{background: #d2a000;
border:2px solid #fcc100;
}
.green.tags:after{background: #64c878;
border:2px solid #9bebac;
}
.blue.tags:after{background: #1e7db9;
border:2px solid #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(auto auto 26px 2px);
}
.rarrow:after{top: 6px;
right: -12px;
clip: rect(auto auto 26px 2px);
}
.gray.rarrow:before{background: #d6dbe0;
}
.gray.rarrow:after{box-shadow: 0 1px 0 #fff inset,-1px 0 0 #b7babd inset;
background:-webkit-linear-gradient(top left,#f2f3f7,#e4e8ec);
background:-moz-linear-gradient(top left,#f2f3f7,#e4e8ec);
background:linear-gradient(top left,#f2f3f7,#e4e8ec);
}
.black.rarrow:before{background: #333;
}
.black.rarrow:after{box-shadow: 0 1px 0 #8B8B8B inset,-1px 0 0 #3d3d3d inset,-2px 0 0 #8B8B8B inset;
background:-webkit-linear-gradient(top left,#656565,#4C4C4C);
background:-moz-linear-gradient(top left,#656565,#4C4C4C);
background:linear-gradient(top left,#656565,#4C4C4C);
}
.red.rarrow:before{background: #B42323;
}
.red.rarrow:after{box-shadow: 0 1px 0 #E99494 inset,-1px 0 0 #954B4B inset,-2px 0 0 #E99494 inset;
background:-webkit-linear-gradient(top left,#D53939,#B92929);
background:-moz-linear-gradient(top left,#D53939,#B92929);
background:linear-gradient(top left,#D53939,#B92929);
}
.yellow.rarrow:before{background: #D2A000;
}
.yellow.rarrow:after{box-shadow: 0 1px 0 #FEDD71 inset,-1px 0 0 #A38B39 inset,-2px 0 0 #FEDD71 inset;
background:-webkit-linear-gradient(top left,#FECE34,#D8A605);
background:-moz-linear-gradient(top left,#FECE34,#D8A605);
background:linear-gradient(top left,#FECE34,#D8A605);
}
.green.rarrow:before{background: #64C878;
}
.green.rarrow:after{box-shadow: 0 1px 0 #B9ECC4 inset,-1px 0 0 #6C9F76 inset,-2px 0 0 #B9ECC4 inset;
background:-webkit-linear-gradient(top left,#90DFA2,#84D494);
background:-moz-linear-gradient(top left,#90DFA2,#84D494);
background:linear-gradient(top left,#90DFA2,#84D494);
}
.blue.rarrow:before{background: #1E7DB9;
}
.blue.rarrow:after{box-shadow: 0 1px 0 #8FCAEE inset,-1px 0 0 #497897 inset,-2px 0 0 #8FCAEE inset;
background:-webkit-linear-gradient(top left,#42A4E0,#2E88C0);
background:-moz-linear-gradient(top left,#42A4E0,#2E88C0);
background:linear-gradient(top left,#42A4E0,#2E88C0);
}
.larrow:before{top: 6px;
left: -13px;
width: 27px;
height: 27px;
clip: rect(2px 26px auto auto);
}
.larrow:after{top: 6px;
left: -12px;
clip: rect(2px 26px auto auto);
}
.gray.larrow:before{background: #d6dbe0;
}
.gray.larrow:after{box-shadow: 0 -1px 0 #b7babd inset,1px 0 0 #fff inset;
background:-webkit-linear-gradient(top left,#f2f3f7,#e4e8ec);
background:-moz-linear-gradient(top left,#f2f3f7,#e4e8ec);
background:linear-gradient(top left,#f2f3f7,#e4e8ec);
}
.black.larrow:before{background: #333;
}
.black.larrow:after{box-shadow: 0 -1px 0 #3d3d3d inset,0 -2px 0 #8B8B8B inset,1px 0 0 #8B8B8B inset;
background:-webkit-linear-gradient(top left,#656565,#4C4C4C);
background:-moz-linear-gradient(top left,#656565,#4C4C4C);
background:linear-gradient(top left,#656565,#4C4C4C);
}
.red.larrow:before{background: #B42323;
}
.red.larrow:after{box-shadow: 0 -1px 0 #954B4B inset,0 -2px 0 #E99494 inset,1px 0 0 #E99494 inset;
background:-webkit-linear-gradient(top left,#D53939,#B92929);
background:-moz-linear-gradient(top left,#D53939,#B92929);
background:linear-gradient(top left,#D53939,#B92929);
}
.yellow.larrow:before{background: #D2A000;
}
.yellow.larrow:after{box-shadow: 0 -1px 0 #A38B39 inset,0 -2px 0 #FEDD71 inset,1px 0 0 #FEDD71 inset;
background:-webkit-linear-gradient(top left,#FECE34,#D8A605);
background:-moz-linear-gradient(top left,#FECE34,#D8A605);
background:linear-gradient(top left,#FECE34,#D8A605);
}
.green.larrow:before{background: #64C878;
}
.green.larrow:after{box-shadow: 0 -1px 0 #6C9F76 inset,0 -2px 0 #B9ECC4 inset,1px 0 0 #B9ECC4 inset;
background:-webkit-linear-gradient(top left,#90DFA2,#84D494);
background:-moz-linear-gradient(top left,#90DFA2,#84D494);
background:linear-gradient(top left,#90DFA2,#84D494);
}
.blue.larrow:before{background: #1E7DB9;
}
.blue.larrow:after{box-shadow: 0 -1px 0 #497897 inset,0 -2px 0 #8FCAEE inset,1px 0 0 #8FCAEE inset;
background:-webkit-linear-gradient(top left,#42A4E0,#2E88C0);
background:-moz-linear-gradient(top left,#42A4E0,#2E88C0);
background:linear-gradient(top left,#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: 0 1px 3px #a8abae inset,0 3px 0 #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: 0 1px 3px #111 inset,0 3px 0 #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: 0 1px 3px #5b0505 inset,0 3px 0 #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: 0 1px 3px #816b1f inset,0 3px 0 #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: 0 1px 3px #4d7254 inset,0 3px 0 #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: 0 1px 3px #114566 inset,0 3px 0 #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,#f8f8f8 60%);
background:-moz-linear-gradient(right,#e7ebee,#f8f8f8 60%);
background:linear-gradient(right,#e7ebee,#f8f8f8 60%);
}
.black.side:hover:after{background:-webkit-linear-gradient(right,#555,#6f6f6f 60%);
background:-moz-linear-gradient(right,#555,#6f6f6f 60%);
background:linear-gradient(right,#555,#6f6f6f 60%);
}
.red.side:hover:after{background:-webkit-linear-gradient(right,#c43333,#dc4949 60%);
background:-moz-linear-gradient(right,#c43333,#dc4949 60%);
background:linear-gradient(right,#c43333,#dc4949 60%);
}
.yellow.side:hover:after{background:-webkit-linear-gradient(right,#e1b21a,#fbc71d 60%);
background:-moz-linear-gradient(right,#e1b21a,#fbc71d 60%);
background:linear-gradient(right,#e1b21a,#fbc71d 60%);
}
.green.side:hover:after{background:-webkit-linear-gradient(right,#85da95,#94e0a5 60%);
background:-moz-linear-gradient(right,#85da95,#94e0a5 60%);
background:linear-gradient(right,#85da95,#94e0a5 60%);
}
.blue.side:hover:after{background:-webkit-linear-gradient(right,#338fc8,#56b2eb 60%);
background:-moz-linear-gradient(right,#338fc8,#56b2eb 60%);
background:linear-gradient(right,#338fc8,#56b2eb 60%);
}
.gray.side:active:after{top:4px;
border-top: 1px solid #9fa6ab;
box-shadow:-1px 0 1px #a8abae inset;
background:-webkit-linear-gradient(right,#e4e8ec,#e4e8ec 60%);
background:-moz-linear-gradient(right,#e4e8ec,#e4e8ec 60%);
background:linear-gradient(right,#e4e8ec,#e4e8ec 60%);
}
.black.side:active:after{box-shadow:-1px 0 1px #111 inset;
background:-webkit-linear-gradient(right,#414040,#4d4c4c 60%);
background:-moz-linear-gradient(right,#414040,#4d4c4c 60%);
background:linear-gradient(right,#414040,#4d4c4c 60%);
}
.red.side:active:after{box-shadow:-1px 0 1px #4b0707 inset;
background:-webkit-linear-gradient(right,#b11a1a,#b11a1a 60%);
background:-moz-linear-gradient(right,#b11a1a,#b11a1a 60%);
background:linear-gradient(right,#b11a1a,#b11a1a 60%);
}
.yellow.side:active:after{box-shadow:-1px 0 1px #816b1f inset;
background:-webkit-linear-gradient(right,#d3a203,#dba907 60%);
background:-moz-linear-gradient(right,#d3a203,#dba907 60%);
background:linear-gradient(right,#d3a203,#dba907 60%);
}
.green.side:active:after{box-shadow:-1px 0 1px #33663d inset;
background:-webkit-linear-gradient(right,#63a870,#72b37e 60%);
background:-moz-linear-gradient(right,#63a870,#72b37e 60%);
background:linear-gradient(right,#63a870,#72b37e 60%);
}
.blue.side:active:after{box-shadow:-1px 0 1px #114566 inset;
background:-webkit-linear-gradient(right,#1a71a8,#1976b1 60%);
background:-moz-linear-gradient(right,#1a71a8,#1976b1 60%);
background:linear-gradient(right,#1a71a8,#1976b1 60%);
}
.gray.rarrow:hover:after,.gray.rarrow:hover:after{background:-webkit-linear-gradient(top left,#fefefe,#ebeced);
background:-moz-linear-gradient(top left,#fefefe,#ebeced);
background:linear-gradient(top left,#fefefe,#ebeced);
}
.black.rarrow:hover:after,.black.larrow:hover:after{background:-webkit-linear-gradient(top left,#818181,#575757);
background:-moz-linear-gradient(top left,#818181,#575757);
background:linear-gradient(top left,#818181,#575757);
}
.red.rarrow:hover:after,.red.larrow:hover:after{background:-webkit-linear-gradient(top left,#eb6f6f,#c83c3c);
background:-moz-linear-gradient(top left,#eb6f6f,#c83c3c);
background:linear-gradient(top left,#eb6f6f,#c83c3c);
}
.yellow.rarrow:hover:after,.yellow.larrow:hover:after{background:-webkit-linear-gradient(top left,#ffd859,#e3bb38);
background:-moz-linear-gradient(top left,#ffd859,#e3bb38);
background:linear-gradient(top left,#ffd859,#e3bb38);
}
.green.rarrow:hover:after,.green.larrow:hover:after{background:-webkit-linear-gradient(top left,#aaebb9,#82d392);
background:-moz-linear-gradient(top left,#aaebb9,#82d392);
background:linear-gradient(top left,#aaebb9,#82d392);
}
.blue.rarrow:hover:after,.blue.larrow:hover:after{background:-webkit-linear-gradient(top left,#70bfef,#4097ce);
background:-moz-linear-gradient(top left,#70bfef,#4097ce);
background:linear-gradient(top left,#70bfef,#4097ce);
}
.gray.rarrow:active:after,.gray.larrow:active:after{background:-webkit-linear-gradient(top left,#e4e8ec,#e4e8ec);
background:-moz-linear-gradient(top left,#e4e8ec,#e4e8ec);
background:linear-gradient(top left,#e4e8ec,#e4e8ec);
}
.black.rarrow:active:after,.black.larrow:active:after{background:-webkit-linear-gradient(top left,#424242,#575757);
background:-moz-linear-gradient(top left,#424242,#575757);
background:linear-gradient(top left,#424242,#575757);
}
.red.rarrow:active:after,.red.larrow:active:after{background:-webkit-linear-gradient(top left,#b11a1a,#bf2626);
background:-moz-linear-gradient(top left,#b11a1a,#bf2626);
background:linear-gradient(top left,#b11a1a,#bf2626);
}
.yellow.rarrow:active:after,.yellow.larrow:active:after{background:-webkit-linear-gradient(top left,#d3a203,#dba907);
background:-moz-linear-gradient(top left,#d3a203,#dba907);
background:linear-gradient(top left,#d3a203,#dba907);
}
.green.rarrow:active:after,.green.larrow:active:after{background:-webkit-linear-gradient(top left,#63a870,#72b37e);
background:-moz-linear-gradient(top left,#63a870,#72b37e);
background:linear-gradient(top left,#63a870,#72b37e);
}
.blue.rarrow:active:after,.blue.larrow:active:after{background:-webkit-linear-gradient(top left,#1a71a8,#1976b1);
background:-moz-linear-gradient(top left,#1a71a8,#1976b1);
background:linear-gradient(top left,#1a71a8,#1976b1);
}
.gray.rarrow:active:after{box-shadow: 0 1px 0 #b7babd inset,-1px 0 0 #b7babd inset;
}
.gray.larrow:active:after{box-shadow: 0 -1px 0 #b7babd inset,1px 0 0 #b7babd inset;
}
.black.rarrow:active:after{box-shadow: 0 1px 0 #333 inset,-1px 0 0 #333 inset;
}
.black.larrow:active:after{box-shadow: 0 -1px 0 #333 inset,1px 0 0 #333 inset;
}
.red.rarrow:active:after{box-shadow: 0 1px 0 #640909 inset,-1px 0 0 #640909 inset;
}
.red.larrow:active:after{box-shadow: 0 -1px 0 #640909 inset,1px 0 0 #640909 inset;
}
.yellow.rarrow:active:after{box-shadow: 0 1px 0 #816b1f inset,-1px 0 0 #816b1f inset;
}
.yellow.larrow:active:after{box-shadow: 0 -1px 0 #816b1f inset,1px 0 0 #816b1f inset;
}
.green.rarrow:active:after{box-shadow: 0 1px 0 #4d7254 inset,-1px 0 0 #4d7254 inset;
}
.green.larrow:active:after{box-shadow: 0 -1px 0 #4d7254 inset,1px 0 0 #4d7254 inset;
}
.blue.rarrow:active:after{box-shadow: 0 1px 0 #114566 inset,-1px 0 0 #114566 inset;
}
.blue.larrow:active:after{box-shadow: 0 -1px 0 #114566 inset,1px 0 0 #114566 inset;
}</style>
</head>
<body>
<div class="page"><header id="header"><h1>作者  神秘人R</h1></header><section class="demo">
<div class="demo_con"><button type="button" class="button gray">BUY NOW</button><button type="button" class="button black">BUY NOW</button><button type="button" class="button red">BUY NOW</button><button type="button" class="button yellow">BUY NOW</button><button type="button" class="button green">BUY NOW</button><button type="button" class="button blue">BUY NOW</button><button type="button" class="button gray round">DOWNLOAD</button><button type="button" class="button black round">DOWNLOAD</button><button type="button" class="button red round">DOWNLOAD</button><button type="button" class="button yellow round">DOWNLOAD</button><button type="button" class="button green round">DOWNLOAD</button><button type="button" class="button blue round">DOWNLOAD</button><button type="button" class="button gray side">DOWNLOAD</button><button type="button" class="button black side">DOWNLOAD</button><button type="button" class="button red side">DOWNLOAD</button><button type="button" class="button yellow side">DOWNLOAD</button><button type="button" class="button green side">DOWNLOAD</button><button type="button" class="button blue side">DOWNLOAD</button><button type="button" class="button gray tags">SIGN UP</button><button type="button" class="button black tags">SIGN UP</button><button type="button" class="button red tags">SIGN UP</button><button type="button" class="button yellow tags">SIGN UP</button><button type="button" class="button green tags">SIGN UP</button><button type="button" class="button blue tags">SIGN UP</button><button type="button" class="button gray rarrow">LEARN MORE</button><button type="button" class="button black rarrow">LEARN MORE</button><button type="button" class="button red rarrow">LEARN MORE</button><button type="button" class="button yellow rarrow">LEARN MORE</button><button type="button" class="button green rarrow">LEARN MORE</button><button type="button" class="button blue rarrow">LEARN MORE</button><button type="button" class="button gray larrow">GO BACK</button><button type="button" class="button black larrow">GO BACK</button><button type="button" class="button red larrow">GO BACK</button><button type="button" class="button yellow larrow">GO BACK</button><button type="button" class="button green larrow">GO BACK</button><button type="button" class="button blue larrow">GO BACK</button>
</div>    </section>
</div>
</body>
</html>

收藏来自：https://blog.csdn.net/weixin_43617604/article/details/103313386

转：H5 页面36种漂亮的CSS3网页按钮Button样式相关推荐

  1. 36种漂亮的网页Button按钮样式

    本页面向大家展开了36种漂亮的网页Button按钮样式,各式各样的都有,适合不同的场合使用.CSS3技术的确非常强大,不过大家测试的时候不要使用IE8,因为IE8还没有完全支持css3,微软如此不屑C ...

  2. 《HTML5+CSS3网页布局和样式精粹》.(张亚飞).[PDF]ckook

    图书作者: 张亚飞 图书编号: 9787302261834 图书格式: PDF 出 版 社: 清华大学出版社 出版年份: 2011 图书页数: 500-600 [内容简介] 对于初入门的网页设计者和开 ...

  3. H5页面初次加载swiper导航切换按钮可以点击，刷新后就失效不可点击问题@令狐张豪

    原因:加载顺序的问题,数据还没有完全加载的时候就已经渲染swiper了 解决方案:(在swiper加上这两行代码) observer:true,//修改swiper自己或子元素时,自动初始化swipe ...

  4. HTML5 + CSS3 的常用 button 样式

    效果图: 不多比比,代码: <!doctype html> <html lang="en"> <head> <meta charset=& ...

  5. 小程序跳到h5页面_微信小程序跳转到H5页面实战篇

    有些场景需要从微信小程序跳转到H5页面,通常网上的教程会告诉你使用web-view组件就可以了,但实际开发中还有很多需要注意的地方,尤其是很多概念往往会把初学者弄糊涂了,下面就让我们从概念开始吧!微信 ...

  6. H5页面唤起指定app或跳转到应用市场（扫描二维码直接下载APP）

    场景1: 在 h5 页面上,不管用户是否安装过该app,都直接跳转到应用市场,让用户从应用市场上打开app. 思路: 这种场景处理比较简单,直接判断判断是android端还是ios端,然后在点击按钮上 ...

  7. react适配PC端和H5页面

    react适配PC端和H5页面 第一种方法: 监听页面尺寸,看页面是否大于适配的宽度,从而选择显示的是移动端还是pc端 import Mobile from './components/mobile. ...

  8. iOS小技能：监听H5页面goBack返回事件 网页监听APP返回键 （NavigationBackItemInjection）

    文章目录 引言 I . iOS监听H5页面goBack返回事件 1.1 UIWebView 监听H5页面goBack返回事件 1.2 WKWebView监听H5页面goBack返回事件 II. 网页监 ...

  9. H5页面使用微信网页授权实现登录认证

    在用H5开发微信公众号页面应用时,往往需要获取微信的用户信息,H5页面在微信属于访问第三方网页,因此通过微信网页授权机制,来获取用户基本信息,此处需要用户确认授权才能获取,用户确认授权后,我们可以认为 ...

  10. IOS系统中H5页面实现摇一摇功能

    公司准备开年会了,年会活动用了一套别人的系统,根据测试,有些游戏的摇一摇功能在IOS上无法使用,为了修复该功能,踩了一些坑,特此记录如下: 1. 因为IOS系统的安全要求,项目必须是在https的域名 ...

最新文章

  1. 【Sql Server】DateBase-结构化查询特殊对象“游标”
  2. 189. 旋转数组 golang
  3. android studio gradle 自动更新,android studio gradle 两种更新方法更新
  4. android toolbar源码解析,深入理解Android 5.0中的Toolbar
  5. AOSP6.0.1 系统中增加新的category类型与app绑定，并在hotseat容器中加载app
  6. struts2基础梳理（二）
  7. 剑指offer——11.旋转数组的最小数字
  8. Azkaban的Web Server源码探究系列22: 一次性执行execute的提交准备
  9. C语言（二）- 函数、指针、数组
  10. 网络唤醒无需任何软件,实现局域网广域网远程唤醒计算机
  11. python编程求100以内能被5整除之和_打印1到100之间能被3和5同时整除的数，每行打印5个数用循环算出，这是属于c语言的类型...
  12. jdon(jdong)
  13. 【opencv】动态背景下运动目标检测 SURF配准差分
  14. 武汉大学计算机音乐,名家论坛丨预告：聆听音乐
  15. Java类和对象（如何理解类和对象）
  16. kerberos详解
  17. MacBook Pro16大小写键caps lock灯不亮的问题解决
  18. error LNK2001: 无法解析的外部符号 解决方法
  19. 【游戏合集】手机都要被塞爆了，6款优质Pygame游戏合集降临~（附源码）
  20. 百度竞价广告账户的设置

热门文章

  1. 【web】自定义协议Protocol URL
  2. 虚拟化是什么意思？包含哪些技术？与私有云有什么区别？
  3. H3C网络设备模拟器显示交换机的MAC地址表
  4. TextView显示人民币符号¥
  5. python中input()函数的返回是什么类型_inputbox函数返回值的类型是什么？
  6. js实现农历时间代码
  7. 说说Stack Overflow和Quora
  8. gst-launch的-v参数
  9. ios 强制横屏大总结
  10. 初中计算机课师徒结对活动记录,2013师徒结对活动记录