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-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>
