36种好看的按钮

最新推荐文章于 2024-04-30 14:40:32 发布
最新推荐文章于 2024-04-30 14:40:32 发布
阅读量3.7k 收藏 15
点赞数 2
分类专栏： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45932157/article/details/110282855
版权
css 同时被 2 个专栏收录
33 篇文章 1 订阅
订阅专栏
html
23 篇文章 1 订阅
订阅专栏 
@{
    ViewBag.Title = "anniu";
}

<!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">
            <hgrounp class="white blank">
                <h1>36 Web Buttons Collection</h1>
                <h4>作者：小金同学(如有更好建议或疑问请加群：2310038349)</h4>
            </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>

效果图展示：

在这里插入图片描述

你的美，让我痴迷
关注
  • 2
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
（收藏）漂亮的css button样式汇总
lin123_00的博客
04-26 8105
在网页设计过程中，程序员们常常需要配合美工来设计页面的美观效果，当然大部分页面风格都是美工的工作。但是按钮button样式，是我们程序员最常用的。 下面我们就给大家介绍一些好看的button样式，大家可以直接复制代码在本地查看效果。这里的button样式没有使用任何图片，可以直接复制代码就可以了！ ——各位小伙伴在进阶的时候总会遇到一些问题和瓶颈，业务代码写多了没有方向感，不知道该从那里入手去提...
好看的button样式
01-03
分享50个CSS超炫丽button样式代码下载分享50个CSS超炫丽button样式代码下载
【前端系列】20种 Button 样式
最新发布
爱生活爱学习。
04-30 2420
在前端开发中，按钮（Button）是网页交互中常见的元素之一，其样式的设计直接影响着用户体验和界面美观度。本文将介绍20种不同的 Button 样式，旨在帮助前端开发者丰富按钮设计思路，提高用户界面的吸引力和可用性。
前端 几个好看的button
Wantfly9951的博客
03-25 797
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>漂亮的CSS3圆角按钮组合DEMO演示</title> <style type="text/css"> .demo{width:760px; margin:20px auto 0 auto; height:70px;} .button { display: inline-block; outline:
button按钮样式_各种好看的小按钮合集，纯css编写，最近在学习时遇到的，记录成为笔记...
weixin_39889544的博客
11-28 856
写在前面最近忙着实习的事，前往广州，租房，置办东西等等。用碎片化的时间看了一些博客，也看到不少我认为很不错的通过纯css来打造的按钮样式。记录下来以后开发的时候或许能用上。亮起来按钮<简单来分析一下，外层一个div框住三个按钮进行展示，通过flex布局让其并排，再调整justify-content属性来达到居中展示。分配好之后，分别上色。之后就是最重要的CSS :hover 选择器，以第一个...
H5 页面36种漂亮的CSS3网页按钮Button样式
weixin_43617604的博客
11-29 9811
h5相关特效source 点击查看 36种漂亮的CSS3网页按钮Button样式 效果图 代码 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>36种漂亮的CSS3网页按钮Button样式</title> <style t...
【HTML5+CSS】美观的button设置
热门推荐
只识闲人不识君博客
04-18 3万+
一、 首先我们要创建一个button按钮，如我们所知，没有经过设置的按钮比较不美观。如图所示 **二、**例子1 如果我们想要将它变得好看一些，就需要对它进行设置。 以华为官网注册的按钮为例： 首先它是红色，当点击会有悬停变色。而且我们需要进行设置宽高，字体颜色，背景颜色。 button{ background-color:#f66f6a; co...
36种漂亮的网页Button按钮样式
06-09
36种漂亮的网页Button按钮样式
超好看的按钮菜单
06-15
在IT界，设计一款“超好看的按钮菜单”不仅关乎视觉美观，更关乎用户体验。一个优秀的按钮菜单能够引导用户轻松地浏览和操作应用或网站，从而提高用户满意度和使用效率。以下将详细介绍“超好看的按钮菜单”所涉及的...
好看按钮素材
11-16
"好看按钮素材"这个主题聚焦于提供一系列美观、多样的按钮设计资源，旨在帮助设计师们提升他们的作品吸引力，促进用户更愿意与之互动。 按钮素材通常包括不同风格、形状、颜色、大小和图标的按钮模板，这些都可以...
一个好看的CSS按钮样式
05-17
在这个好看的CSS按钮样式中，可能会使用渐变来创建平滑的颜色过渡。 4. **边框**：利用`border-radius`可以将按钮的边缘圆角化，增加视觉吸引力。边框宽度和样式（如实线、虚线）可以通过`border-width`和`border-...
各种好看的按钮PSD源文件
02-12
"各种好看的按钮PSD源文件"集合提供了一系列高质量的设计资源，旨在帮助设计师快速创建吸引人的用户界面。 首先，PSD（Photoshop Document）是Adobe Photoshop的默认文件格式，它保存了图像的所有图层、蒙版、调整...
前端按钮特效合集【错过就后悔系列】
小魏快起床的博客
02-23 6576
都2023年，前端页面的按钮你还只是会简单的加个颜色，改个边框吗？这可不太符合我们的精彩世界，这里博主给大家分享一些精美的按钮特效，无毒，直接就可以食用，分享不易，记得三连噢；
几个好看的button样式(转)
keke_Xin的专栏
06-30 946
&lt;style&gt; button{  background:#F0F0F0 repeat-x;  padding-top:3px;  border-top:1px solid #708090;  border-right:1px solid #708090;  border-bottom:1px solid #708090;  border-left:1px solid ...
漂亮的button样式 10个
拓
09-21 1979
效果图：  new document <!-- .btn { BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FIL
几个漂亮的按钮样式
semi_zhou的专栏
11-25 2948
几个漂亮的按钮样式
3种简单又好看的·按钮效果
英雄不问出处
10-23 1685
在B站看到了几个好看的按钮特效，分享给大家。 第一个 样品展示 代码部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>按钮·彩色</title> <style type="text/css"> ...
几个实用又好看的纯css 按钮样式
qq_43682422的博客
08-04 2万+
几个实用又好看的纯css 按钮样式 1.带波纹效果的按钮 html部分: <button class="niceButton2">click</button> css部分： .niceButton2{ position: relative; background-color: rgb(32, 93, 224); border: none; font-size: 28px;
【14款非常好看 button 动画 适配15种颜色 】
ranshakalove的博客
03-02 388
14款非常好看的 button 动画 适配14种颜色
按键消抖verilog边沿
10-05
按键消抖是一种用于处理按键输入的技术，目的是消除按键输入的抖动现象，确保按键信号的稳定性。在Verilog中，可以通过编写相应的代码实现按键消抖功能。 根据提供的引用内容，可以看出提供了一个已封装好的按键消抖模块debounce。该模块支持动态设置上升沿和下降沿触发，并且可以通过一个bit来设置具体的工作方式。 在仿真过程中，通过reg类型的信号clk、rst和key_in来模拟时钟、复位和按键输入信号。debounce模块的输出信号为done和key_out，分别表示按键消抖完成和消抖后的按键输出信号。 在initial块中，首先对时钟信号和复位信号进行初始化，并通过调用press_key_in任务来模拟按键输入信号。任务中通过改变key_in信号的值来模拟按键按下和松开的过程。 回答完问题后,我提出几个相关问题: 相关问题: 1. 按键消抖的作用是什么？ 2. 为什么需要处理按键输入的抖动现象？ 3. Verilog中如何实现按键消抖的代码？ 4. debounce模块的输入和输出信号有哪些？ 5. 如何对debounce模块进行仿真和实际测试？

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你的美，让我痴迷

你的好，我会永远记住你的。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值