Стиль кнопки html: Делаем стильные кнопки | htmlbook.ru

Кнопки · Bootstrap на русском

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

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

Содержание

• Содержание
• Примеры
• Кнопка теги
• Контур кнопки
• Размеры
• Активное состояние
• Неактивное состояние
• Плагин кнопки
  • Тумблер состояния
  • Флажки и радиокнопки
  • Методы

Примеры

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

<!-- Обеспечивает дополнительный визуальный вес и определяет основное действие в кнопки -->
<button type="button">Primary</button>
<!-- Вторичное, кнопка контур -->
<button type="button">Secondary</button>
<!-- Указывает на успешное или позитивное действие -->
<button type="button">Success</button>
<!-- Контекстную кнопку на информационные сообщения -->
<button type="button">Info</button>
<!-- Указывает, следует проявлять осторожность с этим действием -->
<button type="button">Warning</button>
<!-- Указывает на опасное или потенциально негативное действие -->
<button type="button">Danger</button>
<!-- Кнопки соединяются, делая его похожим на ссылку сохраняя поведение кнопки -->
<button type="button">Link</button>

Передать смысл для ассистивных технологий

Используя цвет, чтобы добавить смысл только обеспечивает визуальную индикацию, которая не будет доведена до пользователей ассистивных технологий, таких как экранные дикторы. Убедитесь, что информация обозначается цвет либо очевидно из самого содержимого (например, текст), или включен с помощью альтернативных средств, таких как дополнительный текст, скрытый с .sr-only класс.

Кнопка теги

В .btn классы предназначены для использования с <button> элемент. Однако, вы также можете использовать эти классы на

При нажатии кнопки-классы на <a> элементов, которые используются для запуска в разделе функции (например, сворачивание содержимого), а не ссылок на новые страницы или разделы в рамках текущей страницы, эти ссылки следует давать role="button", чтобы правильно донести свои цели для вспомогательных технологий, таких как программы чтения с экрана.

Link

<a href="#" role="button">Link</a>
<button type="submit">Button</button>
<input type="button" value="Input">
<input type="submit" value="Submit">
<input type="reset" value="Reset">

Контурные кнопки

Нужна кнопка, но не дюже цвета фона они приносят? Заменить по умолчанию модификатор классов с . btn-outline-*, чтобы удалить все фоновые изображения и цвета на любую кнопку.

<button type="button">Primary</button>
<button type="button">Secondary</button>
<button type="button">Success</button>
<button type="button">Info</button>
<button type="button">Warning</button>
<button type="button">Danger</button>

Размеры

Необычные большие или меньшие кнопки? Добавить .btn-lg или .btn-sm дополнительные размеры.

<button type="button">Large button</button>
<button type="button">Large button</button>

<button type="button">Small button</button>
<button type="button">Small button</button>

Создать кнопки—те на уровне блоков, которые охватывают всю ширину родителя—путем добавления .btn-block.

<button type="button">Block level button</button>
<button type="button">Block level button</button>

Кнопок будет нажата (на темном фоне, темные границы, и вставка тень) когда активный. Там нет необходимости, чтобы добавить класс в <button>, так как они используют псевдо-класса. Тем не менее, вы все равно можете заставить же активное появление с .active (и включают в себя aria-pressed="true" атрибут) если Вам необходимо скопировать состояние программно.

Primary link Link

<a href="#" role="button" aria-pressed="true">Primary link</a>
<a href="#" role="button" aria-pressed="true">Link</a>

Сделайте кнопки которые выглядят не активно, добавив disabled логический атрибут к любому <button> элементу.

Внимание! IE9 и ниже отрисовка кнопок отключен с серым, тени текста, который мы не можем обойти.

<button type="button" disabled>Primary button</button>
<button type="button" disabled>Button</button>

Кнопки отключить с помощью <a> элемент вести себя немного по-другому:

• <a> не поддерживают disabled атрибут, так что вы должны добавить . disabled класса, чтобы сделать его визуально отключены.
• Некоторые будущие чистые стили, чтобы отключить все pointer-events на кнопки якорь. В браузерах, которые поддерживают это свойство, Вы не увидите курсор отключен вообще.
• Кнопок отключен должен содержать aria-disabled="true" атрибут указать состояние элемента для вспомогательных технологий.

Primary link Link

<a href="#" role="button" aria-disabled="true">Primary link</a>
<a href="#" role="button" aria-disabled="true">Link</a>

Ссылка функционального пояснения

.disabled класса pointer-events: none попробовать отключить функциональность ссылке из <a>, но что CSS собственность еще не стандартизировано. Кроме того, даже в браузерах, которые поддерживают pointer-events: none, навигация с помощью клавиатуры остается в силе, это означает, что зрячие пользователи клавиатуры и пользователи технологий будут по-прежнему сможете активировать эти ссылки.

Плагин кнопки

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

Тумблер состояния

Добавить data-toggle="button" для включения кнопки active состояние. Если вы заранее переключить кнопку, Вы должны вручную добавить .active класс и aria-pressed="true"

<button type="button" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

Флажки и радиокнопки

Bootstrap .button стили могут быть применены и другие элементы, такие как <label>, чтобы обеспечить флажок или радио стиль кнопки переключения. Добавить data-toggle="buttons" на .btn-group, содержащая измененные кнопки для включения переключения в соответствующих стилях.

Проверенные состояние этих кнопок

Обратите внимание, что предварительно проверил кнопки необходимо вручную добавить .active класс к входа <label>.

Checkbox 1 (pre-checked) Checkbox 2 Checkbox 3

<div data-toggle="buttons">
  <label>
    <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
  </label>
  <label>
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label>
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

Radio 1 (preselected) Radio 2 Radio 3

<div data-toggle="buttons">
  <label>
    <input type="radio" name="options" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label>
    <input type="radio" name="options" autocomplete="off"> Radio 2
  </label>
  <label>
    <input type="radio" name="options" autocomplete="off"> Radio 3
  </label>
</div>

Методы

Способ	Описание
$(). button('toggle')	Переключение нажимаем состояние. Дает кнопка видимость того, что он был активирован.

Как сделать ссылку кнопку или кнопку ссылку на HTML? По 3 способа! —

Доброго времени суток! Каждый веб мастер задавался вопросом как же сделать кнопку по клику на которую человек сразу перейдет по нужному адресу. Простая ссылка «a href=»адрес»>Ссылка» выглядит не красиво, и не всегда подходит по дизайну вашего сайта. Так же иногда возникает необходимость сделать обратное. Из обычной кнопки, сделать аналог ссылки, по клику на которой будет происходить переход по нужному адресу.

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

Как сделать ссылку кнопкой

Первый способ

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

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

<link rel="stylesheet" href="link_button.css">
<a href="https://you-hands.ru">Ваша ссылка</a>

А вот и они, виновники нашей победы над текстовой ссылкой, стили. Они преобразуют ее в кнопку.

a{
	padding: 10px 10px;/* отступы от текста до краев */
	text-decoration: none;/* убираем декорирование */
	-moz-appearance: button; /* преобразование для Firefox */
	-webkit-appearance: button; /* преобразование для Chromium */	
}

Таким способом мы заменили все ссылки на странице на кнопки.

Второй способ

Этот способ достаточно банален и прост. Скорее всего именно так вы и хотели сделать такую кнопку изначально. Просто оберните картинку кнопки тегом ««!

<a href="you-hands.ru"><img src="button.png"></a>

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

Третий способ

Этот способ практический такой же как и первый, за исключением того, что в первом методе мы использовали стили кнопок «по умолчанию«, сейчас же мы нарисуем свою кнопку «с блэк джеком и контуром!«.

<link rel="stylesheet" href="link_button_3.css">
<a href="https://you-hands.ru">Ваша ссылка</a>

.ssilka{
	border:1px solid #ccc; /*рамка*/
	background:#eaeaea; /*фон*/
	padding: 10px 10px; /*отступы внутри*/
	text-decoration: none; /*убрать подчеркивание ссылки*/
}

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

Как сделать кнопку ссылкой

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

Первый способ

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

<form action="https://you-hands.ru" method="GET">
	<button type="submit" >Кнопка как ссылка</button>
</form>

Второй способ

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

<script type="text/javascript">
	function GoUrl(url){
		location.href=url;
	}
</script>

Что-бы воспользоваться функцией нужно лишь прописать свойство onClick для любой кнопки.

<button type="submit">Кнопка как ссылка 2</button>

Третий способ

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

<button type="submit">Кнопка как ссылка 3</button>

Итоги

Как и всегда, несколько способов делают почти одно и тоже. Каким будите пользоваться именно вы, решать вам. Если остались какие-то вопросы, можно задать их в комментариях на сайте. Удачи!

4.04/5 (13)

Оцените

Рейтинг

Как создать кнопку с закругленными углами с помощью CSS

• Главная
• Фрагменты кода

css buttoncss button rounded angleshtml button

В CSS3 вы можете придать элементам закругленные углы с помощью свойства border-radius. Давайте посмотрим на пример этого.

Предположим, у вас есть следующая разметка.

 <дел>
 

Чтобы сделать div видимым, мы установим его ширину и высоту, а также зададим красный цвет фона.

 .red_div {
  цвет фона: красный;
  ширина: 200 пикселей;
  высота: 100 пикселей;
}
 

Ниже приведен результат вышеописанного.

Чтобы сделать границы блока закругленными, вы можете добавить следующий стиль:

 радиус границы: 15 пикселей;
 

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

Ниже вы можете увидеть результат вышеуказанной разметки.

Свойство border-radius можно записать несколькими способами.

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

 радиус границы: 15px 15px;
 

При двух значениях первое будет применено к верхнему левому и нижнему правому углам, а второе — к верхнему правому и нижнему левому углам

 радиус границы: 15px 15px 15px;
 

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

 радиус границы: 15px 15px 15px 15px;
 

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

 граница-верхний-левый-радиус: 15px;
граница-верхний-правый-радиус: 15px;
граница-нижний-правый-радиус: 15px;
граница-нижний-левый-радиус: 15px;
 

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

 радиус границы: 5px 25px;
 

Добавление закругленных углов к кнопкам

border-radius можно использовать и для других элементов. Ниже мы видим, что он используется для добавления закругленных углов к кнопке.

 Кнопка
 

 кнопка {
  ширина: 200 пикселей;
  высота: 100 пикселей;
  радиус границы: 20px;
}
 

Кнопка будет выглядеть так:

Вот еще несколько примеров полных кнопок

Категории

• Действие формы
• Контактные формы
• Фрагменты кода
• HTML-формы
• Передовой опыт
• HTML5-формы
• Виджеты форм
• PHP-форма Обработка
• Обработка форм jQuery
• Электронные формы
• Почтовые формы
• Веб-формы
• Формы расчета
• Флажки
• Загрузка файла
• Формы Google

Руководство по стилю A11Y

• A 9Тег 0035 не требует ничего особенного для работы. Используйте , когда это возможно, но можно использовать и другие элементы, если вы добавите role="button" и добавите JavaScript для воспроизведения функциональности кнопки.
• Так же, как и ссылки, вы можете добавить class="visuallyhidden" описательный текст, чтобы дать больше контекста назначению кнопки.
• Если кнопка содержит элемент , обязательно установите его атрибут alt . Если он содержит значок, используйте aria-label для описания значка.
• Вы можете использовать для создания графической кнопки. Он принимает атрибуты src и alt , как и традиционные изображения.
• Важны состояния кнопок, а не только их стиль! Если вы переключаете классы только для визуального управления состоянием ваших компонентов, вы, вероятно, не передаете это состояние пользователям вспомогательных технологий должным образом.

Ресурсы

• Создание доступных кнопок с помощью ARIA
• Состояние взаимодействия с пользователем
• Использование роли кнопки
• Примеры кнопок W3C

Рекомендации WCAG 2.1

1.1.1 Не- текстовое содержимое — все нетекстовое содержимое, которое представлено у пользователя есть текстовая альтернатива, которая служит эквивалентной цели (некоторые исключения). (Уровень A)

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

Типы кнопок

 <раздел>
   
Типы кнопок
 
  Кнопка
  Пример разметки кнопки
  Нравится
  Пример разметки кнопки «Нравится»
  A11Yвсе вещи. A11y пример разметки кнопки
  


   
Состояния кнопок
 
  По умолчанию
  Наведение
  Фокус/активно
  Отключено