Кнопка Foundation
Стили кнопок
Foundation предоставляет 6 стилей кнопок..buttonЭтот класс создаёт синюю кнопку с внутренними отступами. Классы для кнопок разных цветов:.secondary, .success, .info, .warningили.alert:
Пример
<button type="button" class="button">По умолчанию</button>
<button type="button" class="button secondary">Второстепенная</button>
<button type="button" class="button success">Успех</button>
<button type="button" class="button info">Информация</button>
<button type="button" class="button warning">Предупреждение</button>
<button type="button" class="button alert">Оповещение</button>
<button type="button" class="button secondary">Второстепенная</button>
<button type="button" class="button success">Успех</button>
<button type="button" class="button info">Информация</button>
<button type="button" class="button warning">Предупреждение</button>
<button type="button" class="button alert">Оповещение</button>
Попробуйте сами »
Классы button можно использовать на<a>, <button>, или<input>Элемент:
Пример
<a href="#" class="button info" role="button">Кнопка-ссылка</a>
<button type="button" class="button info">Кнопка</button>
<input type="button" class="button info" value="Кнопка ввода">
<input type="submit" class="button info" value="Кнопка отправки">
<button type="button" class="button info">Кнопка</button>
<input type="button" class="button info" value="Кнопка ввода">
<input type="submit" class="button info" value="Кнопка отправки">
Попробуйте сами »
 |
Почему устанавливают href тега a в #? Когда мы не хотим, чтобы ссылка при нажатии переходила на страницу "404", можно установить href тега a в #. |
|---|
Размер кнопки
Мы можем использовать.large, .smallили.tinyклассы для задания размера кнопки:
Пример
<button type="button" class="button large">Большая</button>
<button type="button" class="button">По умолчанию</button>
<button type="button" class="button small">Маленькая</button>
<button type="button" class="button tiny">Крошечная</button>
<button type="button" class="button">По умолчанию</button>
<button type="button" class="button small">Маленькая</button>
<button type="button" class="button tiny">Крошечная</button>
Попробуйте сами »
Скруглённая кнопка
Вы можете использовать.radiusи.roundклассы для настройки закруглённых кнопок:
Пример
<button type="button" class="button">Кнопка по умолчанию</button>
<button type="button" class="button radius">Кнопка с закруглением</button>
<button type="button" class="button round">Круглая кнопка</button>
<button type="button" class="button radius">Кнопка с закруглением</button>
<button type="button" class="button round">Круглая кнопка</button>
Попробуйте сами »
Кнопка на всю ширину
Вы можете использовать.expandКласс, используемый для установки ширины кнопки на 100%:
Пример
<button type="button" class="button">Кнопка по умолчанию</button>
<button type="button" class="button expand">Кнопка на всю ширину</button>
<button type="button" class="button expand">Кнопка на всю ширину</button>
Попробуйте сами »
Отключённая кнопка
Вы можете использовать.disabledКлассы, чтобы сделать кнопку некликабельной:
Пример
<button type="button" class="button">Кнопка по умолчанию</button>
<button type="button" class="button disabled">Неактивная кнопка</button>
<button type="button" class="button disabled">Неактивная кнопка</button>
Попробуйте сами »