Створення анімаційної кнопки

Давайте перерахуємо всі наші дії, які ми будемо виконувати в уроці:

Намалюємо кнопку в Photoshop'е

Зверстаємо кнопку за допомогою HTML / CSS

Додамо ефект плавності за допомогою фреймворка JQuery

Крок 1: Photoshop

Наша кнопка буде розмірами 200х50px. Але ми будемо малювати відразу дві кнопки, для двох різних станів, тому висота полотна у нас буде 100px (далі ви зрозумієте, чому ми дві кнопки малюємо).

Давайте для початку зайдемо в Photoshop і створимо полотно (Ctrl + N) розмірами 200х100px.

Щоб нам було простіше малювати кнопки, ми розділимо полотно спеціальними лініями. Щоб їх включити, тиснемо Ctrl + R або View> Rulers.

Створюємо форму кнопки. На панелі інструментів вибираємо інструмент Rounded Rectangle Tool. а в рядку параметрів (вгорі) поставимо округлість кутів 8px.

Коли у нас обраний і налаштований для роботи інструмент Rounded Rectangle Tool. створюємо нашу кнопку шляхом затягування ЛФМ в верхньому кутку полотна і тягнемо до правого кута.

Оформляємо кнопку. Для цього потрібно відкрити меню з налаштуваннями стилів, клікнути 2 рази ЛКМ на шар з формою кнопки.

Додамо градієнт. Для цього натисніть на Gradient Overlay. Потім натисніть на градієнт для відкриття вікна редагування градієнта, щоб вибрати потрібні нам кольору.

