Кнопки
С W3.CSS, все HTML элементы могут быть кнопки.
Но наиболее распространенные элементы <вход>, <кнопка>, и <a>:
пример
<input class="w3-btn" value="Input Button">
<button class="w3-btn">Button Button</button>
<a class="w3-btn"
href="http://www.w3ii.com">Link Button</a> Попробуй сам " Цвета кнопки
Кнопки бывают всех цветов вам:
-
-
пример
<button class="w3-btn w3-khaki">Khaki</button>
<button class="w3-btn
w3-yellow">Yellow</button>
<button class="w3-btn
w3-orange">Orange</button>
<button class="w3-btn w3-red">Red</button>
<button class="w3-btn w3-purple">Purple</button> Попробуй сам " Hover Цвета
Hover эффекты бывают всех цветов вам:
пример
<button class="w3-btn w3-hover-khaki">Khaki</button>
<button class="w3-btn
w3-hover-white">White</button>
<button class="w3-btn w3-hover-red">Red</button>
<button class="w3-btn w3-hover-purple">Purple</button> Попробуй сам " Кнопка Формы
Кнопки бывают всех форм вам нужно:
пример
<button class="w3-btn">Normal</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>
Попробуй сам " Кнопка Размеры
Кнопки бывают всех размеров, вам нужно:
пример
<button class="w3-btn w3-tiny">Tiny</button>
<button class="w3-btn
w3-small">Small</button>
<button class="w3-btn w3-medium">Medium</button>
<button class="w3-btn w3-large">Large</button>
<button class="w3-btn w3-xlarge">xLarge</button>
Попробуй сам " Кнопка Границы
Кнопки могут иметь границ.
пример
<button class="w3-btn w3-white w3-border">Button</button>
<button class="w3-btn w3-light-grey w3-border">Button</button>
<button class="w3-btn w3-yellow w3-border">Button</button>
<button class="w3-btn w3-white w3-border w3-round">Round</button>
<button class="w3-btn w3-white w3-border w3-round-large">Round</button>
<button class="w3-btn w3-white w3-border w3-round-xlarge">Round</button>
<button class="w3-btn w3-white w3-border w3-border-blue
w3-round">Button</button>
Попробуй сам " Кнопки с текстовыми эффектами
Кнопки могут иметь курсивом и жирным текстовые эффекты.
пример
<button class="w3-btn">Normal</button>
<button class="w3-btn"><i>Italic</i></button>
<button class="w3-btn"><b>Bold</b></button>
Попробуй сам " Кнопки могут иметь тень текстовые эффекты.
пример
<button class="w3-btn w3-red w3-text-shadow">Shadow</button>
<button
class="w3-btn w3-red w3-text-shadow"><i>Shadow</i></button>
<button
class="w3-btn w3-red w3-text-shadow"><b>Shadow</b></button>
Попробуй сам " Кнопки могут иметь тонкие и широкие текстовые эффекты.
пример
<button class="w3-btn">Normal</button>
<button class="w3-btn
w3-slim">Slim</button>
<button class="w3-btn w3-wide">Wide</button>
Попробуй сам " Полноширинного Кнопки
Для создания кнопки полной ширины, добавить класс W3-БТН-блок к элементу.
Кнопки полноширинного имеют ширину 100%, и охватывает всю ширину родительского элемента:
пример
<button class="w3-btn-block">Button</button>
<button class="w3-btn-block
w3-teal">Button</button>
<button class="w3-btn-block
w3-red w3-left-align">Button</button> Попробуй сам " Hover Эффекты / Кнопки для инвалидов
Кнопки выделяется при наведении курсора на них.
Обычные кнопки отображаются указатель пальцем.
Кнопки для инвалидов являются непрозрачными и не отображать "не знак парковки".
пример
<button class="w3-btn">Button</button>
<button class="w3-btn
w3-disabled">Button</button>
<input type="button"
class="w3-btn" value="Button">
<input type="button" class="w3-btn"
value="Button" disabled> Попробуй сам " Группы кнопок
Кнопки могут быть сгруппированы вместе (без пробела между ними) с использованием "W3-БТН-группа":
пример
<div class="w3-btn-group">
<button class="w3-btn">Button</button>
<button
class="w3-btn w3-teal">Button</button>
<button class="w3-btn"
disabled>Button</button>
</div>
<div
class="w3-btn-group">
<button class="w3-btn w3-light-grey"
style="width:33.3%">One</button>
<button class="w3-btn
w3-light-grey" style="width:33.3%">Two</button>
<button
class="w3-btn w3-light-grey" style="width:33.3%">Three</button>
</div>
Попробуй сам " Кнопки с эффектами Ripple
Кнопки могут иметь волновой эффект, когда они нажимали на:
пример
<button class="w3-btn w3-ripple">Button</button>
<button
class="w3-btn w3-ripple w3-red">Button</button>
<button class="w3-btn
w3-ripple w3-yellow">Button</button>
Попробуй сам " Кнопка Элементы
С W3.CSS, все элементы могут быть кнопка.
Изображение может быть кнопка
Любой DIV, верхний и нижний колонтитулы или другие контейнеры могут быть кнопка.
Плавающие кнопки
W3-БТН-плавающий класс, создает круговые кнопки, которые предназначены для важных функций:
пример
<a class="w3-btn-floating w3-teal">+</a>
<a
class="w3-btn-floating w3-disabled">+</a>
Попробуй сам " Используйте W3-БТН-плавающей большой класс для больших плавающих кнопок:
пример
<a class="w3-btn-floating-large w3-teal">+</a>
<a
class="w3-btn-floating-large w3-disabled">+</a>
Попробуй сам "