Главная » HTML & CSS » Btns.css - Модульный набор стилей кнопок CSS

Btns.css — Модульный набор стилей кнопок CSS

Небольшой модуль стилей CSS для создания красивых кнопок, отлично реагирующих на изменения размеров экранов пользовательских устройств. Btns.css — это очень лёгкий набор простых правил CSS, которые вы сможете использовать в своих проектах. При желании, будет очень просто изменить, настроить и расширить теми или иными свойствами, в соответствии с общим дизайнерским стилем ваших сайтов.

В сжатом виде, размер всей библиотеки составляет всего лишь 663B.
 
Btns.css - Набор стилей CSS для кнопок
 
По умолчанию в базовый класс кнопок .btn не прописан размер шрифта, так что по стандарту 1em.

<a href="#" class="btn">Кнопка<a>

Доступны расширения класса .btn для трех дополнительных размеров: маленькие, средние и большие. Для изменения размеров кнопок, достаточно добавить соответствующие классы:

<a href="#" class="btn">Кнопка<a>
<a href="#" class="btn btn--l">Кнопка<a>
<a href="#" class="btn btn--m">Кнопка<a>
<a href="#" class="btn btn--s">Кнопка<a>

В набор включены различные вариации цветового оформления кнопок, черные, белые, светло и темно-серые, с рамками и без, ну и конечно же синего цвета, куда же без них)))

<a href="#" class="btn btn--m btn--black">Чёрная</a>
<a href="#" class="btn btn--m btn--white">Белая</a>
<a href="#" class="btn btn--m btn--gray">Серая</a>
<a href="#" class="btn btn--m btn--gray-dark">Тёмно Серая</a>
<a href="#" class="btn btn--m btn--gray-border">С Рамкой</a>
<a href="#" class="btn btn--m btn--blue">Синяя Кнопа</a>

Экспериментируя с параметрами CSS, вы сможете видоизменить кнопки, как вашей душе угодно, всё зависит от полёта фантазии и предпочтений.

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru