button难看？用css让她漂亮起来

2010年4月30日 | 分类：DIV+CSS | 评论：1 | 引用：0 | 人气指数： ℃ | Tags：button 样式 css 漂亮

button样式真的不是那么好看，而且在不同浏览器里面还不一样的显示方式，让我们这些做web的很头痛，想让他漂亮起来总是不是那么方便，现在72色就写写css的方法，就当给大家抛砖引玉，让大家行动起来让讨厌的button边的可爱点。

先预览一下把：button样式

button结构

我是用a标签和span的组合模仿button，不能提交？不要急，后面会给出怎么能提交，而且是点击的时候变样子，完全模仿button的状态。

直接给出所有的html和css部分，省的大家再去组合了。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> button漂亮的样式|72色 http://www.72color.com </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
a.button {
   background: transparent url('bg_button_a.gif') no-repeat scroll top right;
   color: #444;
   display: block;
   float: left;     /*为什么居左，主要是在a加上了“display: block;”属性以后宽度就会变成正行那么长*/
   font: normal 12px arial, sans-serif;
   height: 24px;
   margin-right: 6px;
   padding-right: 18px; /* 让里面的span的右边空出18px，防止span的背景挡住a的背景 */
   text-decoration: none;
}
a.button span {
   background: transparent url('bg_button_div.gif') no-repeat;
   display: block;
   line-height: 14px;
   padding: 5px 0 5px 18px;
}
a.button:active {
   background-position: bottom right;
   color: #000;
   outline: none; /* Firefox 里面的边框去掉*/
}
a.button:active span {
   background-position: bottom left;
   padding: 6px 0 4px 18px; /* 模仿button点击时候文字往下去的样子 */
}
</style>
</HEAD>