ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

W3.CSS Учебник

W3.CSS Учебник W3.CSS Введение W3.CSS Цвета W3.CSS Контейнеры W3.CSS Панели W3.CSS Границы W3.CSS Открытки W3.CSS Шрифты W3.CSS Текст W3.CSS Округлости W3.CSS Внутренние отступы W3.CSS Внешние отступы W3.CSS Отображение W3.CSS Кнопки W3.CSS Примечания W3.CSS Цитаты W3.CSS Оповещения W3.CSS Таблицы W3.CSS Списки W3.CSS Изображения W3.CSS Вводы W3.CSS Значки W3.CSS Ярлыки W3.CSS Иконки W3.CSS Адаптив W3.CSS Макеты W3.CSS Анимация W3.CSS Эффекты W3.CSS Панели W3.CSS Выпадающие W3.CSS Аккордионы W3.CSS Навигация W3.CSS Сайдбар W3.CSS Вкладки W3.CSS Пагинация W3.CSS Прогресс-бары W3.CSS Слайдшоу W3.CSS Модальные окна W3.CSS Всплывающие подсказки W3.CSS Сетка W3.CSS Код W3.CSS Фильтры W3.CSS Тренды W3.CSS Кейс W3.CSS Material-дизайн W3.CSS Валидация W3.CSS Версии W3.CSS Мобильность

W3.CSS Цвета

W3.CSS Классы цветов W3.CSS Цвет Material W3.CSS Цвет Flat UI W3.CSS Цвет Metro UI W3.CSS Цвет Win8 W3.CSS Цвет iOS W3.CSS Библиотеки цветов W3.CSS Цветовые схемы W3.CSS Цветовые темы W3.CSS Генератор цветов

Примеры

W3.CSS Примеры W3.CSS Демо W3.CSS Шаблоны

Справочники

W3.CSS Справочник W3.CSS Загрузки

W3.CSS Уроки для начинающих

W3.CSS Кнопки


+ + +

W3.CSS Классы кнопки

W3.CSS предоставляет следующие классы для кнопок:

Класс Определяет
w3-btn Прямоугольная кнопка с эффектом тени при наведении.
Цвет по умолчанию черный.
w3-button Прямоугольная кнопка с серым эффектом наведения.
Цвет по умолчанию светло-серый в W3.CSS версии 3.
Цвет по умолчанию наследуется от родительского элемента в версии 4.
w3-bar Горизонтальная полоса, которая может использоваться для группировки кнопок.
(Идеально подходит для горизонтальных меню навигации)
w3-block Класс, который можно использовать для определения кнопки на всю ширину (100%).
w3-circle Может использоваться для определения круглой кнопки.
w3-ripple Может быть использован для создания эффекта ряби.

Кнопки

И класс w3-button, и класс w3-btn добавляют поведение кнопки к любым элементам HTML.

Наиболее распространенные элементы для использования <input type="button">, <button> и <a>:

Пример

<input class="w3-button w3-black" type="button" value="Input Button">
<button class="w3-button w3-black">Button Button</button>
<a href="https://www.w3schools.com" class="w3-button w3-black">Link Button</a>

<input class="w3-btn w3-black" type="button" value="Input Button">
<button class="w3-btn w3-black">Button Button</button>
<a href="https://www.w3schools.com" class="w3-btn w3-black">Link Button</a>

Попробуйте сами »


Цвета кнопок

Все классы w3-color используются для добавления цвета к кнопкам:

Пример

<button class="w3-button w3-black">Black</button>
<button class="w3-button w3-khaki">Khaki</button>
<button class="w3-button w3-yellow">Yellow</button>
<button class="w3-button w3-red">Red</button>
<button class="w3-button w3-purple">Purple</button>

Попробуйте сами »


Цвета при наведении

Эффекты наведения также бывают разных цветов. Вот некоторые:

Классы w3-hover-color используются для добавления цвета при наведении на кнопки:

Пример

<button class="w3-button w3-hover-black">Black</button>
<button class="w3-button w3-hover-red">Red</button>
<button class="w3-button w3-hover-purple">Purple</button>

Попробуйте сами »


Формы кнопок

Классы w3-round-size используются для добавления округленных границ к кнопкам:

Пример

<button class="w3-button w3-round">Round</button>
<button class="w3-button w3-round-large">Rounder</button>
<button class="w3-button w3-round-xlarge">and Rounder</button>
<button class="w3-button w3-round-xxlarge">and Rounder</button>

<button class="w3-btn w3-round">Round</button>
<button class="w3-btn w3-round-large">Rounder</button>
<button class="w3-btn w3-round-xlarge">and Rounder</button>
<button class="w3-btn w3-round-xxlarge">and Rounder</button>
Попробуйте сами »

Размеры кнопок

Классы w3-size могут быть использованы для определения различных размеров текста:

Пример

<button class="w3-button w3-tiny">Tiny</button>
<button class="w3-button w3-small">Small</button>
<button class="w3-button w3-medium">Medium</button>
<button class="w3-button w3-large">Large</button>
<button class="w3-button w3-xlarge">xLarge</button>
<button class="w3-button w3-xxlarge">XXLarge</button>
<button class="w3-button w3-xxxlarge">XXXLarge</button>
<button class="w3-button w3-jumbo">Jumbo</button>

Попробуйте сами »


Границы кнопок

Класс w3-border можно использовать для добавления границ к кнопкам.

Классы w3-border-color используются для определения цвета границы:

Пример

<button class="w3-button w3-white w3-border">Button</button>
<button class="w3-button w3-white w3-border w3-border-blue">Button</button>
<button class="w3-button w3-yellow w3-border">Button</button>
<button class="w3-button w3-white w3-border w3-border-red w3-round-large">Button</button>

Попробуйте сами »

Совет: Добавьте класс w3-round-размер чтобы добавить скругленные границы.


Кнопки с различными текстовыми эффектами

Кнопки могут использовать эффект более широкого текста:

Класс w3-wide добавляет более широкий текстовый эффект:

Пример

<button class="w3-button">Normal</button>
<button class="w3-button w3-wide">Wide</button>

Попробуйте сами »

Кнопки могут иметь курсивный и жирный текст:

Используйте стандартные HTML теги (<i> и <b>), чтобы добавить курсивный или полужирный эффект к тексту кнопки:

Пример

<button class="w3-button"><i>Курсивный</i></button>
<button class="w3-button"><b>Жирный</b></button>

Попробуйте сами »


Кнопки с отступом (padding)

Классы w3-padding-размер используются для добавления дополнительного отступа вокруг текста кнопки:

Пример

<button class="w3-button w3-padding-small">Кнопка</button>
<button class="w3-button">Кнопка</button>
<button class="w3-button w3-padding-large">Кнопка</button>

<button class="w3-btn w3-padding-small">Кнопка</button>
<button class="w3-btn">Кнопка</button>
<button class="w3-btn w3-padding-large">Кнопка</button>

Попробуйте сами »


Кнопки полной ширины

Чтобы создать кнопку полной ширины, добавьте в неё класс w3-block.

Кнопки полной ширины имеют ширину 100% и охватывают всю ширину родительского элемента:

Пример

<button class="w3-button w3-block">Кнопка</button>
<button class="w3-button w3-block w3-teal">Кнопка</button>
<button class="w3-button w3-block w3-red w3-left-align">Кнопка</button>

<button class="w3-btn w3-block">Кнопка</button>
<button class="w3-btn w3-block w3-teal">Кнопка</button>
<button class="w3-btn w3-block w3-red w3-left-align">Кнопка</button>

Попробуйте сами »

Совет: Выровняйте текст кнопки с помощью класса w3-left-align или w3-right-align.

Размер блока может быть определен с помощью style="width:".

Пример

<button class="w3-button w3-block w3-black" style="width:30%">Button</button>
<button class="w3-button w3-block w3-teal" style="width:50%">Button</button>
<button class="w3-button w3-block w3-red" style="width:80%">Button</button>

Попробуйте сами »


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

Кнопки выделяются эффектом тени, и стрелочка курсора превращается в руку при наведении на них курсора.

Отключенные кнопки непрозрачны (полупрозрачны) и отображают знак "no parking sign" ("парковка запрещена"):

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

Пример

<a class="w3-button w3-disabled" href="https://www.w3schools.com">Кнопка-ссылка</a>
<button class="w3-button" disabled>Кнопка</button>
<input type="button" class="w3-button" value="Button" disabled>

<a class="w3-btn w3-disabled" href="https://www.w3schools.com">Кнопка-ссылка</a>
<button class="w3-btn" disabled>Кнопка</button>
<input type="button" class="w3-btn" value="Button" disabled>

Попробуйте сами »


Кнопки-панели (бары)

Кнопки можно сгруппировать в горизонтальной полосе с помощью класса w3-bar:

Пример

<div class="w3-bar">
  <button class="w3-button w3-black">Кнопка</button>
  <button class="w3-button w3-teal">Кнопка</button>
  <button class="w3-button w3-red">Кнопка</button>
</div>

Попробуйте сами »

Класс w3-bar появился в W3.CSS версии 2.93 / 2.94.

Кнопки могут быть сгруппированы без пробелов между ними с помощью класса w3-bar-item:

Пример

<div class="w3-bar">
  <button class="w3-bar-item w3-button w3-black">Кнопка</button>
  <button class="w3-bar-item w3-button w3-teal">Кнопка</button>
  <button class="w3-bar-item w3-button w3-red">Кнопка</button>
</div>

Попробуйте сами »

Панели кнопок можно центрировать с помощью класса w3-center:

Пример

<div class="w3-center">
<div class="w3-bar">
  <button class="w3-button w3-black">Кнопка</button>
  <button class="w3-button w3-teal">Кнопка</button>
  <button class="w3-button w3-disabled">Кнопка</button>
</div>
</div>

Попробуйте сами »

Чтобы показать две (или более) панели кнопок в одной строке, добавьте класс w3-show-inline-block:

Пример

<div class="w3-show-inline-block">
<div class="w3-bar">
  <button class="w3-btn">Кнопка</button>
  <button class="w3-btn w3-teal">Кнопка</button>
  <button class="w3-btn w3-disabled">Кнопка</button>
</div>
</div>

<div class="w3-show-inline-block">
<div class="w3-bar">
  <button class="w3-btn">Кнопка</button>
  <button class="w3-btn w3-teal">Кнопка</button>
  <button class="w3-btn w3-disabled">Кнопка</button>
</div>
</div>

Попробуйте сами »


Навигационные панели (навбары)

Панели кнопок можно легко использовать в качестве панелей навигации:




Пример

<div class="w3-bar w3-black">
  <button class="w3-bar-item w3-button">Кнопка</button>
  <button class="w3-bar-item w3-button">Кнопка</button>
  <button class="w3-bar-item w3-button">Кнопка</button>
</div>

Попробуйте сами »

Размер каждого элемента можно определить с помощью style="width:":

Пример

<div class="w3-bar">
  <button class="w3-bar-item w3-button" style="width:33.3%">Кнопка</button>
  <button class="w3-bar-item w3-button w3-teal" style="width:33.3%">Кнопка</button>
  <button class="w3-bar-item w3-button w3-red" style="width:33.3%">Кнопка</button>
</div>

Попробуйте сами »

Вы узнаете больше о навигации позже в этом учебнике.


Левая и правая кнопки

Используйте класс .w3-left и класс .w3-right чтобы перемещать кнопки влево или вправо:

Используется для создания кнопок "previous/next" (предыдущий/следующий):

Пример

<div class="w3-bar">
  <button class="w3-button w3-left">Слева</button>
  <button class="w3-button w3-right">Справа</button>
</div>

Попробуйте сами »


Кнопки с эффектами ряби

The w3-ripple создает эффект ряби (волны) для кнопок (при нажатии на них):

Пример

<button class="w3-button w3-ripple">Button</button>
<button class="w3-button w3-ripple w3-red">Кнопка</button>
<button class="w3-button w3-ripple w3-yellow">Кнопка</button>

Попробуйте сами »


Все элементы могут быть кнопками

С помощью таблицы стилей W3.CSS все элементы можно сделать кнопкой:

Картинка может быть w3-button

Картинка может быть w3-btn



Любой div, header, footer или другие контейнеры могут быть w3-button!



Любой div, header, footer или другие контейнеры могут быть w3-btn!


Круглые кнопки

Класс w3-circle можно использовать для создания круглых кнопок:

+ +

Пример

<button class="w3-button w3-circle w3-black">+</button>
<button class="w3-button w3-circle w3-teal">+</button>

Попробуйте сами »

Квадратные кнопки:

+ +

Пример

<button class="w3-button w3-black">+</button>
<button class="w3-button w3-teal">+</button>

Попробуйте сами »