Красиві кнопки для сайту за допомогою css і html

Каскадні таблиці стилів дозволяють використовувати CSS 3 градієнт для створення кнопок. Для початку потрібно намалювати макет кнопки в Photoshop, щоб візуально представляти, що ви хотіли б отримати в результаті. Я не буду давати уроків Photoshop, тому що намалювати прямокутну кнопку з закругленими кутами на 10 0 не так вже й складно. Той хто знає як це робити - може пропустити наступний абзац.

Відкриваємо Photoshop і створюємо новий документ, далі вибираємо інструмент «Прямокутник із закругленими кутами» і малюємо кнопку необхідних розмірів. Потім у властивостях шару вибираємо «Накладення градієнта» і підбираємо необхідні кольори для кнопки. Можна також використовувати обведення кнопки в 1px. На малюнку знизу те, що вийшло у мене

Як вставити кнопку на сайт в html

Отже, макет створений, приступаємо до верстки кнопки за допомогою html і css. У шаблоні сайту або блогу wordpress, в запису або на сторінці створіть посилання, яка буде майбутньої кнопкою, присвоївши їй клас «button» наступним чином:

Редагуємо css стиль кнопки

Додаємо наступний код в файл style.css:

Отримуємо красиву кнопку на сайті

Інструкції та рекомендації

• Кворк.ру Біржа послуг з сайту за 500 рублів
• Система SeoPult Просування сайту в пошукових системах

Шаблони для Wordpress

Величезний вибір преміум шаблонів для Wordpress

Зареєструвати домен за 99 рублів