Как сделать несколько кнопок в html css

• кнопка должна обладать «резиновыми» свойствами (растягиваться в зависимости от ширины текста);
• кнопка должна быть создана из тега input;
• кликабильность должна сохранятся по всему периметру кнопки (не только на тексте);
• для создания кнопки за основу берется HTML-код, без использования javascript;
• соблюдение всех стандартов;
• высокий показатель кроссбраузерности.

На первый взгляд кажутся бессмысленными эти мороки, но в итоге это может сохранить вам уйму времени. В первую очередь такое решение приносит гибкость в корректировании кода. Если каждая кнопка будет создана на одном коде, то для внесения коррективов в ее оформление потребуется работать с каждой из них индивидуально. Также каждая кнопка может называться по своему, поэтому мы ее создаем с тянущимися свойствами, в зависимости от длины текста названия. В тоже время использование единого макета кнопки будет экономить трафик для нашего ресурса.

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

Просто длинный фон

Первое решение достаточно примитивное, но завоевывает внимание своим оригинальным подходом. Для начала следует создать в фотошопе 2 картинки, которые создадут фон кнопки и ее форму. Вам понадобится создать такие картинки

После чего создаем кнопку из тега input и устанавливаем фоном нашу картинку. В силу того, что картинка достаточно длинная, она займет нужное место в кнопке, а лишнее отсекается границами контейнера. Но чтобы левая часть выглядела также красиво, как и права, необходимо добавить вспомогательный блок, в который и войдет правая часть нашей кнопки. Кодовая часть нашего метода примет следующий вид:

div class="button"> input type="submit" value="" />Текст кнопки span>span> div>

.button  color: #fff; height: 23px; padding: 5px 6px 0 6px; background: url(img-button1) no-repeat; float: left; position: relative; overflow: hidden; > .button span  background: url(img-button2); height: 23px; width: 8px; display: block; position: absolute; z-index: 1; /* указание параметра обязательно, так как input должен быть расположен выше */ top: 0; right: 0; overflow: hidden; > .button input  position: absolute; top: 0; left: 0; width: 100%; /* Растягиваем кнопку на всю ширину картинки */ height: 100%; opacity: 0; filter:progid:DXImageTransform.Microsoft. Alpha(opacity=0); /* прозрачность для ие6-7 */ cursor: pointer; border: none; z-index: 2; > html .button  height: 23px; /* для работы в ие6 */ >

Убедимся, что метод работает

При использовании такого метода стоит помнить о том, что:

• лечение для IE должно быть подключено через условные комментарии;
• лучше использовать не 2 разные картинки, а одну объединенную — спрайт.

Метод можно назвать почти универсальным. Его нельзя будет использовать только в том случае, если уголки кнопки не будут иметь своего фона и будут прозрачными.

Модифицируем первое решение

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

div class="button"> input type="submit" value=" Текст кнопки " /> span>span> div>

.button  float: left; > .button div  position: relative; color: #fff; height: 23px; background: url(img-button1) no-repeat; > html .button div  width: 10px; > .button span  background: url(img-button2); height: 23px; width: 8px; display: block; position: absolute; z-index: 1; top: 0; right: -6px; overflow: hidden; > .button input  height: 100%; cursor: pointer; margin: 0 -6px 0 0; padding: 2px 6px 5px 6px; overflow: visible; border: none; position: relative; z-index: 2; background: none; >

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

В чем выигрывает этот метод?

• можно использовать прозрачные уголки кнопки;
• семантика кода более выгодна, так как текст кнопки относится к ее содержимому.

Однако в тоже время имеют место некоторые недостатки:

• очень объемный код для одной кнопки.

Решение на CSS3

С выходом новой спецификации создание кнопки значительно упростилось. Теперь не требуется такой огромный код, а скругленные уголки легко реализуются с помощью свойства border-radius. Потребуется только немного подлечить старичка IE

input type="submit" value="текст кнопки" />

input  height: 23px; cursor: pointer; padding: 2px 6px 5px 6px; overflow: visible; border: none; background: # 7caee1; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; behavior: url(path-to/PIE.htc); >

Преимущества использования этого метода на лицо! Код значительно меньше и проще, а главное полностью валиден. Результат в браузере будет точно такой же, как и в предыдущих способах.

В каких браузерах работает?

Создание нескольких кнопок в ряд

Выравнивание нескольких select в один ряд
Всем привет, как можно выравнять option’ы в ряд ? Длинный теееееекс.

Создание кнопок
Может кто знает как можно в Html создать кнопку просмотра страницы? Например человек заполняет.

Создание блока кнопок
Доброго времени суток.Помогите зделать блок кнопок как на картинке. Я тут начал делать ,но не.

Создание кнопок навигации
Здравствуйте. Я пытаюсь создать навигационное меню на сайте. Структура такая: <table><tr> <td.

Как сделать несколько различных кнопок для отправки различных данных со страницы?

Имеется простая страничка с 2+ кнопками

   .green < background: green; >.red  
1:  "

Каким образом можно при нажатии на одну кнопку, отправлять одни данные (например, который на кнопке), а при нажатии на другую — отправлять другие данные (тоже текст с кнопки, например)?
Конкретно в данной ситуации, чтобы при нажатии на RED — в запросе отправлялось RED, а при нажатии на GREEN — в запросе отправлялось GREEN

• Вопрос задан более трёх лет назад
• 53 просмотра

1 комментарий

Простой 1 комментарий

Оформление кнопок

Через CSS к любой кнопке применяются следующие параметры оформления: ширина и высота, фон, рамку, цвет и размер текста и др. Также к самим кнопкам и к тексту на них можно добавить тень.

Ширина и высота кнопки

Размеры кнопки явно устанавливать обычно необходимости нет, потому что кнопки автоматически подстраивают свой размер под имеющийся текст или изображение. Тем не менее, иногда в угоду дизайну приходится указывать ширину и высоту кнопки через соответствующие свойства width и height (пример 1).

Пример 1. Размеры кнопки

Также на размер кнопки можно косвенно влиять через свойство padding. Оно добавляет пространство вокруг текста, расширяя кнопку по вертикали и горизонтали (пример 2).

Пример 2. Использование padding

Здесь у свойства padding два значения: первое устанавливает пространство вокруг текста по вертикали, второе по горизонтали.

Параметры текста

К тексту на кнопке применимы те же свойства, что и для обычного текста. В частности, допустимо менять шрифт, размер текста, его насыщенность, цвет и др. В примере 3 для текста кнопки устанавливается зелёный цвет и моноширинный шрифт с заглавными буквами.

Пример 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 приведён вид кнопок, получаемый в зависимости от радиуса скругления.

Фон

В примерах выше цвет фона делался прозрачным через свойство background-color со значением transparent . Аналогично устанавливается и произвольный цвет фона. Учтите, что у цветных кнопок сохраняется рамка по умолчанию, которая при желании убирается через свойство border-width или через свойство border-style со значением none . В примере 6 вводится несколько стилевых классов для кнопок, меняющих их цвет. К элементу достаточно добавить класс .btn и одновременно класс с желаемым цветом фона, например, .success .

Пример 6. Использование background-color

Здесь используется набор цветных кнопок для различных ситуаций.

Цветной фон допустимо комбинировать с цветной рамкой, получая разные вариации кнопок. В примере 7 рамка у кнопки сперва убирается, а затем к кнопке добавляется цветная линия снизу через свойство border-bottom.

Пример 7. Сочетание фона и линии

Градиентный фон

Вместо однотонного цветного фона для кнопок можно установить градиент через свойство background-image и функцию linear-gradient(). Например, для вертикального градиента от красного к синему цвету пишем следующее:

button

Для горизонтального градиента слева направо добавится ещё один параметр to right:

button

Вместо названия цветов или шестнадцатеричных значений цвет удобно задавать в формате 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. У него четыре основных параметра: первые два отвечают за смещение тени, третий устанавливает её размытие, а четвёртый цвет тени. Так, для создания равномерной полупрозрачной тени вокруг кнопки используем следующую запись.

button

Для тени не вокруг кнопки, а внутри неё, добавляется параметр inset .

button

В примере 9 приведены несколько кнопок с разными параметрами box-shadow , дающими непохожие друг на друга тени.

Пример 9. Кнопки с тенью

Генератор различных теней вы можете увидеть здесь: front-end-tools.com/en/generateboxshadow/

Итоги

• Ширина и высота кнопки устанавливаются непосредственно через свойства width и height. Также на размер влияет свойство padding, оно задаёт расстояние от текста до края кнопки.
• Параметры рамки меняются с помощью свойства border, которое определяет толщину, стиль и цвет линии. Для скругления уголков рамки добавляется свойство border-radius.
• Цвет фона кнопки задаётся через свойство background-color, для градиентного фона применяется свойство background-image с функцией linear-gradient().
• Тень к кнопке добавляется через свойство box-shadow.

Создание нескольких кнопок в ряд

Выравнивание нескольких select в один ряд
Всем привет, как можно выравнять option’ы в ряд ? Длинный теееееекс.

Создание кнопок
Может кто знает как можно в Html создать кнопку просмотра страницы? Например человек заполняет.

Создание блока кнопок
Доброго времени суток.Помогите зделать блок кнопок как на картинке. Я тут начал делать ,но не.

Создание кнопок навигации
Здравствуйте. Я пытаюсь создать навигационное меню на сайте. Структура такая: <table><tr> <td.

Как сделать несколько различных кнопок для отправки различных данных со страницы?

Имеется простая страничка с 2+ кнопками

   .green < background: green; >.red  
