今天想出一种三态图形按钮实现方式,制作超简单,文字可以随意修改,各种浏览器表现一致,不含任何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 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>
最终效果:
有个限制,按钮的大小固定成几种尺寸模式,一般来讲,网页上的图形按钮应该也就几种大小,不会有各种各样大小的按钮。固定按钮大小,可以获得非常简洁的代码。