1. Онлайн сервіси по створенню CSS кнопок.
В інтернеті є дуже хороші онлайн сервіси по створенню CSS кнопок:
2. Більш детально розберемо створення CSS кнопки за допомогою онлайн сервісу «css-tricks.com/examples/ButtonMaker/».
Завантажити код даного сервісу можна і з мого сайту - завантажити сервіс зі створення CSS кнопки.
Справа у нас розташовані інструменти для створення кнопки:- Повзунки - регулюють розмір кнопки і закруглення кутів;
- Top Gradient Color - колір верхнього градієнта;
- Bottom Gradient Color - колір нижнього градієнта;
- Top Border Color - колір верхньої межі кнопки;
- Hover Background Color - колір кнопки при наведенні на неї;
- Text Color - колір тексту;
- Hover Text Color - колір тексту при наведенні на кнопку;
- Active Background Color - колір кнопки при натисканні на неї.
Зліва - можна побачити як буде виглядати CSS кнопка, а якщо натиснути на неї, то побачимо CSS код кнопки, який можна скопіювати, за замовчуванням він виглядає так:
Тут на мою думку, все прекрасно видно - що за що відповідає в CSS коді кнопки:
По-перше, у кнопки є три стани:
1. Кнопка в стані спокою;
2. Коли на кнопку під вказівником миші - за нього відповідає клас hover;
3. Коли ми натискаємо на кнопку - за нього відповідає клас active (даний клас ми майже не бачимо, однак, якщо скористатися ефектом затримки при переході по посиланню - то можна насолодитися їм повною мірою).
І відповідно, для всіх цих класів (hover, active) приписуються свої стилі оформлення колір фону кнопки (background), колір тексту (color) і ін.
По-друге, в даному коді видно використання різних властивостей:
gradient - відповідає за градієнт,
radius - закруглення кутів кнопки,
shadow - тіні,
Далі слід створити посилання з класом buttom (за замовчуванням в CSS коді кнопки присутній саме він) і вставити її там, де ми хочемо бачити цю кнопочку, для прикладу, створимо її в сайдбарі - для сайтів на wordpress - панель управління, в лівому меню пункт «Зовнішній вигляд», його підпункт «Віджети», вибираємо віджет з назвою «Текст» і перетягуємо його в сайдбар, а далі прописуємо в ньому наступне:
В результаті у нас вийде наступна кнопочка:
PS: Деякі теми вже використовують клас «button» в своїх стилях, тому краще поміняти його на що-небудь більш оригінальне, наприклад, додати до нього цифри - «button777" ...