Google Imageless Buttons

Недавно появилось несколько статей о новых бессмысленных кнопках Google:

Мне очень нравится, как эти новые кнопки работают в Gmail. Как я могу использовать эти или подобные кнопки на моем сайте? Есть ли проекты с открытым исходным кодом с похожим внешним видом?

Если бы я хотел свернуть свой собственный пакет кнопок, как это, используя JQuery/XHTML/CSS, какие элементы я мог бы использовать? Мои первоначальные мысли:

Стандарт <input type="button"> с css для улучшения внешнего вида (статья дизайна, в основном посвященная css/imges).
Jquery javascript, чтобы вызвать настраиваемый диалог, связанный с кнопкой в событии "onclick", в котором бы были теги <a> и панель поиска для фильтрации? Будет ли макет таблицы для этого всплывающего окна нормальным?

Я ужасен в обратном проектировании вещей в Интернете, каковы некоторые из инструментов, которые я мог бы использовать, чтобы помочь перепроектировать эти кнопки? С помощью панели инструментов веб-разработчика Firefox я не могу увидеть CSS или javascript (даже если он был уменьшен), который используется во всплывающих диалоговых окнах кнопок. Какой инструмент для браузера или другой метод я мог использовать, чтобы заглянуть в них и получить некоторые идеи?

Я не собираюсь украсть любой из IP-адресов Google, просто ознакомьтесь с тем, как я могу создать аналогичные функции кнопок.

Ответ 1

- EDIT - я не видел ссылку в исходном сообщении. Сожалею! Попробует и переписать для отражения актуального вопроса.

StopDesign имеет отличную запись в этом здесь. [edit 20091107] Они были выпущены как часть библиотеки закрытия : см. демонстрация кнопок.

В основном пользовательские кнопки показывает, создаются с использованием простого бита CSS.

Первоначально он использовал 9 таблиц, чтобы получить эффект:

Но позже он использовал простой 1px левый и правый край в верхней и нижней границах для достижения того же эффекта.

Градиент подделывается с использованием трех слоев:

Весь код можно найти на странице Custom Buttons 3.1. (хотя градиент без изображения работает только в Firefox и Safari)

Пошаговые инструкции

1 - Вставьте следующий 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 - Используйте один из следующих способов его вызова (больше можно найти в ссылках выше)

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

или

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

Ответ 2

Это их кнопка "Архив", согласно 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>

CSS - это больше, чем я хотел бы организовать/вставить для этого. Возможно, это только я, но когда разметка /css становится такой тяжелой, я думаю, что гораздо лучше ИСПОЛЬЗОВАТЬ ИЗОБРАЖЕНИЕ (или пару изображений в качестве фона. Еще лучше, спрайты). Кроме того, изображение для этой кнопки будет меньше одного.

Насколько мне нравится Google, это кажется немного излишним.

Update: Google - уникальный случай. Если вы массивный сайт, и вы хотите интернационализировать свой контент, то эта технология без изображения на самом деле действительно крутая. Это позволяет вам применять практически любой письменный язык к пользовательскому интерфейсу, не требуя создания новых изображений, или боязнь сломать ваши кнопки.

Смотрите вопрос: В чем преимущества использования кнопки без изображения?

Ответ 3

Однако вы решили сделать это, убедитесь, что вы сначала сделали страницу по умолчанию:

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

... И затем используйте jQuery для замены элемента ввода с помощью настраиваемой кнопки с событием onClick. Это гарантирует, что люди без включенного JavaScript все равно смогут использовать ваш сайт.

Юзабилити должно быть первым!

Ответ 4

Вы можете использовать этот плагин jquery, который я разработал. Кнопки работают пратически в любом месте, и поскольку это плагин, который легко настроить и настроить.

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

Ответ 5

Обновление этой публикации за 2011 год:

Google запустил новый дизайн через свои службы в июле 2011 года. Новые кнопки Google были воссозданы здесь: http://pixify.com/blog/use-google-plus-to-improve-your-ui/

Новые кнопки выглядят так:

Ответ 6

Вы можете попробовать использовать плагин Firebug для просмотра CSS на кнопке.

Ответ 7

Самая большая проблема, с которой вы собираетесь столкнуться, будет заставлять ее работать в браузерах.

Я думаю, вы должны сильно подумать, действительно ли вам это нужно... Google получает много шума для доллара, делая что-то вроде этого из-за огромного количества кнопок и языков, которые им нужны; Я подозреваю, что большинство сайтов и приложений будут столь же обеспечены, используя изображение.

Компонент с открытым исходным кодом является хорошей идеей, однако: широко распространять богатство и усилия.

Ответ 8

Большая часть работы здесь, вероятно, не будет дизайном - эти сообщения уже являются отличным How-To для эффектов градиента.

Проблема заключается в том, что эта работа работает во всех браузерах, или, более конкретно, в причудливых грудах мусора, которые являются IE6 и IE7.

Я думаю, что вы на правильном пути со стандартной кнопкой, которая переписывается с помощью jQuery - таким образом, вы по-прежнему будете доступны для чтения с экрана и можете хорошо разлагаться в действительно старых браузерах.

Для HTML я считаю, что лучше всего посетить Gmail с каждым браузером и посмотреть, какой из них произведен - я бы ожидал, что он будет совершенно другим для IE6, IE7 (также в зависимости от того, нужен ли им режим quirks) и все остальное.

Ответ 9

Они были выпущены как часть библиотеки закрытия : см. демо

Ответ 10

Панель инструментов веб-разработчиков содержит информацию о стиле стиля в меню css, которая сообщит вам, что css применяется к элементу. В этом меню также есть функция "Редактировать CSS", которая позволит вам изменить CSS на лету, чтобы увидеть, как это влияет на страницу.

Ответ 11

Сообщение со ссылкой на библиотеку закрытия не применяется. То, что было выпущено как часть библиотеки закрытия, использует кнопки с градиентами.

Другие перечисленные решения бесполезны. Вы не можете пойти оттуда и заставить эти кнопки работать в каждом браузере, в котором Gmail работает. То, что Боумен показывает на своем сайте, не работает.