css美化36款按钮效果代码-html代码-BFW代码库

代码语言：html

代码描述：css美化36款按钮效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <style type="text/css">
        *{margin:0;padding:0;list-style-type:none;}
        a,img{border:0;}
        body{font-size:14px;font-family:"微软雅黑";background:#f5faff;}
        .demo_con{width: 960px;margin:40px auto 0;}
        @charset "utf-8";
.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;
        float:left;display:inline;
}
.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);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f3f7', endColorstr='#e4e8ec'); /*  IE */
}
.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);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#656565', endColorstr='#4a4a4a'); /*  IE */
}
.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);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d53939', endColorstr='#b92929'); /*  IE */
}
.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);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fece34', endColorstr='#d8a605'); /*  IE */
}
.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);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#90dfa2', endColorstr='#84d494'); /*  IE */
}
.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);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#42a4e0', endColorstr='#2e88c0'); /*  IE */
}
.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(13.........完整代码请登录后点击上方下载按钮下载查看