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