Botões sem imagem do Google

90

Recentemente, publicamos alguns artigos sobre os novos botões sem imagem do Google:

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.

javascript  html  css  gmail  reverse-engineering 
— MikeN
fonte

Respostas:

55

- 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: 9 mesas

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: Gradiente do botão

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>
— bjtitus
fonte
32

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?

— Sampson
fonte
13

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!

— Ty.
fonte
5
Por quê? Em <button type="submit">vez disso, use um , pois ele pode ter elementos filho e ser estilizado como você quiser.
— ausência de pálpebras
13

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/

12

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: insira a descrição da imagem aqui

— bperdue
fonte
+1. Em vez de tentar falsificar gradientes usando imagens ou elementos adicionais como esta resposta post atual, use gradientes sempre que possível e volte para uma cor razoável em navegadores mais antigos.
— mikemaccana
5

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.

— Zac Thompson
fonte
2

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 .

— Keith
fonte
1
Sinceramente, duvido que o Google esteja detectando o IE para renderização de botões.
— ausência de pálpebras
1

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.

— Mykroft
fonte
Acho o firebug extremamente útil exatamente para esse tipo de coisa - ver o que o CSS é aplicado e as mudanças ativas.
— Thelema de
Eu uso o firebug também, mas como ele tem seu próprio motor, pode ser um pouco pesado. A barra de ferramentas é muito mais leve e fácil de usar, na minha opinião.
— Mykroft de
0

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.

— Jose
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.