Як зробити анімовану кнопку

Як зробити анімовану кнопку

Оформлення сайтів дуже важливе для того, як їх у підсумку сприймають відвідувачі. Люди повинні відчувати естетичне задоволення, перебуваючи на сторінках сайту, а також ці сторінки повинні бути для них зручними і функціональними. Жоден сайт не обходиться без навігаційних кнопок, і ваш сайт буде виглядати одночасно функціональним і красивим, якщо ви зробите ці кнопки анімованими.

Інструкція

1. Графічні кнопки, на відміну від текстових, помітні на сторінках і легко запам 'ятовуються читачами. Щоб створити анімовані кнопки, скористайтеся Corel Draw. Створіть новий документ і намалюйте заготовку, на якій кнопка буде зображена в декількох видах, як у натиснутому, так і в не натиснутому стані.

2. Щоб намалювати кнопку, виберіть відповідний інструмент на панелі інструментів і намалюйте прямокутник із заокругленими краями. Залийте прямокутник чорним кольором, а потім скопіюйте його та зруште ліворуч та вгору копію. Залийте другий прямокутник білим кольором.

3. На заготівлі кнопки напишіть її назву, додавши до тексту чорний контур. Сам текст зробіть білим. Тепер відкрийте меню Effects Rollover, виділивши кнопку і клацніть на параметрі Create Rollover. У рядку стану Rollover ви побачите напис Normal.

4. Тепер, щоб змінити малюнок кнопки, клацніть правою клавішею миші і виберіть параметр Edit Rollover у контекстному меню. Відкриється нова панель інструментів Internet. Намалюйте додаткові положення кнопки, які потім будуть змінюватися один за одним, створюючи ефект анімації.

5. На лівій частині панелі Internet клацніть на кнопці Over і відредагуйте кнопку, видаливши контур тексту. Залийте текст чорним кольором, щоб створити другий варіант анімації. Тепер натисніть кнопку Down і намалюйте останній варіант кнопки.

6. Зсуньте текст та білий прямокутник вниз праворуч, а чорний прямокутник зруште ліворуч. Тепер натисніть кнопку Finish Editing Rollover.

7. Збережіть кнопку разом з кодом, за допомогою якого ви зможете змінювати вигляд об 'єктів на веб-сторінці. Таким чином ви зможете намалювати кнопку будь-якого виду з будь-яким оформленням.