簡短教學
這是一款使用使用CSS3 線性漸層來製作的超酷彩色3D按鈕樣式。這組按鈕分成不同的顏色，尺寸和圓角，使用時只需要加入對應的class類即可，簡單實用。
使用方法
HTML結構
按鈕的基本HTML結構非常簡單，使用一個超連結元素來製作。
<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按鈕樣式的內容，更多相關內容請關注PHP中文網（m.sbmmt.com）！