[CSS] Flat кнопки

Описание: Прочии темы
Модератор: Aleksandr

Frank
Автор темы
Аватара
Frank
Автор темы
Сообщения: 1
Зарегистрирован: 1 февраля 2015
С нами: 9 лет 1 месяц

#1 Frank » 25 декабря 2016, 19:14

Flat кнопки.png
Flat кнопки.png (36.96 КБ) 1259 просмотров


Готовый комплект из кнопок в стиле flat дизайна. Четыре размера на выбор: small, normal, medium и large.

Не обязательно использовать тег button, важно указание классов, которые придают тегу вид кнопки.
HTML код для использования всех возможных вариантов кнопок:

Normal Size

Код: Выделить всё

<button class="flat xs grey">Grey</button>
<
button class="flat xs green">Green</button>
<
button class="flat xs purple">Purple</button>
<
button class="flat xs navy-blue">Navy Blue</button>
<
button class="flat xs pink">Pink</button>
<
button class="flat xs blue">Blue</button>
<
button class="flat xs yellow">Yellow</button


Small Size

Код: Выделить всё

<button class="flat sm grey">Grey</button>
<
button class="flat sm green">Green</button>
<
button class="flat sm purple">Purple</button>
<
button class="flat sm navy-blue">Navy Blue</button>
<
button class="flat sm pink">Pink</button>
<
button class="flat sm blue">Blue</button>
<
button class="flat sm yellow">Yellow</button


Medium Size

Код: Выделить всё

<button class="flat md grey">Grey</button>
<
button class="flat md green">Green</button>
<
button class="flat md purple">Purple</button>
<
button class="flat md navy-blue">Navy Blue</button>
<
button class="flat md pink">Pink</button>
<
button class="flat md blue">Blue</button>
<
button class="flat md yellow">Yellow</button


Large Size

Код: Выделить всё

<button class="flat lg grey">Grey</button>
<
button class="flat lg green">Green</button>
<
button class="flat lg purple">Purple</button>
<
button class="flat lg navy-blue">Navy Blue</button>
<
button class="flat lg pink">Pink</button>
<
button class="flat lg blue">Blue</button>
<
button class="flat lg yellow">Yellow</button


Для установки кнопок на свой сайт, необходимо подключить следующий файл стилей: flat-buttons.css
FLAT.rar
(3.06 КБ) 185 скачиваний


LILUS M
Старшина
Старшина
Аватара
LILUS M
Старшина
Старшина
Сообщения: 136
Зарегистрирован: 2 мая 2013
С нами: 10 лет 10 месяцев

#2 LILUS » 28 декабря 2016, 22:27

Попробовал - понравилось, и код не большой


  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «Прочее»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 3 гостя