36个漂亮的CSS3动态按钮，纯CSS制作无图片

随着HTML5/CSS3技术日趋成熟，现如今被越来越多的网站广泛的运用。

中国网页设计为大家收集整理最新的CSS3按钮代码。

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>36个漂亮的CSS3网页按钮Button样式|www.125jz.com</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: "03c"; 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: "0bb"; 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"> <hgrounp class="white blank"> <h1>36种漂亮的CSS3网页按钮Button样式|www.125jz.com</h1> </hgrounp> </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>

Tips:You can change the code before run.

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/4656.html

36个漂亮的CSS3动态按钮，纯CSS制作无图片

99%的人还看了以下文章

CSS制作三角形原理—超简单

跟永哥学HTML5（4）：正确使用HTML5的header、hgroup和section

如何为需要打印的网页设置单独的css样式

第11课：边框（border）

Less编写及使用快速入门

CSS3 transform:rotate()制作旋转图片

发表回复