Boutons sans image de Google

Il y a eu récemment quelques articles sur les nouveaux boutons sans image 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

J'aime beaucoup le fonctionnement de ces nouveaux boutons dans Gmail. Comment puis-je utiliser ces boutons ou des boutons similaires sur mon site? Existe-t-il des projets open source avec une apparence et une convivialité similaires?

Si je voulais rouler mon propre package de boutons comme celui-ci en utilisant JQuery / XHTML / CSS, quels éléments pourrais-je utiliser? Mes premières pensées sont:

1. Standard <input type="button">avec css pour améliorer l'apparence (l'article sur la conception parlait principalement des implications css / imges.)

2. Jquery javascript pour faire apparaître une boîte de dialogue personnalisée enracinée sur le bouton de l'événement "onclick" qui contiendrait des <a>balises et une barre de recherche pour le filtrage? Une disposition de table pour ce popup serait-elle saine?

Je suis très doué pour le reverse engineering de choses sur le Web, quels sont certains des outils que je pourrais utiliser pour aider à reverse engineering de ces boutons? En utilisant la barre d'outils de développement Web de Firefox, je ne peux pas vraiment voir le css ou le javascript (même s'il est minifié) qui est utilisé dans les boîtes de dialogue contextuelles des boutons. Quel outil de navigation ou autre méthode pourrais-je utiliser pour les examiner et avoir des idées?

Je ne cherche pas à voler l'adresse IP de Google, j'ai juste une idée de la façon dont je pourrais créer une fonctionnalité de bouton similaire.

- EDIT - Je n'ai pas vu le lien dans le message d'origine. Désolé! Essaiera de réécrire pour refléter la question réelle

StopDesign a un excellent article à ce sujet ici . [modifier 20091107] Ceux-ci ont été publiés dans le cadre de la bibliothèque de fermeture : voir la démo du bouton .

Fondamentalement, les boutons personnalisés qu'il montre sont créés à l'aide d'un simple morceau de CSS.

Il a utilisé à l'origine 9 tables pour obtenir l'effet:

Mais plus tard, il a utilisé une simple marge gauche et droite de 1px sur les bordures supérieure et inférieure pour obtenir le même effet.

Le dégradé est simulé en utilisant trois couches:

Tout le code se trouve sur la page Custom Buttons 3.1 . (bien que le dégradé sans l'image ne fonctionne que dans Firefox et Safari)

Instructions étape par étape

1 - Insérez le CSS suivant:

/* 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 - Utilisez l'une des méthodes suivantes pour l'appeler (vous pouvez en trouver plus dans les liens ci-dessus)

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

C'est leur bouton "Archive", selon 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>

Le CSS est plus que ce que je veux organiser / coller pour cela. C'est peut-être juste moi, mais quand le balisage / css devient aussi lourd, je pense que je préférerais de loin UTILISER UNE IMAGE (ou quelques images comme arrière-plan. Mieux encore, Sprites). En outre, une image pour ce bouton serait inférieure à un seul K.

Même si j'aime Google, cela semble un peu exagéré.

Mise à jour: Google est un cas unique. Si vous êtes un site massif et que vous souhaitez internationaliser votre contenu, cette technique sans image est en fait vraiment cool. Il vous permet d'appliquer à peu près n'importe quel langage écrit à votre interface utilisateur, sans avoir à générer de nouvelles images ni à craindre de casser vos boutons.

Voir Question: Quels sont les avantages d'utiliser un bouton sans image?

Quelle que soit la manière dont vous décidez de le faire, assurez-vous de rendre d'abord la page avec la valeur par défaut:

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

... Et puis utilisez jQuery pour permuter l'élément d'entrée avec votre bouton personnalisé qui a un événement onClick. Cela garantira que les personnes sans JavaScript activé pourront toujours utiliser votre site.

La convivialité doit venir en premier!

Vous pouvez utiliser ce plugin jquery que j'ai développé. Les boutons fonctionnent pratiquement n'importe où et comme il s'agit d'un plugin, ils sont faciles à installer et à configurer.

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

Mise à jour de cet article pour 2011:

Google a lancé un nouveau design pour ses services en juillet 2011. Les nouveaux boutons Google ont été recréés ici: http://pixify.com/blog/use-google-plus-to-improve-your-ui /

Les nouveaux boutons ressemblent à ceci:

Vous pouvez essayer d'utiliser le plugin Firebug pour Firefox pour afficher le CSS sur le bouton.

Le plus gros problème que vous allez avoir sera de le faire fonctionner sur tous les navigateurs.

Je pense que vous devriez sérieusement vous demander si vous en avez vraiment besoin ... Google en a pour son argent en faisant quelque chose comme ça en raison du grand nombre de boutons et de langues dont ils ont besoin; Je soupçonne que la plupart des sites et des applications seraient tout aussi aisés en utilisant une image.

Un composant open source est cependant une bonne idée: répartissez largement la richesse et l'effort.

La majorité du travail ici ne sera probablement pas la conception - ces articles sont déjà un excellent guide sur les effets de dégradé.

Le problème est de faire fonctionner cela dans tous les navigateurs, ou plus précisément dans les tas de déchets originaux que sont IE6 et IE7.

Je pense que vous êtes sur la bonne voie avec un bouton standard qui est réécrit avec jQuery - de cette façon, vous serez toujours accessible pour les lecteurs d'écran et pourrez bien se dégrader dans les navigateurs vraiment anciens.

Pour le HTML, je pense que votre meilleur pari est de visiter Gmail avec chaque navigateur et de voir quel HTML est produit - je m'attendrais à ce que ce soit complètement différent pour IE6, IE7, (également selon qu'ils ont besoin du mode bizarreries) et tout le reste .

Ceux-ci ont été publiés dans le cadre de la bibliothèque de fermeture : voir la démo du bouton

La barre d'outils Web Developer contient des informations de style d'affichage sous le menu css qui vous indiqueront quel css est appliqué à un élément. Il y a aussi la fonction Modifier CSS dans ce menu qui vous permettra de changer le CSS à la volée pour voir comment cela affecte la page.

Le message avec un lien vers la bibliothèque de fermeture ne s'applique pas. Ce qui a été publié dans le cadre de la bibliothèque de fermeture utilise des boutons avec des dégradés .

Les autres solutions listées sont inutiles. Vous ne pouvez pas partir de là et faire fonctionner ces boutons sur tous les navigateurs Gmail les fait fonctionner. Ce que Bowman montre sur son site ne fonctionne pas avec du code.