5款漂亮的css按钮_html/css_WEB-ITnose

原创: 2016-06-24 11:36:40 956浏览

以下按钮均由按钮css生成器： http://buttoncssgenerator.com/ 生成，并支持各大主流浏览器，

1、深蓝色专业典雅（带阴影）

html:  css  css:  .className{       line-height:46px;      height:46px;      width:154px;      color:#ffffff;            font-size:20px;      font-weight:bold;      font-family:Arial;      background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #599bb3), color-stop(1, #408c99));      background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);      background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);      background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);      background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);      background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);      border:0px solid #dcdcdc;      -webkit-border-top-left-radius:8px;      -moz-border-radius-topleft:8px;      border-top-left-radius:8px;      -webkit-border-top-right-radius:8px;      -moz-border-radius-topright:8px;      border-top-right-radius:8px;      -webkit-border-bottom-left-radius:8px;      -moz-border-radius-bottomleft:8px;      border-bottom-left-radius:8px;      -webkit-border-bottom-right-radius:8px;      -moz-border-radius-bottomright:8px;      border-bottom-right-radius:8px;      -moz-box-shadow:0px 10px 14px -7px #276873;      -webkit-box-shadow:0px 10px 14px -7px #276873;      box-shadow:0px 10px 14px -7px #276873;      text-align:center;      display:inline-block;      text-decoration:none;  }  .className:hover {            background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #408c99), color-stop(1, #599bb3));      background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);      background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);      background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);      background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);      background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);  }

2、浅蓝色

.className{       line-height:30px;      height:30px;      width:80px;      color:#ffffff;            font-size:15px;      font-weight:bold;      font-family:Arial;      background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #79bbff), color-stop(1, #378de5));      background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);      background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);      background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);      background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);      background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);      border:1px solid #84bbf3;      -webkit-border-top-left-radius:6px;      -moz-border-radius-topleft:6px;      border-top-left-radius:6px;      -webkit-border-top-right-radius:6px;      -moz-border-radius-topright:6px;      border-top-right-radius:6px;      -webkit-border-bottom-left-radius:6px;      -moz-border-radius-bottomleft:6px;      border-bottom-left-radius:6px;      -webkit-border-bottom-right-radius:6px;      -moz-border-radius-bottomright:6px;      border-bottom-right-radius:6px;      -moz-box-shadow: inset 0px 1px 0px 0px #bbdaf7;      -webkit-box-shadow: inset 0px 1px 0px 0px #bbdaf7;      box-shadow: inset 0px 1px 0px 0px #bbdaf7;      text-align:center;      display:inline-block;      text-decoration:none;  }  .className:hover {            background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #378de5), color-stop(1, #79bbff));      background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%);      background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%);      background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%);      background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);      background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0);  }

3、橙色

.className{       line-height:29px;      height:29px;      width:100px;      color:#333333;            font-size:15px;      font-weight:bold;      font-family:Arial;      background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #ffec64), color-stop(1, #ffab23));      background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);      background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);      background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);      background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);      background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);      border:1px solid #ffaa22;      -webkit-border-top-left-radius:6px;      -moz-border-radius-topleft:6px;      border-top-left-radius:6px;      -webkit-border-top-right-radius:6px;      -moz-border-radius-topright:6px;      border-top-right-radius:6px;      -webkit-border-bottom-left-radius:6px;      -moz-border-radius-bottomleft:6px;      border-bottom-left-radius:6px;      -webkit-border-bottom-right-radius:6px;      -moz-border-radius-bottomright:6px;      border-bottom-right-radius:6px;      -moz-box-shadow: inset 0px 1px 0px 0px #fff6af;      -webkit-box-shadow: inset 0px 1px 0px 0px #fff6af;      box-shadow: inset 0px 1px 0px 0px #fff6af;      text-align:center;      display:inline-block;      text-decoration:none;  }  .className:hover {            background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #ffab23), color-stop(1, #ffec64));      background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);      background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%);      background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);      background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);      background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0);  }

4、灰色立体感

.className{       line-height:34px;      height:34px;      width:84px;      color:#3a8a9e;            font-size:16px;      font-weight:normal;      font-family:Arial;      background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #ededed), color-stop(1, #bab1ba));      background:-moz-linear-gradient(top, #ededed 5%, #bab1ba 100%);      background:-o-linear-gradient(top, #ededed 5%, #bab1ba 100%);      background:-ms-linear-gradient(top, #ededed 5%, #bab1ba 100%);      background:linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);      background:-webkit-linear-gradient(top, #ededed 5%, #bab1ba 100%);      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#bab1ba',GradientType=0);      border:1px solid #d6bcd6;      -webkit-border-top-left-radius:15px;      -moz-border-radius-topleft:15px;      border-top-left-radius:15px;      -webkit-border-top-right-radius:15px;      -moz-border-radius-topright:15px;      border-top-right-radius:15px;      -webkit-border-bottom-left-radius:15px;      -moz-border-radius-bottomleft:15px;      border-bottom-left-radius:15px;      -webkit-border-bottom-right-radius:15px;      -moz-border-radius-bottomright:15px;      border-bottom-right-radius:15px;      -moz-box-shadow:3px 4px 0px 0px #899599;      -webkit-box-shadow:3px 4px 0px 0px #899599;      box-shadow:3px 4px 0px 0px #899599;      text-align:center;      display:inline-block;      text-decoration:none;  }  .className:hover {            background:-webkit-gradient(linear, left top, left bottom, color-start(0.05, #bab1ba), color-stop(1, #ededed));      background:-moz-linear-gradient(top, #bab1ba 5%, #ededed 100%);      background:-o-linear-gradient(top, #bab1ba 5%, #ededed 100%);      background:-ms-linear-gradient(top, #bab1ba 5%, #ededed 100%);      background:linear-gradient(to bottom, #bab1ba 5%, #ededed 100%);      background:-webkit-linear-gradient(top, #bab1ba 5%, #ededed 100%);      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bab1ba', endColorstr='#ededed',GradientType=0);  }

5、绿色圆弧

.className{
line-height:50px;
height:50px;
width:110px;
color:#ffffff;
background-color:#44c767;
font-size:17px;
font-weight:normal;
font-family:Arial;
border:1px solid #18ab29;
-webkit-border-top-left-radius:28px;
-moz-border-radius-topleft:28px;
border-top-left-radius:28px;
-webkit-border-top-right-radius:28px;
-moz-border-radius-topright:28px;
border-top-right-radius:28px;
-webkit-border-bottom-left-radius:28px;
-moz-border-radius-bottomleft:28px;
border-bottom-left-radius:28px;
-webkit-border-bottom-right-radius:28px;
-moz-border-radius-bottomright:28px;
border-bottom-right-radius:28px;
-moz-box-shadow: inset 0px 0px 0px 0px #ffffff;
-webkit-box-shadow: inset 0px 0px 0px 0px #ffffff;
box-shadow: inset 0px 0px 0px 0px #ffffff;
text-align:center;
display:inline-block;
text-decoration:none;
}
.className:hover {
background-color:#5cbf2a;
}