不可以小看一个小小的按钮。当你写一个简单的button时
<input type="button" id="" name="" value="宽度是多少" />
在各个浏览器上去看看宽度和高度。
IE8 下是97px*27px;
Firefox 3 是71px*18px;
Chrome 7是81px*22px;
已知的需求是按钮要求有圆角和背景图片。通常背景图片和圆角会跟皮肤一起设置。还需要有按钮小图标。
要做出圆角需要两张小图片,一张也行。下面是本例用到的图片
btn_left.gif 180px*22px;
btn_right.gif 3px*22px;
page_white_edit.png 16*16小图标。
浏览器的兼容工作大多放在按钮的大小上。下面是css:
.iButton{
font-size:12px;
font-family:"\5fae\8f6f\96c5\9ed1","Times New Roman",Tahoma,Helvetica, Arial,sans-serif;
background:transparent url(btn_left.gif) no-repeat 0px 0px;/*左边背景图片*/
color:#000;
text-decoration:none;
display: block;
float: left;
height:22px;/*display:block;float:left; height:22px;保证在各种浏览器上有一致的高度*/
margin:0px 3px;
}
.iButton span{
background:transparent url(btn_right.gif) no-repeat right top; /*右边背景图片*/
padding:0px 8px; /*不写button时padding*/
display: block;
line-height:22px;/*保证高度是22px;*/
}
.iButton input{
background-color:transparent;
background-position: left center;
background-repeat:no-repeat;
text-indent:16px;
text-indent:0px\9; /*非IE浏览器文本缩进16px;*/
margin:0px;
margin:0px -18px 0px -6px\9; /*保证按钮的宽度一致*/
padding:0px;
border-width:0px;
height:22px;/*保证高度是22px;*/
}
使用的HTML
<a class="iButton" href="###"><span><input type="button" id="" name="" value="有小图标按钮" style="background-image:url(page_white_edit.png)" /></span></a>
<a class="iButton" href="###"><span>无小图标按钮</span></a>
代码下载
参考资料
How to make sexy buttons with CSS
Top 10 CSS buttons tutorial list