Framework Averin.pro

CSS Framework дизайн студии Артемия Аверина

Кнопки

Framework начиная с версии 4.0 придерживается принципа "любой элемент может иметь любой стиль, при этом на зависит от других элементов".

Настройка

Основной класс: .button

Цвета: .red, .yellow, .green, .blue, .gray, .dark

Размеры: .small, .big

Состояния: .disabled, .active

Дочерние свойства: размеры is-col, is-*

Скачать CSS фрагмент компонента   Собрать сборку

Примеры

<a href="#" class="button">Кнопка через ссылку</a>
<button class="button">Кнопка button</button>
<input type="submit" class="button" value="Кнопка input"> 
<a href="#" class="button small">Маленькая кнопка</a>
<a href="#" class="button">Стандартная кнопка</a>
<a href="#" class="button big">Большая кнопка</a> 
<a href="#" class="button">Стандартная кнопка</a>
<a href="#" class="button red">Красная кнопка</a>
<a href="#" class="button yellow">Желтая кнопка</a>
<a href="#" class="button green">Зеленая кнопка</a>
<a href="#" class="button blue">Синяя кнопка</a>
<a href="#" class="button gray">Серая кнопка</a>
<a href="#" class="button dark">Тёмная кнопка</a> 
<a href="#" class="button disabled">Отключенная кнопка</a> 
<a href="#" class="button active">Активаня кнопка</a> 
<a href="#" class="button is-10">Кнопка</a>
<a href="#" class="button is-50">Кнопка</a>
<a href="#" class="button is-100">Кнопка</a> 
Старт

Типографика
Сетка
Формы
Таблицы
Кнопки
Метки
Пагинация
Крошки
Мобильное меню
Окна
Аниматор
Подсказки
Наверх
Уведомления
Помощники
Плагины
Виджеты

Шаблоны

Редактор WYSIWYG

Новости обновлений

Скачать

4.6 - 18 сентября 2019 года

Старт

Типографика
Сетка
Формы
Таблицы
Кнопки
Метки
Пагинация
Крошки
Мобильное меню
Окна
Аниматор
Подсказки
Наверх
Уведомления
Помощники
Плагины
Виджеты

Шаблоны

Редактор WYSIWYG

Новости обновлений

Скачать

Версия 4.6 - 18 сентября 2019 года