Меню

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

Правила дизайна хорошей кнопки

Привет дружок-пирожок. Это будет супер-короткая статья, в которой я поведаю тебе несколько основных правил, которые помогут дизайнить адекватные кнопки для веб-сайтов.

Я уже вижу, как ты тянешь свои пальчики к клавиатуре, чтобы написать о том, что ты и сам всё знаешь, а статья бесполезная. Но давай будем честны, большинство дизайнеров до сих пор делают макеты в стиле «Русский Behance» для цветочных магазинов «Елена», и выглядит это крайне ужасно.

Ладно, не сердись, давай повторим банальщину вместе, а новички узнают что-то новое)

1. Горизонтальные отступы

Не стоит делать кнопки слишком узкими или широкими, идеальный отступ для удобного взаимодействия с кнопкой — 32PX с обеих сторон.

2. Вертикальные отступы

Так же кнопка не должна быть слишком высокой или плоской.
18 PX — то что нужно.

3. Шрифт и его размер

Не стоит использовать слишком большой или маленький размер шрифта, 16pt- самый оптимальный вариант. Так же стоит заметить, что слишком тонкий стиль шрифта может быть плохо читаемым.
Отдельный котел в аду ждёт всех дизайнеров, которые абсолютно во всех кнопках используют кааааапс!
Тебе удобно читать книгу, В которой ВСЁ написано С большой БУКВЫ? Вот и пользователю тоже не очень. Так же, если ты еще не силён в типографике, постарайся не использовать какие-то сложные шрифты с засечками или наклоном. Их трудно сочетать с другими шрифтами, поэтому попробуй что-то простое и распространенное: Roboto, San Francisco или Montserrat.

4. Еще немного правил

Радиус закруглений стоит использовать кратным — 2 px., так тебе будет проще сочетать его с другими закругленными элементами в дизайне.
Избегай градиентов! В большинстве своём они сильно удешевляют дизайн и делают текст в кнопке плохо читаемым. Если ты хочешь добавить объём, то стоит заменить градиент тенью.

Заключение

Правила созданы, чтобы их нарушать, поэтому не бойся экспериментировать!
Больше обращай внимание на дизайн продуктов, которыми ты восхищаешься. А главное в этой жизни, не использовать, СУ# *А, КАПС В кнопках!

Больше интересных статей и материалов в моём Telegram-канале
Можешь скачать мой Figma-исходник и поиграть с простыми примерами.
Обнял, приподнял!

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

1. Ссылка и кнопка это разные вещи. Кнопка запускает какой-то процесс, ссылка перенаправляет пользователя куда-либо.

2. Отступы должны учитывать высоту строки текста кнопки. Допустим, в вашем дизайне высота строки равна 16 пикселям при размере шрифта в 16 пикселей. Дизайнеры частенько так рисуют. Хотя правильно будет наследовать кнопке высоту строки всего документа. Например, 24 пикселя. Этот момент довольно интересный, потому что в кнопке может быть иконка, например. Надо учитывать и ее размеры. Допустим, если есть иконка, а текста нет, то отступы будут отталкивать от краев иконки.

3. Обводку у кнопок рисовать следует снаружи, а не внутри тела. Как пример: у условного бутстрапа кнопка имеет высоту в 38 пикселей, но браузер складывает и обводку, поэтому получается 40. Это же касается и других элементов формы. Это обусловлено тем как браузеры рендерят кнопку, элементы формы и тд. И верстать желательно тоже так, если не хотите, чтобы ссылка-кнопка и кнопка отличались по высоте на два пикселя. Может не касаться мобильных приложений, но в вебе так.

4. Кнопку надо рисовать с учетом дизайна форм, а не просто от балды. Почему? Ну, во-первых, это элемент формы. А во-вторых, в один прекрасный день у вас появится линейная форма (например, горизонтальный поиск или фильтр). Просто поставьте рядом поле ввода и кнопку. Тогда станет видно, что отступы по бокам не так уж важно делать большими.

5. Дефолтной мастер-кнопке в дизайне лучше назначить равный отступ по высоте и ширине. Почему? Ну, в один прекрасный день вы захотите квадратную кнопку с иконкой. А для кнопки с отступами побольше сделайте дочерний компонент.

Источник

HTML тег кнопка

HTML тег используется для размещения кнопки. Внутри тега вы можете разместить как отформатированный текст, так и изображение. Это основная разница между этим элементом и кнопками, созданными с использованием тега (c атрибутом type = «button» ).

Атрибут type тега задает тип, используемой кнопки:

Значение Описание
button Обычная кликабельная кнопка, которая не имеет поведения по умолчанию. Может использоваться совместно с клиентскими скриптами.
reset Кнопка, которая сбрасывает все значения элементов управления формы к их первоначальным значениям.
submit Кнопка, которая служит для отправки данных формы на сервер. Это значение по умолчанию, если атрибут не указан, или если атрибут динамически меняется в пустое или недопустимое значение.

Всегда указывайте для тега тип атрибута type = «button» если элемент используется в качестве обычной кнопки. Если вы используете тег внутри HTML формы, то вы можете столкнуться с тем, что старые версии браузеров могут представить различные значения при отправке формы. Рекомендуется в этом случае использовать элемент для отправки HTML форм.

Читайте также:  Как установить скайп на компьютере пошагово видео

Давайте рассмотрим пример использования:

В данном примере мы разместили 3 кнопки, которым задали уникальные имена атрибутом name и с использованием внутренних CSS стилей указали ширину (width) размером 80 пикселей и высоту (height) размером 50 пикселей:

Результат нашего примера:

(кнопкa в HTML).»> Рис. 41 Пример использования тега (кнопкa в HTML).

Отключение кнопки

Атрибут disabled (HTML тега ) является логическим атрибутом и указывает, что кнопка должна быть отключена (недоступна для взаимодействия с пользователем). Атрибут используется совместно со скриптами, например, пока какое-то условие не выполнено элемент неактивен.

В данном примере мы указали для второго элемента с типом кнопка ( type = «button» ) атрибут disabled, который отключает элемент и не дает нам кликнуть по кнопке.

Рис. 41а Пример отключения кнопки (предварительное отключение элемента).

Автофокус на кнопке

В HTML 5 был добавлен такой логический атрибут как autofocus (HTML тега ) указывает, что кнопка должна автоматически получить фокус при загрузке страницы.

Обращаю Ваше внимание, что только один элемент в документе может иметь атрибут autofocus (браузер даст фокус тому элементу, который ближе расположен к началу документа, остальные просто будут игнорированы).

Давайте рассмотрим пример использования:

В данном примере мы создали две кнопки (HTML тег ), атрибутом name указали им уникальные имена. Для второй кнопки атрибутом autofocus задали, что при загрузке страницы она получит фокус (браузеры, как правило, подсвечивают этот элемент).

Результат нашего примера:

Рис. 41б Пример использования атрибута autofocus (фокус на кнопке).

Браузер Internet Explorer поддерживает атрибут autofocus только с десятой версии.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Для выполнения задания Вам потребуются знания из статьи «HTML Цвета». Если вы пропустили её, то вернитесь для её изучения.

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

Источник

Стилизация старого доброго элемента button

Кнопка — это один из тех элементов, которые чаще всего используются на веб-страницах. Тег может быть применён для запуска некоего процесса вроде вывода данных, открытия модального окна, отправки формы и так далее. В материале, перевод которого мы публикуем, речь пойдёт о тонкостях стилизации элемента button и о том, как оформлять кнопки с учётом того, чтобы они хорошо работали бы в любых браузерах. Кроме того, тут будет рассмотрено большинство часто используемых стилей кнопок. Поговорим мы здесь и о некоторых сложностях, которые возникают при работе с кнопками.

Стили, применяемые к кнопкам по умолчанию

Может, разговор о «стандартных стилях» покажется кому-то обсуждением каких-то элементарных вещей, но, на самом деле, поговорить об этом довольно интересно. Вот стандартная таблица стилей для кнопок из пользовательского агента Google Chrome.

А вот как выглядит стандартная кнопка, при выводе которой стили по умолчанию не менялись.

Простая кнопка, к которой применены стандартные стили

Свойство appearance этих кнопок установлено в none

Кнопка после сброса свойств

Теперь, когда мы сбросили стандартные стили кнопки, пришло время двигаться дальше. А именно, я хочу рассказать о том, как стилизовать кнопки, основываясь требованиях, предъявляемых к их дизайну.

Стилизация обычных кнопок

Начнём с базового примера, поговорив о стилизации обычных кнопок, на которых выводится лишь текст. На следующем рисунке представлена «анатомия» обычной кнопки.

Цвет текста (Text Color), размер шрифта (Font Size), фон (Background), скругление углов (Roundness), внутренний отступ (Padding)

Имея вышеприведённый CSS-код, мы можем получить кнопку, похожую на ту, которая показана на предыдущем рисунке. После того, как базовый стиль кнопки задан, нужно позаботиться о внешнем виде кнопки в различных состояниях.

Обычное состояние кнопки (Normal), получение фокуса (Focus), наведение на кнопку указателя мыши (Hover), отключение кнопки (Disabled)

▍Стили, применяемые к кнопкам при наведении на них мыши и при получении ими фокуса

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

Этот материал указывает на то, что важен порядок добавления стилей, применяемых к кнопке при наведении на неё мыши ( hover ) и при получении ей фокуса ( focus ).

Хорошо, если сначала идёт стиль hover, а потом — стиль focus

Вот как выглядит правильный порядок описания стилей:

▍Минимальная ширина кнопки

Для того чтобы кнопка хорошо выглядела, она должна иметь определённую ширину. Важно заранее об этом подумать и принять во внимание длинные и короткие надписи, которые могут содержаться на кнопках. Благодаря свойству min-width можно установить минимальную ширину кнопки. Вот моя статья, где в подробностях обсуждается это и другие подобные свойства.

Читайте также:  Theta 31 pwm как правильно установить

Стоит задавать свойство кнопок min-width

▍Внутренние отступы

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

Взглянем на следующий рисунок.

Рекомендовано назначать кнопкам внутренние отступы

▍Семейство шрифта, используемого для надписей, расположенных на кнопках

▍Стилизация отключённых кнопок

Для того чтобы указать пользователю на то, что кнопка отключена, к ней можно добавить атрибут disabled и стилизовать кнопку средствами CSS.

Вот HTML-код, описывающий отключённую кнопку:

Вот CSS-код стилизации такой кнопки:

Когда кнопка отключена, она не может получить фокус с клавиатуры и удаляется из дерева доступности элементов страницы.

▍Внешний вид указателя мыши при наведении его на кнопку

Стандартный указатель мыши, наведённый на кнопку, выглядит как стрелка. Мне нравится этот ответ на StackOverflow: «Кнопки — это традиционный элемент управления настольных программ. Это — среда, в которой указатель в виде руки никогда не использовался до наступления эры интернета. Когда на веб-страницах стали применять тот же самый элемент управления, разработчики просто пытались сделать так, чтобы кнопки выглядели так же, как в настольных приложениях».

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

Стандартный курсор-стрелка и улучшенный курсор в виде руки.

Теперь, когда мы обсудили базовые вопросы стилизации кнопок, приведём полный CSS-код, включающий в себя всё то, чего мы коснулись выше:

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

Кнопки со значком

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

Примеры кнопок со значками

Обратите внимание на то, что я воспользовался стилем vertical-align: middle для того чтобы выровнять значок и содержимое кнопки по вертикали.

Вот HTML-код кнопки, о которой идёт речь:

Может показаться, что теперь достаточно просто скрыть элемент span и дело будет сделано:

Хотя при таком подходе текст пропадает, а значок остаётся, это очень плохо в плане доступности контента. Кнопку уже «не видят» инструменты для чтения с экрана. Например, VoiceOver в macOS сообщает о том, что такая кнопка — это просто «Button», без каких-либо подробностей о ней. У этой проблемы есть несколько решений.

▍Использование SVG-значков

▍Настройка размеров кнопки со значком

Кнопка, у которой задано CSS-свойство min-width, и кнопка, у которой это свойство не задано

▍Визуальное скрытие текста

▍Установка размера шрифта в 0

▍Использование атрибута aria-label

Если вы хотите больше узнать о кнопках со значками — взгляните на этот материал.

Кнопки, содержащие несколько строк текста

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

Кнопка, содержащая две строки текста

Тут показана кнопка для формы подписки, содержащая основной и вспомогательный текст. Как сделать такую кнопку и при этом не забыть о её доступности для людей с ограниченными возможностями? Вот соответствующий HTML-код:

Средство для чтения с экрана «озвучит» эту кнопку как «Subscribe to our newsletter 240K+ subscribers». Когда пользователь это услышит, это его может запутать, так как ничто не будет разделять две строки текста, выводимые на кнопке. Взгляните на скриншот инструмента Chrome для исследования доступности элементов.

Исследование доступности элементов в Chrome

Для того чтобы не путать пользователей, я предпочёл бы скрыть вторую строку текста от средств для чтения с экрана. Сделать это можно, использовав атрибут aria-hidden в соответствующем элементе :

Если по какой-то причине изменить HTML-разметку нельзя, есть и другой способ добавления дополнительного текста на кнопку. Решение этой проблемы, которое показалось мне интересным, я нашёл на сайте Smashing Magazine. Оно заключается в том, чтобы размещать содержимое, пользуясь псевдоэлементами. При таком подходе средства для чтения с экрана не будут видеть ничего лишнего. Вот CSS-код этого решения:

Ссылки () или кнопки ( )?

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

▍Ссылки

▍Кнопки

Использование ссылок и кнопок

▍Элемент не обязан выглядеть как кнопка

Мне нравится этот пример, в котором, с учётом требований доступности контента, реализована панель-«аккордеон». Вначале, если представить, что JavaScript недоступен, результат рендеринга разметки выглядит так, как показано ниже.

Материалы страницы в условиях недоступности JavaScript

Вот HTML-код фрагмента такой разметки:

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

Материалы страницы в условиях, когда JavaScript-функциональность доступна

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

Читайте также:  Как установить ssh на ios

▍Кнопка загрузки

Ссылка для загрузки документа, оформленная как кнопка

Вот код этой ссылки:

При таком подходе в нашем распоряжении оказывается ссылка, стилизованная как кнопка, которая делает своё дело, используя лишь семантические структуры HTML.

Кнопки с обводкой

Обычная кнопка при наведении на неё мыши становится кнопкой с обводкой

Благодаря такому подходу в нашем распоряжении оказывается кнопка, вокруг которой, при наведении на неё мыши, выводятся её границы. При этом фон кнопки становится прозрачным.

Градиентные кнопки

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

Мне было нужно нечто, подобное следующему рисунку.

Градиентная кнопка и её вариант с обводкой

Тут представлены два варианта кнопки — градиентная кнопка и кнопка с обводкой. Для того чтобы добиться такого внешнего вида кнопки, мне нужно было, чтобы у базовой (градиентной) кнопки имелась бы прозрачная граница. Эта граница будет показана только для кнопки с обводкой.

Тут всё, вроде бы, выглядит разумно, но в ходе работы я столкнулся со странной проблемой. Я даже попытался решить её, попросив помощи у пользователей Twitter. Эта проблема представлена на следующем рисунке.

Обычная кнопка, кнопка с градиентом (граница, на самом деле, прозрачная; цветом она выведена лишь для наглядности), кнопка со странными краями

Теперь, когда мы разобрались с тем, как выглядит градиентная кнопка с прозрачной границей, позвольте мне рассказать о причинах вышеописанных странностей.

Я попробовал добавить к кнопке широкую границу для того чтобы понаблюдать за тем, что из этого получится. Обратите внимание на то, как повторяется градиент, и на то, что его размер соответствует свойству padding кнопки.

Кнопка с широкими границами и градиент

Вот, если хотите поэкспериментировать, пример на CodePen.

Что лучше — height или padding?

▍Фиксированная высота

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

При таком подходе текст не выравнивается по центру. Выглядит всё это так, как показано ниже.

Кнопка, текст которой не выровнен по центру

Но у этого метода есть минусы:

▍Вертикальный внутренний отступ

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

Попытка центровки текста кнопки

Вот CSS-код стилизации этой кнопки:

В этом случае содержимое кнопки выглядит слегка смещённым. Значение верхнего внутреннего отступа нужно немного уменьшить:

Оборачивание содержимого кнопки в тег

В ходе экспериментов я выяснил, что центровка текста кнопок Adobe немного сбита. Вот как это выглядит.

Центровка немного сбита

Я исследовал эти кнопки и заметил интересный паттерн. Содержимое обёрнуто в элемент с указанием фиксированной высоты для кнопки.

Изменение высоты кнопки и автоматическое центрирование её содержимого

Вот и всё. Хочу отметить, что при написании данного раздела мне помогла эта статья.

Кнопки внутри flexbox- или grid-контейнеров

Тут у вас может появиться вопрос о том, какое отношение кнопки имеют к flex- и grid-макетам. Позвольте мне прояснить этот вопрос.

Я работал над разделом одного проекта. Мне нужно было вертикально центрировать его содержимое. Поэтому я использовал flex-макет:

То, что у меня получилось, меня несколько удивило.

Результат использования flex-макета

По умолчанию каждый flex-элемент растягивается в пределах ширины родительского элемента. Именно это и произошло с кнопкой, представленной на предыдущем рисунке. Для того чтобы избежать этой неприятности, нужно настроить свойство align-self :

Вот как кнопка будет выглядеть после этого.

Кнопка выглядит гораздо лучше

Кнопка, растянутая по высоте

Задавая выравнивание кнопки относительно центра контейнера, мы решаем проблему. Вот как теперь будет выглядеть тот же пример.

Решение проблемы растянутой кнопки

Использование единиц измерения em

Единицу измерения em можно использовать для правильной настройки размеров кнопок. Эта единица измерения в такой ситуации весьма полезна. Единица измерения em равна font-size элемента ( px или rem ). Взглянем на следующий пример:

Кнопки разных размеров

А вот фрагменты CSS-кода, в котором используется единица измерения em :

Для кнопок разного типа нужно создать классы, в которых задаётся разный размер шрифта:

→ Вот пример использования подобных кнопок на CodePen

→ Вот моя статья на эту тему. Рекомендую с ней ознакомиться

Анимация и переходы

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

Итоги

Мне было очень приятно работать над этим материалом. Его написание заняло у меня больше года. Я счастлив от того, что он, наконец, опубликован. Надеюсь, вы нашли здесь что-то такое, что вам пригодится.

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

Источник