Набір стилів css для створення кнопок

32

Набор стилей css для создания кнопок

Пару місяців тому робив простенький шаблон на замовлення, використовував окремі елементи фреймворків LumX і Materialize. Зокрема LumX виділив в окремий набір класи для створення динамічних кнопок. Відсік все непотрібне(виключно для мене), розбавив шрифт-іконками від Font Awesome і вийшов цілком собі автономний, невеликий набір стилів, за допомогою якого можна швидко інтегрувати на сторінки сайту, досить симпатичні кнопки.

Довго і докладно розписувати всі складові не буду, все гранично ясно, досить поглянути на сирці. Всі кнопки мають базові стилі, об’єднані у загальний клас .btn, колір і форма вибираються шляхом додавання окремих класів. Наприклад, щоб отримати стандартну кнопку з фоновою заливкою синього кольору і злегка округленими кутами слід прописати наступне:

Кнопка

Кнопка

І так далі. Класи обізвав так, щоб було інтуїтивно зрозуміло, який за що відповідає, так що думаю буде розібратися не складно. Длубатися в коді і поекспериментувати з параметрами, можете в редакторі Jsfiddle:

Шрифт-іконки від Font Awesome підключаються в роботу по накатаній, вставте наступний код у секції HTML вашого сайту:


Визначити клас тій чи іншій шрифт-іконки можна безпосередньо на сайті Font Awesome в розділі Icons
На рахунок підтримки браузерами, тут, як завжди, Firefox і все Webkit-браузери відображають кнопы коректно, IE-шка починаючи з 9-ї версії, ie8 і нижче, тінь і скруглення кутів, як ви розумієте, ігнорують геть(забути і забити).

На цьому все!

З Повагою, Андрій .

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