Как увеличить размер кнопки в html

Атрибуты

Кроме добавления классов мы можем ориентироваться на наличие атрибутов элемента и в зависимости от их значений менять стиль кнопок.

Атрибут type

Этот атрибут определяет роль кнопки: обычная, для отправки формы или для её очистки. В табл. 1 показаны возможные значения атрибута type.

По умолчанию к type применяется значение submit , поэтому внутри формы у кнопки атрибут type можно опустить.

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

button[type=»button»]
button[type=»submit»]
button[type=»reset»]

Чтобы не повторять одинаковые стилевые правила, сперва добавляем свойства к селектору button , а затем уже к селекторам с button[type] . Свойства у button наследуются, поэтому переопределить нужно только различающиеся значения. В итоге все кнопки будут оформлены единообразно, различаясь друг с другом цветом.

В примере 1 показана форма для поиска с текстовым полем и двумя кнопками: первая кнопка отправляет введённую текстовую строку на сервер, а вторая очищает форму. Эти кнопки различаются цветом фона, текста и рамки.

Пример 1. Кнопки разных цветов

Здесь вокруг кнопки с type=»reset» добавлена рамка, что несколько увеличивает размер кнопки. Чтобы все кнопки получились одинаковой высоты, к ним добавляется рамка, цвет которой совпадает с цветом фона.

Вместо изменения цвета, рядом с надписью на кнопке можно показать соответствующую иконку. Элемент позволяет комбинировать изображения с текстом.

Альтернативный путь состоит в использовании ::before, он создаёт псевдоэлемент до содержимого самого элемента, в нашем случае, . Для этого псевдоэлемента иконку выводим как фоновую картинку через свойство background (пример 2).

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

У свойства background из примера указано три параметра:

0 — картинка располагается в левом верхнем углу;
cover — картинка масштабируется и вписывается в размеры иконки (они определяются свойствами width и height);
url() — адрес картинки.

Атрибут disabled

Атрибут disabled, добавленный к , блокирует кнопку, после чего по такой кнопке нельзя щёлкнуть и она отображается бледнее обычной.

Обычная кнопка Блокированная кнопка

Для управления стилем блокированной кнопкой можно воспользоваться селектором button[disabled] , а также более современным методом — псевдоклассом :disabled.

В примере 3 у блокированной кнопки меняется цвет фона, текста и вид курсора при наведении на кнопку.

Пример 3. Использование :disabled

Здесь изначально кнопка заблокирована через атрибут disabled и становится доступной после написания любого символа в текстовом поле. Если текст стереть, то кнопка вернётся к своему заблокированному состоянию.

Итоги

У элемента есть два часто используемых атрибута: type и disabled.
Атрибут type определяет роль кнопки: обычная кнопка, кнопка для отправки формы и кнопка для возврата введённых в форму данных к исходным значениям.
Для стилизации кнопок с разными значениями type применяются селекторы button[type=»submit»] , button[type=»reset»] , button[type=»button»] .
Атрибут disabled блокирует кнопку от нажатия — по такой кнопке нельзя щёлкнуть. С помощью JavaScript атрибут можно убирать или добавлять, в зависимости от заданных условий.
Стиль заблокированной кнопки меняется через псевдокласс :disabled, для этого используется селектор button:disabled .

Автор: Влад Мержевич
Последнее изменение: 25.05.2023

Создайте набор кнопок для разных ситуаций: кнопка по умолчанию, кнопка для отправки формы, кнопка для очистки формы, заблокированная кнопка. Их вид показан на рис. 1.

Рис. 1. Кнопки разных типов

Создайте кнопку с иконкой корзины, показанную на рис. 1.

Размер текста внутри кнопки

Можете задавать размер текста в единицах vw . Например: font-size:1.4vw; . Но учтите, что на мобильных устройствах текст может быть слишком мелким, а на больших экранах — слишком большим.

15 дек 2016 в 11:48
@Pyramidhead Спасибо, помогло!
15 дек 2016 в 11:56
@Pyramidhead Создайте ответ на основе комментария, раз автору вопроса это помогло.
15 дек 2016 в 12:34

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Можете задавать размер текста в единицах vw (1vw = 1% от ширины окна). Например: font-size:1.4vw; .

Но учтите, что на мобильных устройствах текст может быть слишком мелким, а на больших экранах — слишком большим.

Отслеживать
ответ дан 15 дек 2016 в 13:03
Pyramidhead Pyramidhead
2,178 13 13 серебряных знаков 17 17 бронзовых знаков

html
css

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Курсы javascript

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

09.01.2011, 19:56
Регистрация: 04.04.2008
Сообщений: 6,245

повесить обработчик события на соответствующее событие кнопки
в нем менять ответственные за размер CSS(хотя для размера, можно и только свойства-атрибуты поменять) у необходимой нам кнопки

09.01.2011, 19:56
Регистрация: 25.05.2010
Сообщений: 511
Последний раз редактировалось Vulkan, 09.01.2011 в 19:59 .
09.01.2011, 20:02
Новичок на форуме
Регистрация: 09.01.2011
Сообщений: 3
спасибо)) только вот у меня еще задача, что бы она при повторном нажатии уменьшалась обратно))
09.01.2011, 20:07
Регистрация: 04.04.2008
Сообщений: 6,245

Значит вам надо запомнить где-то, изначальные размеры кнопки, и флаг ее состояния.
например в глобальной переменной.
а затем в функции-обработчике события, в зависимости от флага состояния выставлять одно из значений размера
PS это наиболее простой вариант для полного новичка.
он работает, хотя и не является best practice

Установить определенный размер CSS кнопки?

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

Как сделать так, чтобы кнопки имели одинаковую длину и текст по центру? Длину в px.

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

Комментировать
Решения вопроса 1

.button

.button < width: 250px; height: 26px; border: 1px solid #0a3c59; background: #3e779d; background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d)); background: -webkit-linear-gradient(top, #65a9d7, #3e779d); background: -moz-linear-gradient(top, #65a9d7, #3e779d); background: -ms-linear-gradient(top, #65a9d7, #3e779d); background: -o-linear-gradient(top, #65a9d7, #3e779d); background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%); /*padding: 12px 24px;*/ -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; text-shadow: #7ea4bd 0 1px 0; color: #eff1f2; font-size: 17px; font-family: helvetica, serif; text-decoration: none; vertical-align: middle; >

Ответ написан более трёх лет назад
Нравится 2 7 комментариев
Cheezo @Cheezo Автор вопроса

Надо бы скажем чтобы кнопка JavaScript было по размеру (длине) как и кнопка Лекционный материал.

Добавить еще display: block;
Cheezo @Cheezo Автор вопроса
Во, теперь они имеют одинаковый размер, правда текст не по центру.
clip2net.com/s/4WK96U

Попробуйте изменить
display:block;
на
display:inline-block;

И добавить
line-height:26px;

Cheezo @Cheezo Автор вопроса

clip2net.com/s/4WKeug
Так, теперь они выровнялись, спасибо, но нужно чтобы они также были по центру.
Т.е. текст был не слева, а по середине.

text-align: center;
Cheezo @Cheezo Автор вопроса
Как я не догадался.
Всем огромнейшей спасибо, все работает как нужно.
clip2net.com/s/4WKiNP
Ответы на вопрос 1
width: . ; + text-align: center; ? Или в чем подвох здесь?
Ответ написан более трёх лет назад
Cheezo @Cheezo Автор вопроса

Скажу честно, я в CSS еще не очень понимаю.
Просто сейчас длина кнопки настраивается сама, по длине текста в ней.
А надо чтобы я могу сам задать ее размер (скажем 250х26 px) и текст в ней был по центру, вне зависимости от его длины.
Было бы здорово, если бы вы намекнули, куда вписать строчку.

Ваш ответ на вопрос

Войдите, чтобы написать ответ

html

HTML
+1 ещё

Как написать стили для блоков, что прилипают к разным сторонам контейнера?

1 подписчик
9 часов назад
38 просмотров