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

来源：互联网发布：河南省大数据谷是哪里编辑：程序博客网时间：2024/05/16 09:37

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

　　需要一个图片文件：

　　网页代码：

Html代码

<?xml version="1.0" encoding="GB2312" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>first page</title>
<style type="text/css">
/*
bib:big image button
sib:small image button
lib:long image button
lsib:long button with search image
by wallimn, 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: 0 0;
}
.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;
}
/*end of button style*/
</style>
</head>
<body>
<input type="button" value="按钮" class="sib" />
<input type="button" value="长长按钮" class="lib" />
<input type="button" value="大按钮" class="bib" />
<input type="button" value="搜索" class="lsib" />
</body>
</html>

　　最终效果：

　　有个限制，按钮的大小固定成几种尺寸模式，一般来讲，网页上的图形按钮应该也就几种大小，不会有各种各样大小的按钮。固定按钮大小，可以获得非常简洁的代码。