Google ' s boutons sans images

Question

Il y a eu quelques articles récemment sur Google nouvelles sans images des boutons:

• 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 vraiment la façon dont ces nouveaux boutons dans Gmail. Comment puis-je utiliser ces boutons sur mon site? Existe-il des projets open source avec un même look & feel?

Si je voulais faire rouler mon propre bouton paquet comme ça à l'aide de JQuery/XHTML/CSS, quels éléments dois-je utiliser? Mes premières pensées sont:

1. La norme <input type="button"> avec css pour améliorer le look (de la conception à l'article parlait surtout le css/imges implique.)

2. Jquery javascript pour afficher une boîte de dialogue personnaliser ses racines sur le bouton de la "onclick" de l'événement qui aurait <a> balises et une barre de recherche pour filtrer? Serait une disposition de table pour que popup être sain d'esprit?

Je suis terrible à de l'ingénierie inverse sur le web, quels sont les outils que je pourrais utiliser pour vous aider à désosser ces boutons? L'utilisation de Firefox web de la barre d'outils du développeur je ne vois pas vraiment le css ou javascript (même si elle est minimisé) qui est utilisé sur les boutons popup boîtes de dialogue. Quel outil de votre navigateur ou une autre méthode dois-je utiliser pour coup d'oeil à eux et obtenir quelques idées?

Je ne cherche pas à voler de Google IP, juste avoir une idée de comment je pourrais créer les mêmes fonctionnalité du bouton.

Answer 1

-- EDIT -- je n'ai pas vu le lien dans le post original. Désolé! Vais essayer et ré-écrire à réfléchir réelle question

StopDesign a un excellent post sur ce ici. [edit 20091107] Ces ont été libérés dans le cadre de la fermeture de la bibliothèque: voir le bouton demo.

Fondamentalement, les boutons personnalisés, il montre à l'aide d'un simple peu de CSS.

Il a d'abord utilisé 9 tables pour obtenir l'effet:

Mais plus tard, il a utilisé un simple 1px à gauche et à droite de la marge en haut et en bas frontières pour atteindre le même effet.

Le gradient est truquée par l'aide de trois couches:

Tout le code peut être trouvé à l' Boutons Personnalisés 3.1 page. (bien que le dégradé sans que l'image ne fonctionne que sous Firefox et Safari)

Des Instructions étape par étape

1 - Insérer le code 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 (plus peut être trouvé 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>

Answer 2

C'est leur Bouton "Archiver", 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 je l'aime organiser/coller pour cela. Peut-être que c'est juste moi, mais lorsque le balisage/css devenir lourd, je pense que je préférerais UTILISER UNE IMAGE (ou un couple d'images comme arrière-plan. Mieux encore, les Sprites). En outre, une image de ce bouton doit être inférieure à un K.

Autant que j'aime Google, cela semble un peu exagéré.

---

Mise à jour: Google est un cas unique. Si vous êtes un énorme site et que vous souhaitez internationaliser votre contenu, puis cette image-moins technique est vraiment cool. Il vous permet d'appliquer juste au sujet de toutes les langues écrites de votre INTERFACE utilisateur, sans avoir besoin de générer de nouvelles images ou de peur de briser vos boutons.

Voir la Question: Quels sont les avantages de l'utilisation d'un sans images bouton?

Answer 3

Toutefois, vous décidez de le faire, assurez-vous de que vous rendez tout d’abord la page avec la valeur par défaut :

... Et puis utiliser jQuery pour échanger l’élément input avec votre bouton personnalisé qui possède un événement onClick. Ceci assurera que les personnes sans JavaScript activé sera toujours en mesure d’utiliser votre site.

Facilité d’utilisation devrait venir en premier !

Answer 4

Mise à jour de ce post pour 2011 :

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

Les nouveaux boutons ressemblent à ceci :