谷歌的无图像按钮 [英] Google's Imageless Buttons

问题描述

最近有几篇关于 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:

  1. Standard <input type="button"> with css to improve the look (the design article talked mostly about the css/imges involves.)

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

  or

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

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