html5 按钮渐变效果图,纯CSS3超酷彩色3D按钮样式

这是一款使用使用CSS3 线性渐变来制作的超酷彩色3D按钮样式。这组按钮分为不同的颜色，尺寸和圆角，使用时只需要添加相应的class类即可，简单实用。

使用方法

HTML结构

按钮的基本HTML结构非常简单，使用一个超链接元素来制作。

Button

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