CSS兑现网页固定大小三态图形按钮简单方法
CSS实现网页固定大小三态图形按钮简单方法今天新想出一种三态图形按钮实现方式，制作超简单，文字可以随意修
CSS实现网页固定大小三态图形按钮简单方法
今天新想出一种三态图形按钮实现方式，制作超简单，文字可以随意修改，各种浏览器表现一致，不含任何JS脚本。
需要一个图片文件：
网页代码：
<?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 buttonsib:small image buttonlib:long image buttonlsib:long button with search imageby 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="按钮" /><input type="button" value="长长按钮" /><input type="button" value="大按钮" /><input type="button" value="搜索" /></body></html>
最终效果：
有个限制，按钮的大小固定成几种尺寸模式，一般来讲，网页上的图形按钮应该也就几种大小，不会有各种各样大小的按钮。固定按钮大小，可以获得非常简洁的代码。
?
此文转自: http://www.iteye.com/topic/768298
