Botones sin imágenes de Google

Recientemente, se han publicado algunos artículos sobre los nuevos botones sin imágenes de Google:

• 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

Realmente me gusta cómo funcionan estos nuevos botones en Gmail. ¿Cómo puedo utilizar estos botones u otros similares en mi sitio? ¿Hay proyectos de código abierto con un aspecto y una sensación similares?

Si quisiera lanzar mi propio paquete de botones como este usando JQuery / XHTML / CSS, ¿qué elementos podría usar? Mis pensamientos iniciales son:

1. Estándar <input type="button">con css para mejorar el aspecto (el artículo de diseño hablaba principalmente sobre css / imges).

2. ¿Jquery javascript para abrir un diálogo personalizado arraigado en el botón del evento "onclick" que tendría <a>etiquetas y una barra de búsqueda para filtrar? ¿Sería sano un diseño de tabla para esa ventana emergente?

Soy terrible en la ingeniería inversa de cosas en la web, ¿cuáles son algunas de las herramientas que podría usar para ayudar a realizar ingeniería inversa en estos botones? Usando la barra de herramientas para desarrolladores web de Firefox, realmente no puedo ver el CSS o JavaScript (incluso si está reducido) que se usa en los cuadros de diálogo emergentes de botones. ¿Qué herramienta de navegador u otro método podría usar para echar un vistazo y obtener algunas ideas?

No estoy buscando robar ninguna IP de Google, solo tener una idea de cómo podría crear una funcionalidad de botón similar.

- EDITAR - No vi el enlace en la publicación original. ¡Lo siento! Intentaré volver a escribir para reflejar la pregunta real

StopDesign tiene una excelente publicación sobre esto aquí . [editar 20091107] Estos fueron lanzados como parte de la biblioteca de cierre : vea la demostración del botón .

Básicamente, los botones personalizados que muestra se crean utilizando un simple fragmento de CSS.

Originalmente usó 9 tablas para obtener el efecto:

Pero luego usó un simple margen izquierdo y derecho de 1px en los bordes superior e inferior para lograr el mismo efecto.

El degradado se falsifica mediante el uso de tres capas:

Todo el código se puede encontrar en el página de Botones personalizados 3.1 . (aunque el degradado sin la imagen solo funciona en Firefox y Safari)

Instrucciones paso a paso

1 - Inserte el siguiente 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 una de las siguientes formas de llamarlo (se pueden encontrar más en los enlaces de arriba)

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

o

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

Este es su botón "Archivo", según 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>

El CSS es más de lo que me importa organizar / pegar para esto. Quizás soy solo yo, pero cuando el marcado / css se vuelve tan pesado, creo que preferiría USAR UNA IMAGEN (o un par de imágenes como fondos. Mejor aún, Sprites). Además, una imagen para este botón tendría menos de una K.

Por mucho que me encanta Google, esto parece un poco exagerado.

Actualización: Google es un caso único. Si eres un sitio masivo y deseas internacionalizar tu contenido, entonces esta técnica sin imágenes es realmente genial. Le permite aplicar casi cualquier lenguaje escrito a su interfaz de usuario, sin necesidad de generar nuevas imágenes o sin temor a romper sus botones.

Consulte la pregunta: ¿Cuáles son las ventajas de utilizar un botón sin imagen?

Independientemente de cómo decida hacerlo, asegúrese de renderizar primero la página con el valor predeterminado:

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

... Y luego use jQuery para intercambiar el elemento de entrada con su botón personalizado que tiene un evento onClick. Esto garantizará que las personas que no tengan JavaScript habilitado podrán seguir utilizando su sitio.

¡La usabilidad debe ser lo primero!

Podrías usar este complemento de jquery que he desarrollado. Los botones funcionan de manera práctica en cualquier lugar y, dado que es un complemento, son fáciles de instalar y configurar.

http://swizec.com/code/styledButton/

Actualización de esta publicación para 2011:

Google lanzó un nuevo diseño en todos sus servicios en julio de 2011. Los nuevos botones de Google se han recreado aquí: http://pixify.com/blog/use-google-plus-to-improve-your-ui /

Los nuevos botones se ven así:

Puede intentar usar el complemento de Firebug para Firefox para ver el CSS en el botón.

El mayor problema que tendrá será hacer que funcione en todos los navegadores.

Creo que debería considerar seriamente si realmente lo necesita ... Google obtiene mucho por su dinero al hacer algo como esto debido a la gran cantidad de botones e idiomas que necesitan; Sospecho que la mayoría de los sitios y aplicaciones estarían igualmente bien usando una imagen.

Sin embargo, un componente de código abierto es una buena idea: distribuya ampliamente la riqueza y el esfuerzo.

La mayor parte del trabajo aquí probablemente no será el diseño; esas publicaciones ya son un excelente tutorial sobre los efectos de degradado.

El problema es hacer que esto funcione en todos los navegadores, o más específicamente en los extravagantes montones de basura que son IE6 e IE7.

Creo que está en el camino correcto con un botón estándar que se reescribe con jQuery; de esa manera, seguirá siendo accesible para los lectores de pantalla y puede degradarse muy bien en navegadores realmente antiguos.

Para el HTML, creo que su mejor opción es visitar Gmail con cada navegador y ver qué HTML se produce; esperaría que sea completamente diferente para IE6, IE7 (también dependiendo de si necesitan modo peculiar) y todo lo demás .

Estos se lanzaron como parte de la biblioteca de cierres : vea la demostración del botón

La barra de herramientas del desarrollador web tiene una información de estilo de vista en el menú css que le indicará qué css se aplica a un elemento. También existe la función Editar CSS en ese menú que le permitirá cambiar el CSS sobre la marcha para ver cómo afecta a la página.

No se aplica la publicación con un enlace a la biblioteca de cierre. Lo que se lanzó como parte de la biblioteca de cierres utiliza botones con degradados .

Las otras soluciones enumeradas son inútiles. No puede ir desde allí y hacer que estos botones funcionen en todos los navegadores que Gmail tiene funcionando. Lo que Bowman muestra en su sitio no es código funcional.