» » Кнопоки в стиле flat дизайна

Кнопоки в стиле flat дизайна

Кнопоки в стиле flat дизайна


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

HTML


Не обязательно использовать тег 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>


CSS


Для установки кнопок на свой сайт, необходимо подключить следующий файл стилей: flat-buttons.css
    

  • 0



7-05-2017, 19:13 1 161 0

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.