Додаємо внутрішнє світіння. Це дасть кнопки тонкі білі кордону. Тиснемо Inner Glow. ставимо непрозорість на 100% і міняємо колір світіння на білий (# FFFFFF), а розмір світіння в 3px.

Додаємо темно зелену 1px кордон нашої кнопці. Для цього заходимо в Stroke і ставимо розмір 1px. позиція inside (рамка буде внутрішньої), а колір рамки темно зелений - (# 60694f).

Пишемо текст на нашій кнопці, наприклад «відправити». Для цього на панелі інструментів вибираємо інструмент Horizontal Type Tool. а в панелі параметрів ставимо шрифт Arial, стиль шрифту Bold (жирний), розмір шрифту 24px, згладжування Sharp, потім натисніть на будь-якому місці полотна і напишіть свій текст.

Оформляємо текст кнопки. Для цього знову відкриваємо меню з налаштуваннями стилів (Layer Styles), натискаємо 2 рази ЛКМ на шар з текстом. І робимо градієнт, як це ми робили, тільки на цей раз для лівого боку колір - # 505548. а для правої - # 9ca388. У вас повинно вийти ось так:

Тепер додамо до нашого тексту внутрішню тінь. Заходимо в Inner shadow. Ставимо кут нахилу тіні 90 градусів, відстань в 1px, розмір ставимо 2px, колір внутрішньої тіні чорний (# 000000) і помутніння (Opacity) на 75%.

Додамо до тексту трошки зовнішньої тіні. Натискаємо на Drop Shadow і робимо колір тіні світло-зеленого кольору (# dde4cf). Ставимо помутніння на 100%, кут тіні 90 градусів, відстань 1px і розмір в 2px (так само як і у внутрішній тіні).

Створюємо зображення кнопки для стану нover

Hover - стан кнопки коли користувач поміщає над кнопкою курсор.
У нас вже є зображення кнопки для нормального стану, тепер ми створимо зображення для стану, коли курсор на кнопці.

Ми всі наші шари помістимо в папку з назвою «norm» (зображення нормального стану кнопки), потім папку «norm» Копійований і переіменовуем в «hover» (зображення активного стану кнопки).

Створюємо папку «norm». натискаємо (Ctr + G) або кнопку у вигляді папки, називаємо її «norm» і перетягуємо всі наші шари в папку.

Тепер Копійований папку «norm». натискаємо по ній ПКМ (права курсор миші) і тиснемо Duplicate group. нову папку називаємо «hover».

Тиснемо на папку «hover». а потім нижньої кнопкою клавіатури або інструментом Move Tool (V) опускайте кнопку Hover в нижню частину полотна, як це на скріншоті показано. Кнопки потрібно стикувати краями. Для того щоб це краще зробити, можете збільшити зображення інструментом Zoom Tool (Z).

Міняємо налаштування шарів в папці Hover

Заходимо в папку «hover». двічі клацнувши на шар форми кнопки, щоб викликати меню Layer Styles. потім заходимо в налаштування Gradient overlay і налаштовуємо градієнтну заливку. Лівій стороні - колір # 656664. а правою - # 959691.

Двічі клацніть на шар з текстом в папці Hover. щоб відкрити меню Layer Styles. У вкладці Drop shadow міняємо кольору тіней на сірий колір (#cdcfcd).

Останній штрих, який ми додамо - це градієнт для тексту. Заходимо в Gradient overlay і в лівій стороні міняємо колір на # f4f3f3. а для правої - (# f5f5f5). Дивимося скріншот кінцевого варіанти кнопки:

Зберігаємо нашу кнопку File> Save for Web # 038; Devices в форматі .gif. Можна і в інших форматах .png або .jpg, але я зберіг як button.gif

Крок 2: HTML / CSS

Підключаємо файл з нашими майбутніми стилями styles.css до файлу index.html. Для цього потрібно між тегами вставити ось це код:

Заходимо в наш index.html і пишемо каркас для нашої кнопки. Для цього створюємо параграф

з класом buttom, а всередині параграфа розміщуємо нашу посилання. Дивимося приклад:

Заходимо в наш файл styles.css і прописуємо налаштування для класу .button.
Ми прописуємо, як показувати елемент block (блоком), задаємо висоту і ширину кнопки, і підключаємо фонове зображення, опускаємо її по висоті на -50px вниз.

border-width - товщина кордонів нашої кнопки. Cтав 0px.

Надаємо стиль посиланням, яка буде реагувати на курсор миші. Це буде клас .Button a: hover.

Тут все просто. background-position - це позиція фону (фоном у нас є кнопка). Ми його піднімаємо на 50px вгору. Таким чином, коли наводиться курсор на кнопку, фон піднімається, а у нас знизу кнопка з чорним фоном. Ось і вийшла проста анімація.

Весь HTML і CSS код кнопки

Тепер за допомогою фреймворка JQuery, ми нашу кнопку зробимо більш живою. Точніше, коли на кнопку користувач буде наводити курсор, вона буде змінювати стан з нормального до активного плавно, а не різко.

Для початку давайте підключимо наш фреймворк JQuery, до файлу index.html. Будемо підключати через google, між тегами прописуємо ось цей код:

Перше, що потрібно зробити, це видалити стиль: hover для класу p.button a, тому що він вплине на ефект анімації кнопки. Дивимося код:

Тепер нам потрібно прописати код, який буде відповідати за два етапи анімації. Перша - це коли користувач наводить курсор миші на кнопку, а друга - коли курсор йде з кнопки.

Елемент .hover матиме дві функції. Перша буде відповідати за анімацію при наведенні, а друга функція - за анімацію, коли курсор йде із зони кнопки. Швидкість нашої анімації вимірюється в мілісекундах. Я поставив 500мс, мені здається, при такій швидкості кнопка оживає, але ви можете поекспериментувати.

висновок

Давайте підіб'ємо підсумки уроку: ми намалювали в Photoshop'е кнопку, а точніше 2 стану кнопки, потім її з верстали, за допомогою HTML і CSS, а вже потім дали їй ефект плавності за допомогою фреймворка jQuery.

Успіхів Вам у роботі!

"Кіберсант-вебмастер" - найповніший курс по сайтобудування в рунеті!

Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі

Хочете навчитися створювати шикарні дизайни сайтів?

Отримайте покрокову навчальну систему по веб-дизайну

Або це помилка, яку ніхто не помітив, або я щось не розумію:
При створенні папки norm треба:
-перетягуємо всі шари (крім layer 0)
після цього на скріншоті д.б .:
-norm
-layer 0
і тільки потім: ПКМ - Duplicate.
і після цього порекомендувати студенту підняти шар norm наверх