Как оформлять текстовые кнопки?

Четверг, 12 Ноября 2009 г. 09:34 (ссылка)
Процитировано 26 раз + в цитатник или сообщество +поставить ссылку
Прочитало: 27 за час / 236 за день
Очередное дополнение в

Как вы уже должны были понять по заголовку и первой строчке поста, сегодня я буду учить оформлять текстовые кнопки. Почему? Поскольку с картинками на ЛиРу последнее время наблюдаются некоторые перебои, самое время вспомнить про альтернативу. Причём про ту, что сказано в старом анекдоте:

Мальчик приходит из школы. Папаня сидит за столом и потихоньку, рюмка за рюмкой, потребляет.
- Папа! - кричит мальчик. - Что такое альтернатива?
Папа опрокидывает очередную рюмочку и спрашивает:
- А тебе зачем?
- Учительница велела спросить.
- Ну, тогда садись...
Мальчик усаживается, папа наливает-опрокидывает и начинает объяснять:
- Открой холодильник! Видишь - яйца лежат. Мы их, конечно, съедим. А могли бы… - Папа мечтательно закатывает глаза. - А могли бы положить в инкубатор. И через месяц из них вылупились бы цыплятки. Хорошенькие такие, желтенькие... - Папа выпивает очередную рюмочку. - Ну вот: стали бы мы о них заботиться, ухаживать за ними... И спустя некоторое время цыплятки подросли бы и превратились в хорошеньких таких петушков и курочек. А ещё спустя время курочки начали бы нести яйца. - Папа мечтательно улыбается и выпивает очередную рюмочку. - Ну вот... - продолжает. - Эти яйца мы тоже не стали бы есть или продавать, а снова положили бы в инкубатор. И, опять же спустя время, у нас появилось бы еще больше цыплят. Мы бы их выкормили, ухаживали бы, оберегали... - Папа снова выпивает рюмочку. - Короче, где-нибудь через год-другой у нас с тобой была бы большая птицеферма. Мы бы жили и радовались... - Глаза у папы вдруг мутнеют, из правого выкатывается скупая мужская слеза, и он, сделав страшное выражение на лице, говорит. - И тут вдруг - гроза, ураган, наводнение... Молния бьет в курятник, он вспыхивает. Вода подступает, размывает землю. Курочки, петушки, цыплятки - все поголовно тонут. Утром у нас с тобой - одни жалкие трупики... - Папа выпивает две рюмки подряд и начинает в голос рыдать. Сын тоже совсем уже готов присоединиться к отцу, разрыдаться, но все-таки спрашивает:
- Папа! Так альтернатива-то - что?
- Папа приходит в себя, выпивает еще рюмочку, смотрит на сына и говорит:
- Альтернатива? Утки!

Вот и вам предлагаю взамен графических кнопок текстовые.

Я уже писал про то, Как сделать текстовые кнопки? Как их размещать?.

Пора рассказать и про то, как их можно оформлять.
Для начала я открой маленькую тайну. Можно сделать "просто кнопку". Которая ничего не будет делать, просто будет нажиматься. Пример: .
Ну, как? Нажимается?
Вот её код:


Так, всё, хватит нажимать! А то я её выключу! Как? А хотя бы вот так!
Выключенная кнопка: .
Вот её код:


Но можно не только "включать и выключать" кнопки, но и управлять остальными её характеристиками.
Например:
Вот её код:

Вот теперь давайте разбираться, что тут есть что.
Для управление внешним видом кнопки используется даже не html, a CSS (Каскадные таблицы стилей / Cascading Style Sheets).
Все эти характеристики находятся в коде кнопки после "style=".
Вид у этого поля такой:
style="характеристика-1:параметр;характеристика-2:параметр; ...; характеристика-n:параметр"

Итак:
1. Размер кнопки.
За размер отвечают параметры "width" и "height" (могут быть оба, может быть только один).
Параметр "width" может выражаться в пикселях (абсолютный размер), а может быть - в процентах от возможной доступной ширины.
Например:

Вот её код:


2. Цвет кнопки.
За цвет кнопки отвечает параметр "background-color". Цвет может быть обозначен 6-ти цифровым параметром или его словарным название.
Например: "background-color:#000000" или "background-color:black"

3. Тип шрифта кнопки.
За тип шрифта кнопки отвечает параметр "font-family".
Например: "font-family:Arial" или "font-family:Geneva, Arial, Helvetica, sans-serif".
Зачем указывать несколько шрифтов? Когда браузер встречает первый (левый) шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере.

4. Размер шрифта кнопки.
За размер шрифта кнопки отвечает параметр "font-size".
Для задания абсолютного размера используются следующие значения: xx-small, x-small, small, medium, large, x-large, xx-large.
Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др.

5. Цвет шрифта кнопки.
За цвет шрифта кнопки отвечает параметр "color". Цвет может быть обозначен 6-ти цифровым параметром или его словарным название.
Например: "color:#000000" или "color:black".

6. Стиль шрифта кнопки.
За вид стиль кнопки отвечает параметр "font-style".
Может принимать значение:
- normal (обычное начертание текста).
- italic (курсивное начертание).
- oblique (наклонный шрифт).
Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив - это специальный шрифт, имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо. В браузере Internet Explorer шрифт со значением italic и oblique всегда показывается как курсив.
Например: "font-style:italic"

7. Насыщенность шрифта кнопки.
За насыщенность шрифта отвечает параметр "font-weight". Насыщенность шрифта задается с помощью ключевых слов: "bold" — полужирное, "bolder" — жирное; "lighter" — светлое, "normal" — нормальное начертание. Также можно допустимо использовать условные единицы от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700.
Например: "font-weight:bold" или "font-weight:600".

Вот её код:


Вроде основные возможные свойства кнопок описал.
Осталось только научить вас делать так, чтобы при нажатии на неё открывалась ссылка. Тут я должен оговорится, что так делать нельзя, но на ЛиРу работает.
Надо просто вставить код кнопки внутри html-кода на ссылку:

А код будет такой:


Ну, а кроме того, из кнопок можно делать строчки и столбики:




Удачного вам кнопкосозидания!