谷歌的无图像按钮_前端开发问题-跟版网

本文介绍了谷歌的无图像按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！

问题描述

最近有几篇关于 Google 新的无图像按钮的文章:

页面中找到.(虽然没有图片的渐变只适用于 Firefox 和 Safari)

分步说明

1 - 插入以下 CSS:

/* 在此处启动自定义按钮 CSS---------------------------------------------------- */.btn {显示:内联块；背景:无；边距:0；填充:3px 0；边框宽度:0；溢出:可见；字体:100%/1.2 Arial，无衬线；文字装饰:无；颜色:#333;}* html 按钮.btn {填充底部:1px；}/* 下面是一个临时的 hack 服务以下边距值仅适用于 Gecko 浏览器Gecko 浏览器增加了 3px 的左/右填充到无法覆盖的按钮元素.因此，我们使用 -3px 的左右边距来克服这个问题.*/html:not([lang*=""]) button.btn {边距:0 -3px；}.btn 跨度 {背景:#f9f9f9;z-索引:1；边距:0；填充:3px 0；左边框:1px 实心#ccc；右边框:1px 实心#bbb；}* html .btn 跨度 {填充顶部:0；}.btn 跨度跨度 {背景:无；位置:相对；填充:3px .4em；边框宽度:0；边框顶部:1px 实心#ccc；边框底部:1px 实心#bbb；}.btn b {背景:#e3e3e3;位置:绝对；z-索引:2；底部:0；左:0；宽度:100%；溢出:隐藏；高度:40%；边框顶部:3px 实心#eee；}* html .btn b {顶部:1px；}.btn 你 {文字装饰:无；位置:相对；z-索引:3；}/* 只有在使用药丸样式按钮(左 | 中 | 右)时才需要药丸类 */button.pill-l 跨度 {右边框宽度:0；}button.pill-l 跨度跨度 {右边框:1px 实心#ccc；}button.pill-c 跨度 {右边框样式:无；左边框颜色:#fff；}button.pill-c span span {右边框:1px 实心#ccc；}button.pill-r 跨度 {左边框颜色:#fff；}/* 仅当为按钮实现单独的悬停状态时才需要 */.btn:悬停跨度，.btn:悬停跨度跨度{光标:指针；边框颜色:#9cf !important;颜色:#000;}/* 如果一个按钮应该是主"按钮，则使用 */.基本的 {字体粗细:粗体；颜色:#000;}

2 - 使用以下方式之一调用它(更多可以在上面的链接中找到)

<a href="#" class="btn"><span><span><b>&nbsp;</b><u>按钮</u></span></span></a>

或

<button type="button" class="btn"><span><span><b>&nbsp;</b><u>button</u></span></span></button>

There have been a few articles recently about Google's new imageless buttons:

http://stopdesign.com/archive/2009/02/04/recreating-the-button.html
http://stopdesign.com/eg/buttons/3.0/code.html
http://stopdesign.com/eg/buttons/3.1/code.html
http://gmailblog.blogspot.com/2009/02/new-ways-to-label-with-move-to-and-auto.html

I really like how these new buttons work in Gmail. How can I use these or similar buttons on my site? Are there any open source projects with a similar look & feel?

If I wanted to roll my own button package like this using JQuery/XHTML/CSS, what elements could I use? My initial thoughts are:

Standard <input type="button"> with css to improve the look (the design article talked mostly about the css/imges involves.)
Jquery javascript to bring up a custom dialog rooted to the button on the "onclick" event which would have <a> tags in them and a search bar for filtering? Would a table layout for that popup be sane?

I'm terrible at reverse engineering things on the web, what are some of the tools that I could use to help reverse engineer these buttons? Using Firefox's web developer toolbar I can't really see the css or javascript (even if it is minified) that is used on the buttons popup dialogs. What browser tool or other method could I use to peek at them and get some ideas?

I'm not looking to steal any of Google's IP, just get an idea of how I could create similar button functionality.

解决方案

-- EDIT -- I didn't see the link in the original post. Sorry! Will try and re-write to reflect actual question

StopDesign has an excellent post on this here. [edit 20091107] These were released as part of the closure library: see the button demo.

Basically the custom buttons he shows are created using a simple bit of CSS.

He originally used 9 tables to get the effect:

But later he used a simple 1px left and right margin on the top and bottom borders to achieve the same effect.

The gradient is faked by using three layers:

All of the code can be found at the Custom Buttons 3.1 page. (although the gradient without the image is only working in Firefox and Safari)

Step by Step Instructions

1 - Insert the following CSS:

/* Start custom button CSS here
---------------------------------------- */
.btn {
  display:inline-block;
  background:none;
  margin:0;
  padding:3px 0;
  border-width:0;
  overflow:visible;
  font:100%/1.2 Arial,Sans-serif;
  text-decoration:none;
  color:#333;
  }
* html button.btn {
  padding-bottom:1px;
  }
/* Immediately below is a temporary hack to serve the 
   following margin values only to Gecko browsers
   Gecko browsers add an extra 3px of left/right 
   padding to button elements which can't be overriden.
   Thus, we use -3px of left/right margin to overcome this. */
html:not([lang*=""]) button.btn {
  margin:0 -3px;
  }
.btn span {
  background:#f9f9f9;
  z-index:1;
  margin:0;
  padding:3px 0;
  border-left:1px solid #ccc;
  border-right:1px solid #bbb;
  }
* html .btn span {
  padding-top:0;
  }
.btn span span {
  background:none;
  position:relative;
  padding:3px .4em;
  border-width:0;
  border-top:1px solid #ccc;
  border-bottom:1px solid #bbb;
  }
.btn b {
  background:#e3e3e3;
  position:absolute;
  z-index:2;
  bottom:0;
  left:0;
  width:100%;
  overflow:hidden;
  height:40%;
  border-top:3px solid #eee;
  }
* html .btn b {
  top:1px;
  }
.btn u {
  text-decoration:none;
  position:relative;
  z-index:3;
  }

/* pill classes only needed if using pill style buttons ( LEFT | CENTER | RIGHT ) */
button.pill-l span {
  border-right-width:0;
  }
button.pill-l span span {
  border-right:1px solid #ccc;
  }
button.pill-c span {
  border-right-style:none;
  border-left-color:#fff;
  }
button.pill-c span span {
  border-right:1px solid #ccc;
  }
button.pill-r span {
  border-left-color:#fff;
  }

/* only needed if implementing separate hover state for buttons */
.btn:hover span, .btn:hover span span {
  cursor:pointer;
  border-color:#9cf !important;
  color:#000;
  }

/* use if one button should be the 'primary' button */
.primary {
  font-weight:bold;
  color:#000;
  }

2 - Use one of the following ways to call it (more can be found in the links above)

<a href="#" class="btn"><span><span><b>&nbsp;</b><u>button</u></span></span></a>

<button type="button" class="btn"><span><span><b>&nbsp;</b><u>button</u></span></span></button>

这篇关于谷歌的无图像按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！

谷歌的无图像按钮

问题描述

分步说明

Step by Step Instructions

相关文档推荐