仿Gmail纯css,圆角,渐变背景,自适应按钮

发布时间：2018-08-16 03:07:41 所属栏目：活动来源：站长网

导读：仿Gmail纯css,圆角,渐变背景,自适应按钮 gmail风格button的优点: 文字自适应,高度自适应无图片,减少request请求数可维护性好,后期只需修改css 扩展性好,可以非常便捷的做出各种颜色按钮依据gmail的制作思想(请参考Gmail button样式原作者Douglas Bowman

gmail风格button的优点:

文字自适应,高度自适应
无图片,减少request请求数
可维护性好,后期只需修改css
扩展性好,可以非常便捷的做出各种颜色按钮

依据gmail的制作思想(请参考Gmail button样式原作者Douglas Bowman之-Recreating the button),写出我的最终代码:

实例演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>制作Gmail式按钮-纯css,圆角,渐变背景,宽度自适应的按钮_by putaoshu 2010-9- 26</title> <style type="text/css"> body{font-size:12px;} .main{font-size:12px;padding-left:10px;} /* 方法一:浮动法 */ .btn{background-color:#ccc;border-top:1px solid #bbb;border-bottom:1px solid #bbb;display:inline-block;display:-moz-inline-stack;*display:inline;*zoom:1;} .btn-warp{position:relative;margin:0 -1px;height:100%;border-left:1px solid #bbb;border-right:1px solid #bbb;background:#e3e3e3;_float:left;_overflow:hidden;}/* float:left,ie6下触发 hayout */ .btn-top{position:absolute;top:0;left:0;right:0;border-bottom:#eeeeee 0.2em solid;background-color:#f9f9f9;line-height:0.8em;overflow:hidden;_width:100%;}/* height会使得ie下的元素获得layout,故用line-height */ .btn-main{position:relative;line-height:1.6em;padding:0 0.5em;cursor:pointer;} /* gmail,greader等google产品,已不支持ie6,故没有针对ie6做bug */ /* 方法二:无浮动 */ .btn2{;border-top:1px solid #bbb;border-bottom:1px solid #bbb;display:inline- block;}/*display:inline-block,ie下触发hayout */ .btn2-warp{background:#e3e3e3;border-left:1px solid #bbb;border-right:1px solid #bbb;margin:0 -1px;float:left;_position:relative;}/* position:relative-解决ie6下 marin为负值不可见bug */ .btn2-top{line-height:0.8em;background:#f9f9f9;border-bottom:2px solid #eeeeee;display:block;} .btn2-main{line-height:1.6em;padding:0 0.5em;margin-top:- 0.8em;cursor:pointer;display:block;} /* 其它设置 */ .btn{vertical-align:middle;text-decoration:none;color:#000;}/* 垂直距中 */ .btn1:hover{text-decoration:none;} .btn2{text-decoration:none;color:#000;}/* 字体颜色和下划线 */ .btn2:hover{text-decoration:none;} </style> </head> <body> <h2>制作Gmail式按钮-纯css,圆角,渐变背景,宽度自适应的按钮_by putaoshu 2010-9- 26</h1> <hr/> <p>方法一:浮动法</p> <div class="btn"> <div class="btn-warp"> <div class="btn-top"> </div> <div class="btn-main">圆角按钮</div> </div> </div> <br /> 我可以和文字混排的 <div class="btn"> <div class="btn-warp"> <div class="btn-top"> </div> <div class="btn-main">我也可以自由延伸的</div> </div> </div> <div class="btn" style="font-size:14px"> <div class="btn-warp"> <div class="btn-top"> </div> <div class="btn-main">我的高度也可以自适应的</div> </div> </div> <div class="UBBPanel" style="font-size:12px"> <p>CSS</p> <p>.btn{background-color:#ccc;border-top:1px solid #bbb;border-bottom:1px solid #bbb;display:inline-block;display:-moz-inline-stack;*display:inline;*zoom:1;}<br /> .btn-warp{position:relative;margin:0 -1px;height:100%;border-left:1px solid #bbb;border-right:1px solid #bbb;background:#e3e3e3;_float:left;_overflow:hidden;}/* float:left,ie6下触发 hayout */<br /> .btn-top{position:absolute;top:0;left:0;right:0;border-bottom:#eeeeee 0.2em solid;background-color:#f9f9f9;line-height:0.8em;overflow:hidden;_width:100%;}/* height会使得ie下的元素获得layout,故用line-height */<br /> .btn-main{position:relative;line-height:1.6em;padding:0 0.5em;cursor:pointer;} /* gmail,greader等google产品,已不支持ie6,故没有针对ie6做bug */</p> <p>HTML</p> <p> <a href="#" class="btn2"> <br /> <span class="btn2-warp"> <br /> <span class="btn2-top"> </span> <br /> <span class="btn2-main">圆角按钮</span> <br /> </span> <br /> </a> <br /> </p> </div> <p>方法二:无浮动</p> <a href="#" class="btn2"> <span class="btn2-warp"> <span class="btn2-top"> </span> <span class="btn2-main">圆角按钮</span> </span> </a> <a href="#" class="btn2"> <span class="btn2-warp"> <span class="btn2-top"> </span> <span class="btn2-main">取消</span> </span> </a> <div class="UBBPanel" style="font-size:12px"> <p>CSS</p> <p>.btn2{;border-top:1px solid #bbb;border-bottom:1px solid #bbb;display:inline -block;}/*display:inline-block,ie下触发hayout */ <br /> .btn2-warp{background:#e3e3e3;border-left:1px solid #bbb;border-right:1px solid #bbb;margin:0 -1px;float:left;_position:relative;}/* position:relative-解决ie6下 marin为负值不可见bug */<br /> .btn2-top{line-height:0.8em;background:#f9f9f9;border-bottom:2px solid #eeeeee;display:block;}<br /> .btn2-main{line-height:1.6em;padding:0 0.5em;margin-top:- 0.8em;cursor:pointer;display:block;}</p> <p>HTML</p> <p> <div class="btn"><br /> <div class="btn-warp"><br /> <div class="btn-top"> </div><br /> <div class="btn-main">圆角按钮</div><br /> </div><br /> </div><br /> </p> <br /><br /> <a href="http://www.veryhuo.com" target="_blank">烈火学院 http://www.veryhuo.com</a> </div>  </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!