Внешний вид кнопок на интерфейсе GMail появился не так давно и довольно привлекателен.
Appearance of GMail buttons is only few months old. And it much pretty than traditional buttons.
История появления этих кнопок
Custom Buttons History
Первоначально автор увидел, как с использованием таблицы в 9 ячеек создавали кнопки, которые не зависели от операционной среды и браузера.
Firstly author saw how to make universal buttons with a table and 9 cells inside. He think that he can make more simple solution. And start to work.
В начале получилось создать кнопки, которые одинаково отображались во всех браузерах, но должны были быть абсолютны по ширине. На следующей итерации автор разработал кнопки, которые растягивались по ширине в зависимости от текста внутри них, но пока ещё использовали изображение градиента для фона.
At a first milestone author has to make buttons which identically renders in different browsers and identically looks in diffrenet Operating Systems. At a second iteration author make Custom Buttons more complex and its width make changeable with text inside.
Но для тех, кто хочет полностью прочитать об итерациях разработки, прошу в саму статью. Здесь же я расскажу, что и куда подключить, чтобы использовать даже не конченый вариант кнопок (как в GMail), а промежуточный с градиентным изображением на фоне.
If you want to know more about developing iterations of this Custom Buttons, you could read original article. Here I want to show how to use not end variant of Custom Buttons (which uses gradient background image instead only CSS and XHTML code).
Подключение и использование
How to include and use code of Custom Buttons
Первым делом нам необходимо подключить файл с CSS-стилями Custom Buttons к тому документу, в котором мы собираемся их использовать (ну или, например, к шаблону, чтобы использовать их на всём сайте). Забрать файл со стилями можно отсюда: Скачать CSS файл. А файл градиентного изображения можно забрать здесь: Скачать фон для кнопок. Временно сохраните их у себя, а потом разместите их где расположен сайт (я предпочитаю в корне делать папку css для стилей, и папку images для используемых изображений, если у Вас будет другое расположение, то нужно подравить код файла стилей - указать путь до изображения фона).
First of all you need to include CSS-file with Custom Buttons styles to document, which will use this buttons (or, for example, to template - for use it over all site). You can download needed files here: CSS styles file, Background gradient image. Save it locally, and then upload it to your site hosting (I prefer to make css folder in root directory for css files and images for image files, which I use in application interface; if you have another file layout you must change custombutton.css for path of background image for button).
Затем подключение файла со стилями происходит таким образом. Где-нибудь внутри секции <head> необходимо написать следующий код:
After deploying of files you must include style file with next code in <head> section of yours documents or template:
<head> <link rel="stylesheet" type="text/css" href="/css/custombutton.css" /> </head>
Создать кнопку на сайте теперь стало очень просто, можно воспользоваться двумя способами (использовать тег <a> или <button>:
Now you can make so much buttons as you want using next primer code:
<a class="btn" href="http://summercode.ru"><span><span>Go to start page</span></span></a> or <button class="btn" type="button" onlick="alert('You clicked me!');"><span><span>My Button!</span></span></button>
Пример:
Example:
