html button形状,一个清爽的button按钮样式

效果如下：

 

复制代码代码如下:

.clear { /* generic container (i.e. div) for floating buttons */

overflow: hidden;

width: 100%;

}

a.button {

background: transparent url('IMG/bg_button_a.gif') no-repeat scroll top right;

color: #444;

display: block;

float: left;

font: normal 12px arial, sans-serif;

height: 24px;

margin-right: 6px;

padding-right: 18px; /* sliding doors padding */

text-decoration: none;

}

a.button span

{

background: transparent url('IMG/bg_button_span.gif') no-repeat;

display: block;

line-height: 14px;

padding: 5px 0 5px 18px;

}

a.button:active {

background-position: bottom right;

color: #000;

outline: none; /* hide dotted outline in Firefox */

}

a.button:active span {

background-position: bottom left;

padding: 6px 0 4px 18px; /* push text down 1px */

}

按钮

这是IMG文件夹下的两张图片：

bg_button_a:

 

bg_button_span: