Кнопки W3.CSS
Классы кнопок W3.CSS
W3.CSS предоставляет следующие классы для кнопок:
| Класс | Определяет |
|---|---|
| w3-бн | Прямоугольная кнопка с эффектом наведения тени. Цвет по умолчанию черный. |
| w3-кнопка |
Прямоугольная кнопка с серым эффектом наведения. Цвет по умолчанию светло-серый в W3.CSS версии 3. Цвет по умолчанию унаследован от родительского элемента в версии 4. |
| w3-бар |
Горизонтальная полоса, которую можно использовать для группировки кнопок. (Идеально подходит для горизонтальных навигационных меню) |
| w3-блок | Класс, который можно использовать для определения кнопки полной ширины (100%). |
| w3-круг | Может использоваться для определения круглой кнопки. |
| w3-рябь | Может использоваться для создания эффекта ряби. |
Кнопки
И класс 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- size , чтобы добавить закругленные границы.
Кнопки с различными текстовыми эффектами
Кнопки могут использовать более широкие текстовые эффекты:
Класс w3-wide добавляет более широкий текстовый эффект:
Пример
<button class="w3-button">Normal</button>
<button class="w3-button w3-wide">Wide</button>
Кнопки могут иметь курсив и полужирный текст:
Используйте стандартные теги HTML (<i> и <b>), чтобы выделить текст кнопки курсивом или жирным шрифтом:
Пример
<button class="w3-button"><i>Italic</i></button>
<button class="w3-button"><b>Bold</b></button>
Кнопки с прокладкой
Классы w3-padding- size используются для добавления дополнительных отступов вокруг текста кнопки:
Пример
<button class="w3-button w3-padding-small">Button</button>
<button class="w3-button">Button</button>
<button class="w3-button w3-padding-large">Button</button>
<button class="w3-btn w3-padding-small">Button</button>
<button class="w3-btn">Button</button>
<button class="w3-btn w3-padding-large">Button</button>
Кнопки во всю ширину
Чтобы создать полноразмерную кнопку, добавьте к ней класс w3-block .
Кнопки полной ширины имеют ширину 100% и охватывают всю ширину родительского элемента:
Пример
<button class="w3-button w3-block">Button</button>
<button class="w3-button w3-block w3-teal">Button</button>
<button class="w3-button w3-block w3-red w3-left-align">Button</button>
<button class="w3-btn w3-block">Button</button>
<button class="w3-btn w3-block w3-teal">Button</button>
<button class="w3-btn w3-block w3-red w3-left-align">Button</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>
Отключенные кнопки
Кнопки выделяются эффектом тени, а курсор при наведении на них превращается в руку.
Отключенные кнопки непрозрачны (полупрозрачны) и отображают знак «парковка запрещена»:
Класс w3-disabled используется для создания отключенной кнопки (если элемент поддерживает стандартный атрибут HTML disabled, вы можете использовать вместо него атрибут disabled):
Пример
<a class="w3-button w3-disabled" href="https://www.w3schools.com">Link Button</a>
<button class="w3-button" disabled>Button</button>
<input type="button" class="w3-button" value="Button" disabled>
<a class="w3-btn w3-disabled" href="https://www.w3schools.com">Link Button</a>
<button class="w3-btn" disabled>Button</button>
<input type="button" class="w3-btn" value="Button" disabled>
Панели кнопок
Кнопки можно сгруппировать на горизонтальной панели с помощью класса w3-bar :
Пример
<div class="w3-bar">
<button class="w3-button w3-black">Button</button>
<button class="w3-button w3-teal">Button</button>
<button class="w3-button w3-red">Button</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>
<button class="w3-bar-item w3-button w3-teal">Button</button>
<button class="w3-bar-item w3-button w3-red">Button</button>
</div>
Панели кнопок можно центрировать с помощью класса w3-center :
Пример
<div class="w3-center">
<div class="w3-bar">
<button class="w3-button w3-black">Button</button>
<button class="w3-button w3-teal">Button</button>
<button class="w3-button w3-disabled">Button</button>
</div>
</div>
Чтобы отобразить две (или более) панели кнопок на одной строке, добавьте класс w3-show-inline-block :
Пример
<div class="w3-show-inline-block">
<div class="w3-bar">
<button class="w3-btn">Button</button>
<button
class="w3-btn w3-teal">Button</button>
<button class="w3-btn
w3-disabled">Button</button>
</div>
</div>
<div
class="w3-show-inline-block">
<div
class="w3-bar">
<button class="w3-btn">Button</button>
<button
class="w3-btn w3-teal">Button</button>
<button class="w3-btn
w3-disabled">Button</button>
</div>
</div>
Панели навигации
Панели кнопок можно легко использовать в качестве панелей навигации:
Пример
<div class="w3-bar w3-black">
<button class="w3-bar-item
w3-button">Button</button>
<button class="w3-bar-item
w3-button">Button</button>
<button class="w3-bar-item
w3-button">Button</button>
</div>
Размер каждого элемента можно определить с помощью style="width:" :
Пример
<div
class="w3-bar">
<button class="w3-bar-item w3-button"
style="width:33.3%">Button</button>
<button class="w3-bar-item w3-button
w3-teal" style="width:33.3%">Button</button>
<button
class="w3-bar-item w3-button w3-red" style="width:33.3%">Button</button>
</div>
Вы узнаете больше о навигации позже в этом руководстве.
Левая и правая кнопки
Используйте класс .w3-left и класс .w3-right для перемещения кнопок влево или вправо:
Используется для создания кнопок «предыдущий/следующий»:
Пример
<div class="w3-bar">
<button class="w3-button w3-left">Left</button>
<button class="w3-button w3-right">Right</button>
</div>
Кнопки с пульсирующим эффектом
The w3-ripple class creates a ripple effect on buttons (when they are clicked on):
Example
<button class="w3-button w3-ripple">Button</button>
<button
class="w3-button w3-ripple w3-red">Button</button>
<button class="w3-button
w3-ripple w3-yellow">Button</button>
All Elements Can Be Buttons
With W3.CSS, all elements can be a button:
A picture can be a w3-button
A picture can be a w3-btn
Any div, header, footer or other containers can be a w3-btn!
Circular Buttons
The w3-circle class can be used to create circular buttons:
Example
<button class="w3-button w3-circle w3-black">+</button>
<button class="w3-button w3-circle w3-teal">+</button>
Square buttons:
Example
<button class="w3-button w3-black">+</button>
<button
class="w3-button w3-teal">+</button>