1:  "

Каким образом можно при нажатии на одну кнопку, отправлять одни данные (например, который на кнопке), а при нажатии на другую — отправлять другие данные (тоже текст с кнопки, например)?
Конкретно в данной ситуации, чтобы при нажатии на RED — в запросе отправлялось RED, а при нажатии на GREEN — в запросе отправлялось GREEN

• Вопрос задан более трёх лет назад
• 53 просмотра

1 комментарий

Простой 1 комментарий

Как сделать несколько кнопок в html css

Вы можете воспользоваться каскадным обработчиком, подробнее о котором можно почитать в теме по ссылке http://www.softtime.ru/forum/read.php?id_forum=1&id_theme=1504

автор: kolobokk (19.04.2005 в 13:47) письмо автору

тема интересная, но не со всем то что я ищу.
Вернее там есть фраза:
1) Создание в форме несколько кнопок, а в обработчике отслеживать какая из кнопок нажата.

но вот как это реализуется не написано 🙁

автор: Axxil (19.04.2005 в 14:15) письмо автору

А что мешает например так сделать:
файл tst.php

автор: Krona-sm.com (08.11.2005 в 21:13) письмо автору

А как быть, если вместо кнопок submit рисунки «image», а?

автор: human (10.11.2005 в 07:36) письмо автору

Нужно сделать так:

А в обработчике проверять значение переменной $submit

case «Кнопка2»:
func2();
break;

автор: Krona-sm.com (10.11.2005 в 20:47) письмо автору

И всетаки, может кто-нибудь сказать как быть, если в место нескольких кнопок реализованы картинки?

автор: human (11.11.2005 в 08:09) письмо автору

При использовании тега атрибут value в форме не передается (поэтому его указывать бесполезно), а вместо этого передается пара значений — координаты пикселя, по которому щелкнули мышкой.
Поэтому возможны два варианта:

1. Если несколько кнопок нарисовать на одной общей картинке, до достаточно проверять диапазон X,Y для определения выбранной кнопки.

2. Если же каждая кнопка нарисована на отдельной картинке, то координаты будут передаваться в пределах каждой картинки, т.е. они не будут уникальными.
Это показано на примере ниже (он работающий — можно проверить).

В этом случае кнопкам придется дать разные имена: name1, name2 и т.д.,
а в обработчике проверять — какая именно переменная получена из формы ($name1_x, $name2_x и т.д.) , при этом сами значения полученных координат никакой ценности не имеют.

if(isset($knopka) == false)
<
echo «

Как сделать несколько кнопок в html css

Для отправки введенных данных на форме используются кнопки. Для создания кнопки используется либо элемент button :

Отправить

Либо элемент input :

С точки зрения функциональности в html эти элементы не совсем равноценны, но в данном случае они нас интересуют с точки зрения взаимодействия с кодом javascript.

При нажатии на любой из этих двух вариантов кнопки происходит отправка формы по адресу, который указан у формы в атрибуте action , либо по адресу веб-страницы, если атрибут action не указан. Однако в коде javascript мы можем перехватить отправку, обрабатывая событие click

При нажатии на кнопку происходит событие click , и для его обработки к кнопке прикрепляем обработчик sendForm . В этом обработчике проверяем введенный в текстовое поле текст. Если его длина меньше 3 символов, то выводим сообщение о недостимой длине и прерываем обычный ход события с помощью вызова e.preventDefault() . В итоге форма не отправляется.

Если же длина текста три и больше символов, то также выводится сообщение, и затем форма отправляется.

Также мы можем при необходимости при отправке изменить адрес, на который отправляются данные:

function sendForm(e) < // получаем значение поля key const keyBox = document.search.key; const val = keyBox.value; if(val.length >3) < alert("Недопустимая длина строки"); document.search.action="PostForm"; >else alert("Отправка разрешена"); >

В данном случае, если длина текста меньше 3 символов, то текст отправляется, только теперь он отправляется по адресу PostForm , поскольку задано свойство action:

document.search.action="PostForm";

Очистка формы

Для очистки формы предназначены следующие равноценные по функциональности кнопки:

Очистить 

При нажатию на кнопки произойдет очистка форм. Но также функциональность по очистке полей формы можно реализовать с помощью метода reset() :

function sendForm(e) < // получаем значение поля key const keyBox = document.search.key; const val = keyBox.value; if(val.length < 3)< alert("Недопустимая длина строки"); document.search.reset(); e.preventDefault(); >else alert("Отправка разрешена"); >

Кроме специальных кнопок отправки и очистки на форме также может использоваться обычная кнопка:

При нажатии на подобную кнопку отправки данных не происходит, хотя также генерируется событие click:

При нажатии на кнопку получаем введенный в текстовое поле текст, создаем новый элемент параграфа для этого текста и добавляем параграф в элемент printBlock.