Кнопки
Кнопки являются одним из самых понятных и интуитивных элементов интерфейса. По их виду сразу становится понятно, что единственное действие, которое с ними можно производить — это нажимать на них. За счёт этой особенности кнопки часто применяются в формах, особенно при их отправке и очистке.
Кнопку на веб-странице можно создать двумя способами — с помощью тега и тега .
Рассмотрим вначале добавление кнопки через и его синтаксис.
Атрибуты кнопки перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| name | Имя кнопки, предназначено для того, чтобы обработчик формы мог его идентифицировать. |
| value | Значение кнопки и одновременно надпись на ней. |
Создание кнопки показано в примере 1.
Пример 1. Добавление кнопки
Пробелы в надписи на кнопке, в отличие от текста HTML, учитываются, поэтому можно ставить любое количество пробелов, которые в итоге влияют на ширину кнопки. Результат примера показан на рис. 1.
Второй способ создания кнопки основан на использовании тега . Он по своему действию напоминает результат, получаемый с помощью тега . Но в отличие от него предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML включая изображения и таблицы. На рис. 2 показаны разные виды кнопок, полученные с помощью .
Оформление кнопок
Через CSS к любой кнопке применяются следующие параметры оформления: ширина и высота, фон, рамку, цвет и размер текста и др. Также к самим кнопкам и к тексту на них можно добавить тень.
Ширина и высота кнопки
Размеры кнопки явно устанавливать обычно необходимости нет, потому что кнопки автоматически подстраивают свой размер под имеющийся текст или изображение. Тем не менее, иногда в угоду дизайну приходится указывать ширину и высоту кнопки через соответствующие свойства width и height (пример 1).
Также на размер кнопки можно косвенно влиять через свойство padding. Оно добавляет пространство вокруг текста, расширяя кнопку по вертикали и горизонтали (пример 2).
Пример 2. Использование padding
Здесь у свойства padding два значения: первое устанавливает пространство вокруг текста по вертикали, второе по горизонтали.
Параметры текста
К тексту на кнопке применимы те же свойства, что и для обычного текста. В частности, допустимо менять шрифт, размер текста, его насыщенность, цвет и др. В примере 3 для текста кнопки устанавливается зелёный цвет и моноширинный шрифт с заглавными буквами.
Рамка
Для управления параметрами рамки применяется свойство border и его производные: border-width, border-style и border-color. В примере 4 класс .btn устанавливает основные параметры кнопки, в том числе толщину, стиль и цвет рамки. Для расширения набора кнопок в пример включены дополнительные классы, меняющие цвет рамки и текста. Таким образом, к достаточно добавить класс .btn и класс с нужным цветом, например, .info .
Пример 4. Цветные рамки у кнопки
Здесь используется набор кнопок с цветными рамками для различных ситуаций.
Скругление углов
За скругление уголков у рамок отвечает свойство border-radius, в качестве его значения указываются любые единицы размера из CSS, например, em, rem, пиксели, проценты и др. В примере 5 у кнопок радиус установлен как 0.4em .
Пример 5. Скруглённые уголки у кнопок
Разные значения border-radius дают и различную форму кнопок. В табл. 1 приведён вид кнопок, получаемый в зависимости от радиуса скругления.
| Значение border-radius | Описание | Вид кнопки |
|---|---|---|
| 0.5em | Такое значение устанавливает одинаковый радиус скругления у всех уголков кнопки. | Кнопка |
| 5em | Любое большое значения радиуса, превышающее половину высоты кнопки, превращает кнопку в подобие пилюли. | Кнопка |
| 50% | Процентная запись устанавливает разные значения радиуса по горизонтали и вертикали, поскольку проценты берутся отдельно от ширины и высоты кнопки. В итоге получается овальная кнопка. | Кнопка |
| 0.8em 0 0.8em 0 | Четыре значения позволяют установить радиус каждого уголка кнопки независимо. Отсчёт начинается от левого верхнего угла и идёт по часовой стрелке. | Кнопка |
Фон
В примерах выше цвет фона делался прозрачным через свойство background-color со значением transparent . Аналогично устанавливается и произвольный цвет фона. Учтите, что у цветных кнопок сохраняется рамка по умолчанию, которая при желании убирается через свойство border-width или через свойство border-style со значением none . В примере 6 вводится несколько стилевых классов для кнопок, меняющих их цвет. К элементу достаточно добавить класс .btn и одновременно класс с желаемым цветом фона, например, .success .
Пример 6. Использование background-color
Здесь используется набор цветных кнопок для различных ситуаций.
Цветной фон допустимо комбинировать с цветной рамкой, получая разные вариации кнопок. В примере 7 рамка у кнопки сперва убирается, а затем к кнопке добавляется цветная линия снизу через свойство border-bottom.
Пример 7. Сочетание фона и линии
Градиентный фон
Вместо однотонного цветного фона для кнопок можно установить градиент через свойство background-image и функцию linear-gradient(). Например, для вертикального градиента от красного к синему цвету пишем следующее:
Для горизонтального градиента слева направо добавится ещё один параметр to right:
Вместо названия цветов или шестнадцатеричных значений цвет удобно задавать в формате rgba() . Тогда оставляя цвет исходным мы только меняем значение прозрачности. Здесь вместо оранжевого цвета #f79103 используется его аналог rgb(247, 145, 3), для начального и конечного цветов задана прозрачность 0.2.
linear-gradient( rgba(247, 145, 3, 0.2), rgb(247, 145, 3), rgba(247, 145, 3, 0.2) );В примере 8 представлены градиентные кнопки для разных ситуаций, цвет которых задан через rgba() . Для контрастного выделения кнопок к ним, также, добавлена рамка соответствующего цвета.
Пример 8. Градиентные кнопки
Добавление тени
Как и к любому блоку, к легко добавляется тень через свойство box-shadow. У него четыре основных параметра: первые два отвечают за смещение тени, третий устанавливает её размытие, а четвёртый цвет тени. Так, для создания равномерной полупрозрачной тени вокруг кнопки используем следующую запись.
Для тени не вокруг кнопки, а внутри неё, добавляется параметр inset .
В примере 9 приведены несколько кнопок с разными параметрами box-shadow , дающими непохожие друг на друга тени.
Итоги
- Ширина и высота кнопки устанавливаются непосредственно через свойства width и height. Также на размер влияет свойство padding, оно задаёт расстояние от текста до края кнопки.
- Параметры рамки меняются с помощью свойства border, которое определяет толщину, стиль и цвет линии. Для скругления уголков рамки добавляется свойство border-radius.
- Цвет фона кнопки задаётся через свойство background-color, для градиентного фона применяется свойство background-image с функцией linear-gradient().
- Тень к кнопке добавляется через свойство box-shadow.
Размер кнопки в php
Как в хтмл задать размеры кнопки такой
и такой onclick=»this.form.textfeld.value=’Ich bin Text 2 — ganz normal'»>
как это зделатъ в едиторе.
Не знаю как в этом эдиторе, а в хтмл, размеры кнопок задаются через стили.
Как пример.
здесь высота и ширина задана в сотню ..
width=ширина
height=высота
Зы.. можно конечно и подругому
но тогда в где-то в стилях, должно быть описание meinclass
Зы.. можно конечно и подругому
——-
Не можно, а нужно. Бо, НТМЛ не должен содержать информацию об форме отображения.
Не всегда удобно. Есть таблица с фиксированной шириной, c colgroup. B col удобнее писать бывает, чем заводить на каждый чих класс в .css файле. Или если требуется в одном месте в таблице сделать строку повыше, удобнее бывает непосредственно вписать в строке.
Я имею в виду, когда таблица одна и речь идёт всего лишь о ширине или высоте уникального элемента.
Вы еще подеритесь .. горячие финские парни ©
Насчет — «не всегда удобно» — оно неправильно, правильно — «оно всегда неудобно». И тем не мение — HTML не должен содержать спецификацию отображения.
P.S. Это не зависит от того сколько раз применяется конкретный стиль.
> Насчет — «не всегда удобно» — оно неправильно, правильно — «оно всегда неудобно».
Вот ещё, «всегда неудобно». Почти всегда удобно.
> И тем не мение — HTML не должен содержать спецификацию отображения.
> Это не зависит от того сколько раз применяется конкретный стиль.
Я как бы и сам знаю пользу от разделения оформления и содержимого. Только иногда бывают ситуации, когда правильное становится сферическим конём в вакууме.