Google 如何创建表单按钮？答案

【问题标题】：How does Google create its form buttons?Google 如何创建表单按钮？
【发布时间】：2010-08-17 01:20:30
【问题描述】：

我非常喜欢 Gmail 创建表单输入和随附的“搜索邮件”按钮的方式。

See linked for screenshot.

但是，我很难破译 Gmail 压缩的 HTML/CSS 代码来弄清楚他们是如何创建这种外观的。

谁能帮我弄清楚我需要使用什么 HTML 和 CSS 来重新创建文本输入 + 随附的“搜索邮件”按钮的组合，与 Gmail 中所见的完全一样（请参阅屏幕截图并特别注意文本输入的方式也触摸按钮）。

提前致谢。

更新：

我找到了以下博客文章，但它没有足够的信息让我重新创建 Gmail 使用“搜索邮件”按钮所做的事情。

stopdesign.com/archive/2009/02/04/recreating-the-button.html

更新 2

即使我从下面的 Michael 那里得到了一些很棒的帮助，但我仍然不知道如何实际实现它。任何更多的帮助，将不胜感激。谢谢！

【问题讨论】：

我在这里找到了答案 --> stackoverflow.com/questions/520640/googles-imageless-buttons/…

标签： html css forms gmail

【解决方案1】：

它是一个有两列的表格。搜索文本框在左侧单元格中，“按钮”在右侧单元格中。

“按钮”是一个div 元素，带有一些样式以赋予它按钮的外观和感觉。它有一个背景渐变填充、填充和圆角右角（但不是左角）。

单元格间距和填充为 0 时，按钮与文本字段齐平。由于按钮左侧没有圆角，但右侧有圆角，因此它似乎是单个元素的一部分。

背景创建为：

background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F9F9F9), to(#E3E3E3));

四舍五入是：

border-bottom-left-radius: 0px 0px;
border-top-left-radius: 0px 0px;
border-bottom-right-radius: 3px 3px;
border-top-right-radius: 3px 3px;

Chrome 的开发者工具或 Firefox 的 FireBug 等工具可以帮助您使用 Inspect Element 功能快速解决问题。

【讨论】：

嗨迈克尔，我很抱歉，但我对创建 CSS 有点陌生。我16岁。你介意帮助我处理所需的 HTML。感谢您迄今为止的所有帮助！
另外，background 不是只在 Chrome/Safari 中工作，因为它说 -webkit。我很困惑，因为这也适用于 IE 和 Firefox。
Google 会进行浏览器检测——如果您使用的浏览器不支持渐变，它会提供图像来模拟它。

【解决方案2】：

您可以通过使用 css 位置属性来做到这一点，并使用它的技术，即像这样的东西

<div class="button"> 
  <span class="top-right"> </span>
  <span class="bottm-right"></span>
</div> 

//css
.button{ postion:relative ; width : .. ; height:..; top : .. ; left: .. }
.top-right{postion:absolute;top:0;left:100%; width:..;height:..;display:block;;background:url(top_right_corner_img.gif);}

.bottom-right{postion:absolute;top:100%;left:100%; width:..;height:..;display:block;background:url(bottom_right_corner_img.gif);}

用一些js来添加点击事件..

【讨论】：