Легкі стилі і ефекти для кнопок

Сьогодні ми хотіли б поділитися деякими свіжими стилями і ефектами для кнопок. У наборі є багато різних ефектів, які допоможуть трохи "оживити" сторінку.

Відео: Три кращих онлайн-генератора CSS-стилів для кнопок

Для початку необхідно завантажити вихідні, і вибрати тему оформлення для кнопок. Ви можете взяти то оформлення, яке вам сподобається. Для прикладу візьмемо першу тему winona.

дивитися прімерСкачать

Схожі статті на цю тему:

Відео: Як не треба робити кнопки. (Які стилі шару краще не застосовувати)

• Гарний випадає для сайту - робимо, що випадає
• Призначені для користувача стилі для форми на чистому CSS без javascript

Відео: Прості малюнки - КНОПКА ютубі KAWAII (YouTube KAWAII)!

Відкриваємо в редакторі файл index.html з исходника, знаходимо цікавий для нас тег. В моєму випадку:

123456

lt;h2gt; Winonalt;/h2gt;lt;div class="Box bg-1"gt;lt;button class="Button button - winona button - border-thin button - round-s"gt; lt;spangt; Посилання 1lt;/spangt; lt;/buttongt;lt;button class="Button button - winona button - border-thin button - round-s"gt; lt;spangt; Посилання 2lt;/spangt; lt;/buttongt;lt;button class="Button button - winona button - border-thin button - round-s"gt; lt;spangt; Посилання 3lt;/spangt; lt;/buttongt;lt;/divgt;

З цього коду беремо рядок з класом button.

1

lt;button class="Button button - winona button - border-thin button - round-s"gt; lt;spangt; Посилання 1lt;/spangt; lt;/buttongt;

Вставляємо код в будь-яку необхідну місце в файлі з кодом нашого проекту між тегом .
Назва кнопки змініть на те, що потрібно вам. У моєму випадку назва я зміню на "Відкрити"

1

lt;button class="Button button - winona button - border-thin button - round-s"gt; lt;spangt; відкрити lt;/spangt; lt;/buttongt;

підключаємо стилі

Повертаємося в файл з исходника і між тегами знаходимо рядок зі стилем для кнопок.

1

lt;link rel="Stylesheet" type="Text / css" href="Css / buttons.css" /gt;

Копіюємо її і вставляємо між тегами в індексному файлі свого проекту.

Далі необхідно скопіювати сам файл зі стилями buttons.css з исходника в свій проект в папку css.

З прикладу видно, що певний стиль кнопці додається за допомогою додаткового класу відповідного назвою теми оформлення.

У нашому випадку це клас button-winona. Отже, будуть додаватися стилі з назвою winona.

Це дуже зручно, тому що якщо вам захочеться змінити оформлення кнопок, то потрібно буде замінити лише назва додаткового класу в тезі. А стилі вже прописані у файлі button.css!

От і все!

Успіхів!

джерело: оригінал

З повагою, Міхальов Валентин