純CSS3超酷彩色3D按鈕樣式

簡要教程

這是一款使用使用CSS3 線性漸層來製作的超酷彩色3D按鈕樣式。這組按鈕分為不同的顏色，尺寸和圓角，使用時只需要添加相應的class類即可，簡單實用。

使用方法

HTML結構

按鈕的基本HTML結構非常簡單，使用一個超連結<a>元素來製作。

<a class="button large regular red" href="javascript:void(0);">Button</a>

CSS樣式

按鈕的通用CSS樣式如下。

.button {    background-color: #999;    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));    background-image:    -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));    background-image:     -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));    background-image:      -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));    background-image:         linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));    border: none;    border-radius: .5em;    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2),                inset 0 2px 0 hsla(0,0%,100%,.1),                inset 0 1.2em 0 hsla(0,0%,100%,0.1),                inset 0 -.2em 0 hsla(0,0%,100%,.1),                inset 0 -.25em 0 hsla(0,0%,0%,.25),                0 .25em .25em hsla(0,0%,0%,.05);    color: #444;    cursor: pointer;    display: inline-block;    font-family: sans-serif;    font-size: 1em;    font-weight: bold;    line-height: 1.5;    margin: 0 .5em 1em;    padding: .5em 1.5em .75em;    position: relative;    text-decoration: none;    text-shadow: 0 1px 1px hsla(0,0%,100%,.25);    vertical-align: middle;}.button:hover {    outline: none;}.button:hover,.button:focus {    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2),                inset 0 2px 0 hsla(0,0%,100%,.1),                inset 0 1.2em 0 hsla(0,0%,100%,.1),                inset 0 -.2em 0 hsla(0,0%,100%,.1),                inset 0 -.25em 0 hsla(0,0%,0%,.25),                inset 0 0 0 3em hsla(0,0%,100%,.2),                0 .25em .25em hsla(0,0%,0%,.05);}.button:active {    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2),                inset 0 2px 0 hsla(0,0%,100%,.1),                inset 0 1.2em 0 hsla(0,0%,100%,.1),                inset 0 0 0 3em hsla(0,0%,100%,.2),                inset 0 .25em .5em hsla(0,0%,0%,.05),                0 -1px 1px hsla(0,0%,0%,.1),                0 1px 1px hsla(0,0%,100%,.25);    margin-top: .25em;    outline: none;    padding-bottom: .5em;}

按鈕上的文本樣式如下。

.lightText {    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),                inset 0 2px 0 hsla(0,0%,100%,.1),                inset 0 1.2em 0 hsla(0,0%,100%,.05),                inset 0 -.2em 0 hsla(0,0%,100%,.1),                inset 0 -.25em 0 hsla(0,0%,0%,.5),                0 .25em .25em hsla(0,0%,0%,.1);    color: #fff;    text-shadow: 0 -1px 1px hsla(0,0%,0%,.25);}.lightText:hover,.lightText:focus {    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),                inset 0 2px 0 hsla(0,0%,100%,.1),                inset 0 1.2em 0 hsla(0,0%,100%,.05),                inset 0 -.2em 0 hsla(0,0%,100%,.1),                inset 0 -.25em 0 hsla(0,0%,0%,.5),                inset 0 0 0 3em hsla(0,0%,100%,.2),                0 .25em .25em hsla(0,0%,0%,.1);}.lightText:active {    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),                inset 0 2px 0 hsla(0,0%,100%,.1),                inset 0 1.2em 0 hsla(0,0%,100%,.05),                inset 0 0 0 3em hsla(0,0%,100%,.2),                inset 0 .25em .5em hsla(0,0%,0%,.05),                0 -1px 1px hsla(0,0%,0%,.1),                0 1px 1px hsla(0,0%,100%,.25);}

按鈕的各種尺寸，圓角和顏色的CSS樣式如下。

/* Large */.large {font-size: 1.25em;} /* Medium */.medium {font-size: 1em;} /* Small */.small {font-size: .75em;} /* Regular */.regular {border-radius: .5em;} /* Square */.square {border-radius: .25em;} /* Round */.round {border-radius: 1.25em;} /* Red */.red {background-color: #ff6c6f;} /* Orange */.orange {background-color: #f6cf6f;} /* Yellow */.yellow {background-color: #fff6c6;} /* Green */.green {background-color: #6fcf6f;} /* Blue */.blue {background-color: #6fc6ff;} /* Purple */.purple {background-color: #f6c6ff;} /* White */.white {background-color: #eee;} /* Grey */.grey {background-color: #999;} /* Black */.black {background-color: #444;}

以上就是純CSS3超酷彩色3D按鈕樣式的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！

