CSS实例(六)：实现网页固定大小三态图形按钮简单方法-优快云博客

今天想出一种三态图形按钮实现方式，制作超简单，文字可以随意修改，各种浏览器表现一致，不含任何JS脚本。

　　需要一个图片文件：

　　网页代码：

Html代码

<?xmlversion="1.0"encoding="GB2312"?>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=GB2312"/>
<title>firstpage</title>
<styletype="text/css">
/*
bib:bigimagebutton
sib:smallimagebutton
lib:longimagebutton
lsib:longbuttonwithsearchimage
bywallimn,http://wallimn.iteye.com
*/
.bib,.sib,.lib,.lsib{
border-width:0;
vertical-align:middle;
background-color:transparent;
margin:0;
overflow:visible;
background-repeat:no-repeat;
background-image:url(buttons.gif);
}
.bib{
width:93px;
height:30px;
line-height:30px;
background-position:0-132px;
}
.bib:hover{
background-position:0-162px;
}
.sib{
width:44px;
height:22px;
line-height:22px;
background-position:00;
}
.sib:hover{
background-position:0-22px;
}
.lib{
width:66px;
height:22px;
line-height:22px;
background-position:0-44px;
}
.lib:hover{
background-position:0-66px;
}
.lsib{
width:66px;
height:22px;
line-height:22px;
background-position:0-88px;
}
.lsib:hover{
background-position:0-110px;
}
/*endofbuttonstyle*/
</style>
</head>
<body>
<inputtype="button"value="按钮"class="sib"/>
<inputtype="button"value="长长按钮"class="lib"/>
<inputtype="button"value="大按钮"class="bib"/>
<inputtype="button"value="搜索"class="lsib"/>
</body>
</html>