Javascript 谷歌'；s无图像按钮

最近有几篇关于谷歌新的无图像按钮的文章：

我真的很喜欢这些新按钮在Gmail中的工作方式。如何在我的网站上使用这些或类似的按钮？有没有类似外观的开源项目

如果我想使用JQuery/XHTML/CSS像这样滚动我自己的按钮包，我可以使用哪些元素？我最初的想法是：

标准的

使用css来改善外观（设计文章主要讨论css/imges）

jqueryjavascript是否会在“onclick”事件上的按钮上显示一个自定义对话框，该按钮中有

标记和一个用于过滤的搜索栏？弹出窗口的表格布局是否合理

我对网络上的逆向工程很在行，有哪些工具可以帮助我对这些按钮进行逆向工程？使用Firefox的WebDeveloper工具栏，我看不到按钮弹出对话框上使用的css或javascript（即使缩小了）。我可以使用什么浏览器工具或其他方法查看它们并获得一些想法

---

我不想窃取谷歌的任何IP，只是想知道如何创建类似的按钮功能。

您可以尝试使用Firefox插件查看按钮上的CSS。

在CSS菜单下有一个视图样式信息，可以告诉您对某个项目应用了什么CSS。该菜单中还有“编辑CSS”功能，允许您动态更改CSS，以查看其对页面的影响。

无论您决定如何操作，请确保首先使用默认值呈现页面：

<input type="submit" value="submit" />

。。。然后使用jQuery将输入元素与具有onClick事件的自定义按钮交换。这将确保未启用JavaScript的用户仍然能够使用您的站点

可用性应该放在第一位

据Firebug称，这是他们的“存档”按钮

<div tabindex="0" act="7" class="goog-imageless-button goog-inline-block goog-imageless-button goog-imageless-button-collapse-right goog-imageless-button-primary" id="">
  <div class="goog-inline-block goog-imageless-button-outer-box">
    <div class="goog-inline-block goog-imageless-button-inner-box">
      <div class="goog-imageless-button-pos">
        <div class="goog-imageless-button-top-shadow"> </div>
        <div class="goog-imageless-button-content"><b>Archive</b></div>
      </div>
    </div>
  </div>
</div>

 
档案文件

CSS不仅仅是我想要组织/粘贴的。也许只有我一个人，但当标记/css变得如此繁重时，我想我更愿意使用一幅图像（或两幅图像作为背景。更好的是，精灵）。此外，此按钮的图像将小于一个K

虽然我很喜欢谷歌，但这似乎有点过分了

---

更新： 谷歌是一个独特的例子。如果你是一个庞大的网站，你想国际化你的内容，那么这种无图像技术实际上是很酷的。它允许您将几乎任何书面语言应用到UI，而无需生成新图像，也无需担心损坏按钮

---

请参阅问题：

您将面临的最大问题是如何让它跨浏览器工作

我想你应该好好考虑一下你是否真的需要…由于谷歌需要大量的按钮和语言，谷歌通过制作这样的东西获得了巨大的回报；我怀疑，大多数网站和应用程序使用图像也会同样富裕

不过，开源组件是个好主意：广泛传播财富和努力。

--EDIT--我在原始帖子中没有看到链接。很抱歉将尝试重新编写以反映实际问题

StopDesign在这方面有一个很好的帖子[edit 20091107]这些是作为：的一部分发布的。请参阅。

基本上，他使用简单的CSS创建自定义按钮

他最初使用了9张桌子来获得效果：

但后来，他在顶部和底部边框上使用了一个简单的1px左右边距来实现相同的效果

通过使用三层来伪造渐变：

所有代码都可以在页面上找到。（虽然没有图像的渐变只适用于Firefox和Safari）

逐步说明 1-插入以下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-使用以下方式之一调用它（更多信息可在上面的链接中找到）

或

按钮

这里的大部分工作可能不会是设计——这些帖子已经是一个很好的如何处理渐变效果的方法

问题在于如何在所有浏览器中都能使用它，或者更具体地说，在IE6和IE7这堆古怪的垃圾中

我认为，使用jQuery重新编写的标准按钮已经走上了正确的轨道——这样，屏幕阅读器仍然可以访问您，并且在真正的旧浏览器中可以很好地降级

---

对于HTML，我认为你最好的选择是使用每个浏览器访问Gmail，看看生成了什么HTML——我希望IE6、IE7（也取决于它们是否需要怪癖模式）和其他所有东西都会完全不同

您可以使用我开发的jquery插件。这些按钮在任何地方都能正常工作，因为它是一个插件，所以它们很容易设置和配置

---

这些内容是作为以下内容的一部分发布的：请参阅带有闭包库链接的帖子不适用。作为闭包库的一部分发布的内容使用带有渐变的按钮

---

列出的其他解决方案是无用的。你不能在Gmail的所有浏览器上都使用这些按钮。Bowman在他的网站上展示的不是工作代码。

为2011年更新此帖子：

2011年7月，谷歌推出了一项新的服务设计。新的Google按钮已在此处重新创建：

新按钮如下所示：

---

我发现firebug对于这类事情非常有用——查看CSS的应用和动态变化。我也使用firebug，但因为它有自己的引擎，所以可能有点重。在我看来，工具栏更轻，更容易使用。为什么？改用

，因为它可以有c

<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>