设计精致按钮

HTML

<div>
    <a href="#" class="button black">圆角按钮</a>
    <a href="#" class="button black bigrounded">大号椭圆按钮</a>
    <a href="#" class="button black medium">中号按钮</a>
    <a href="#" class="button black small">小号按钮</a> <br />
</div>
					    

CSS

body {
    background:#ededed;
    margin: 30px auto;
    color: #999;
}
.button { /* 定义渐变按钮样式类 */
    display: inline-block;
    /*zoom 和 *display 属性都为了兼容ie7，使其具有display:inlineblock特性*/
    zoom: 1;
    *display: inline;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    /*设计按钮圆角、盒子阴影和文本阴影特效*/
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.button:hover { text-decoration: none; }
.button:active {
    position: relative;
    top: 1px;
}
.bigrounded { /* 定义大圆角样式类 */
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}
.medium { /* 定义大按钮样式类 */
    font-size: 12px;
    padding: .4em 1.5em .42em;
}
.small { /* 定义小按钮样式类 */
    font-size: 11px;
    padding: .2em 1em .275em;
}
/* 设计颜色样式类: 黑色风格的按钮 */
/* 通过设计不同颜色样式类，可以设计不同风格的按钮效果 */
.black { /* 黑色样式类 */
    color: #d7d7d7;
    border: solid 1px #333;
    background: #333;
    background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
    background: -moz-linear-gradient(top, #666, #000);
    background: linear-gradient(to bottom, #666, #000);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
.black:hover { /* 黑色鼠标经过样式类 */
    background: #000;
    background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
    background: -moz-linear-gradient(top, #444, #000);
    background: linear-gradient(to bottom, #444, #000);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}
.black:active { /* 黑色鼠标激活样式类 */
    color: #666;
    background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
    background: -moz-linear-gradient(top, #000, #444);
    background: linear-gradient(to bottom, #000, #444);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
}