Botões sem imagem do Google

Recentemente, publicamos alguns artigos sobre os novos botões sem imagem do 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

Eu realmente gosto de como esses novos botões funcionam no Gmail. Como posso usar esses botões ou outros semelhantes em meu site? Há algum projeto de código aberto com aparência e comportamento semelhantes?

Se eu quisesse lançar meu próprio pacote de botões como este usando JQuery / XHTML / CSS, quais elementos eu poderia usar? Meus pensamentos iniciais são:

1. Padrão <input type="button">com css para melhorar a aparência (o artigo de design falava principalmente sobre os envolvimentos de css / imges).

2. Jquery javascript para abrir uma caixa de diálogo personalizada com raiz no botão no evento "onclick" que teria <a>tags e uma barra de pesquisa para filtragem? Um layout de tabela para esse pop-up seria lógico?

Eu sou péssimo em coisas de engenharia reversa na web. Quais são algumas das ferramentas que eu poderia usar para ajudar na engenharia reversa desses botões? Usando a barra de ferramentas para desenvolvedores web do Firefox, não consigo ver o css ou javascript (mesmo que esteja reduzido) que é usado nas caixas de diálogo pop-up dos botões. Que ferramenta de navegador ou outro método eu poderia usar para espiá-los e obter algumas ideias?

Não estou procurando roubar nenhum IP do Google, apenas tenho uma ideia de como eu poderia criar uma funcionalidade de botão semelhante.

- EDITAR - Não vi o link na postagem original. Desculpe! Tentaremos reescrever para refletir a questão real

StopDesign tem um excelente post sobre isso aqui . [editar 20091107] Eles foram lançados como parte da biblioteca de encerramento : veja a demonstração do botão .

Basicamente, os botões personalizados que ele mostra são criados usando um pedaço simples de CSS.

Ele originalmente usou 9 tabelas para obter o efeito:

Mais tarde, porém, ele usou uma margem esquerda e direita simples de 1px nas bordas superior e inferior para obter o mesmo efeito.

O gradiente é falsificado usando três camadas:

Todo o código pode ser encontrado na página Custom Buttons 3.1 . (embora o gradiente sem a imagem só funcione no Firefox e Safari)

Instruções passo a passo

1 - Insira o seguinte 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 uma das seguintes formas de chamá-lo (mais podem ser encontradas nos links acima)

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

ou

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

Este é o botão "Arquivo" deles, de acordo com 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>

O CSS é mais do que eu quero organizar / colar para isso. Talvez seja só eu, mas quando a marcação / css ficar tão pesada, acho que prefiro USAR UMA IMAGEM (ou algumas imagens como plano de fundo. Melhor ainda, Sprites). Além disso, uma imagem para este botão seria inferior a um único K.

Por mais que eu ame o Google, isso parece um pouco exagero.

Atualização: o Google é um caso único. Se você tem um site enorme e deseja internacionalizar seu conteúdo, essa técnica sem imagens é realmente muito boa. Ele permite que você aplique praticamente qualquer linguagem escrita à sua IU, sem a necessidade de gerar novas imagens ou o medo de quebrar seus botões.

Veja a pergunta: Quais são as vantagens de usar um botão sem imagem?

Independentemente de como você decidir fazê-lo, certifique-se primeiro de renderizar a página com o padrão:

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

... E então use jQuery para trocar o elemento de entrada com seu botão personalizado que possui um evento onClick. Isso garantirá que as pessoas sem JavaScript habilitado ainda possam usar o seu site.

A usabilidade deve estar em primeiro lugar!

Você pode usar este plugin jquery que desenvolvi. Os botões funcionam praticamente em qualquer lugar e, por serem um plugin, são fáceis de instalar e configurar.

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

Atualizando este post para 2011: o

Google lançou um novo design em seus serviços em julho de 2011. Os novos botões do Google foram recriados aqui: http://pixify.com/blog/use-google-plus-to-improve-your-ui /

Os novos botões têm a seguinte aparência:

Você pode tentar usar o plugin Firebug para Firefox para visualizar o CSS no botão.

O maior problema que você terá será fazer com que funcione em todos os navegadores.

Eu acho que você deve considerar seriamente se você realmente precisa disso ... O Google obtém muito retorno do investimento fazendo algo assim por causa do grande número de botões e linguagens de que precisam; Suspeito que a maioria dos sites e aplicativos ficaria tão bem usando uma imagem.

Porém, um componente de código aberto é uma boa ideia: espalhe a riqueza e o esforço amplamente.

A maior parte do trabalho aqui provavelmente não será o design - esses posts já são um excelente tutorial sobre os efeitos de gradiente.

O problema é fazer com que isso funcione em todos os navegadores ou, mais especificamente, nas estranhas pilhas de lixo que são o IE6 e o ​​IE7.

Acho que você está no caminho certo com um botão padrão que é reescrito com jQuery - dessa forma, você ainda estará acessível para leitores de tela e pode degradar bem em navegadores realmente antigos.

Para o HTML, acho que sua melhor aposta é visitar o Gmail com cada navegador e ver o que o HTML é produzido - eu esperava que fosse completamente diferente para o IE6, IE7 (também dependendo se eles precisam do modo quirks) e tudo mais .

Eles foram lançados como parte da biblioteca de encerramento : veja a demonstração do botão

A barra de ferramentas do desenvolvedor da Web tem informações de estilo de exibição no menu css que informará qual css é aplicado a um item. Há também o recurso Editar CSS nesse menu, que permitirá que você altere o CSS rapidamente para ver como ele afeta a página.

A postagem com um link para a biblioteca de encerramento não se aplica. O que foi lançado como parte da biblioteca de encerramento usa botões com gradientes .

As outras soluções listadas são inúteis. Você não pode ir de lá e fazer com que esses botões funcionem em todos os navegadores do Gmail. O que Bowman mostra em seu site não é um código funcional.