5款漂亮的css按鈕-帶源碼

時間 2019-12-09

標籤漂亮 css 按鈕源碼欄目 CSS 简体版

原文原文鏈接

如下按鈕均由按鈕css生成器： http://buttoncssgenerator.com/ 生成，並支持各大主流瀏覽器，css

一、深藍色專業典雅（帶陰影）html

html:  
<a href='#' class='className'>css</a>  
css:  
.className{   
    line-height:46px;  
    height:46px;  
    width:154px;  
    color:#ffffff;  
    background-color:#ededed;  
    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-color:#f5f5f5;  
    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);  
}

二、淺藍色java

.className{   
    line-height:30px;  
    height:30px;  
    width:80px;  
    color:#ffffff;  
    background-color:#ededed;  
    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-color:#f5f5f5;  
    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);  
}

三、橙色web

.className{   
    line-height:29px;  
    height:29px;  
    width:100px;  
    color:#333333;  
    background-color:#ededed;  
    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-color:#f5f5f5;  
    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);  
}

四、灰色立體感瀏覽器

.className{   
    line-height:34px;  
    height:34px;  
    width:84px;  
    color:#3a8a9e;  
    background-color:#ededed;  
    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-color:#f5f5f5;  
    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);  
}

五、綠色圓弧spa

.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;  
}

更多好看的按鈕css 請訪問 http://buttoncssgenerator.com/code