CSS: Создание кнопок с помощью bttn.css

Нравятся ли вам современные призрачные кнопки (ghost buttons) или те, что используются в Материальном Дизайне (Material Design)? Независимо от того, какой концепт флэт дизайна вы предпочитаете, я уверен, что в таблице стилей bttn.css найдется одна или две кнопки, которые вам точно понравятся.

bttn.css: 13 разных плоских кнопок

Таблица стилей bttn.css сильно упрощает процесс создания привлекательных кнопок. Все что для этого нужно – это распределить заранее заданные классы.

Эта кнопка, например, создана с использованием следующих классов:

<button class=”bttn-slant bttn-lg bttn-succes”>

Что может быть проще? В bttn.css есть 13 кнопок в шести цветах  и четырех размерах. Для каждого параметра задается свой класс. Однако, разработчики могли бы сделать определения цветов немного понятнее. Легко догадаться, что bttn-success означает зеленый цвет, но bttn-royal для фиолетового или bttn-warning для оранжевого настолько абстрактны, что не приводят к нужной ассоциации в некоторых частях света. Тем не менее, разобраться с шестью цветовыми классами придется, если вы хотите их использовать.

• Читайте также: 5 отличных ресурсов по CSS анимации

bttn.css: небольшой вес файла и гибкие настройки

После сжатия bttn.css весит всего около 32kb, а полная версия весит около 42kb. Если и это кажется вам слишком большим размером для нескольких кнопок, вы также можете загрузить CSS для каждой кнопки отдельно. В этом случае, вес кнопки составляет всего 6kb. Обычно одной кнопки на проект достаточно для создания последовательного пользовательского интерфейса.

Все параметры можно удобно задать, а затем поместить в ваш проект через буфер обмена. На странице конфигурации вы также найдете опцию загрузки отдельных CSS файлов. В дополнение к современному виду кнопки еще и имею анимационные эффекты.

bttn.css создал и поддерживает Ганапати Бат (Ganapati Bhat), фронт енд разработчик из Бангалора в Индии. Проект распространяется бесплатно под либеральной MIT лицензией на Github. Ганапати выпустил первую версию в начале ноября 2016 и с тех пор активно ее поддерживает. На данный момент этот проект упоминался на ProductHunt и на Github.

• Читайте также: Управляйте шрифтами с помощью CSS font-display

Перевод статьи CSS: Pretty Buttons With bttn.css
Автор оригинального текста Ioanni Mitsakis