Всім «спекотне» весняні Hello кнопки на сайті і їх додавання, а так же все що пов'язано з їх створенням тема цього несподіваного поста. Застосування CSS psd і button ось що чекає нас сьогодні. Є кілька варіантів створення цих важливих елементів оформлення. Наприклад, можна завантажити готовий набір, можна зробити їх в фотошоп технологія приблизно та ж що і для іконок, можна на чистому html і css.
Про деякі цих прийомів я розповім сьогодні. Крім скачування готового набору (надам пару посилань нижче). І так приступимо якщо ви використовуєте фотошоп в своїй роботі, то варіація, описана нижче цілком вам підійде.
Форма і краса вашого виробу залежить повністю від вас, що намалюєте то власне і отримаєте, я тут даю лише прийоми виконання настільки «складною» завдання.
Беремо інструмент «прямокутне виділення» (або векторну фігуру) якщо хочете робимо виділення потрібної нам висоти і передбачуваної ширини (1)
Далі створимо новий шар і заллємо виділену область потрібним кольором, знімемо виділення. Знову новий шар і за допомогою інструменту текст додамо необхідний нам текст для кнопки сайту. Можна застосувати інструмент «Довільна фігура» і розташувати якусь стрілку, в результаті цих маніпуляцій у мене вийшла ось така штука.
Я не зупиняюся на подробицях роботи з інструментами так як вже писав про це в пості про іконку тутечки.
Якщо ми не плануємо робити кнопку ролловер потрібно підігнати розмір нашого psd файлу під бажаний і переходити до збереження, про те, як зберегти картинку у форматі jpg, gif, png вже написано мною тут тут і тут. Але якщо є потреба її оживити, потрібно зробити копії шарів з прямокутником, текстом і стрілкою і змінити колір або шрифт, або стрілку в загальному то що ви хочете змінити, у мене вийшло ось така штука яка буде використана в якості фону «натискалкою».
Збережіть отримане зображення у вашій папці з сайтом і можна приступати до додавання нашого вироби на сторінку. Сенс в тому, що при наведенні миші верхня частина фону буде замінюватися на нижню. Приступимо до html реалізації цього проекту. Ось доля коду, яку потрібно додати в тому місці сторінки де передбачається присутність кнопки: