Прост бутон Call to Action с CSS & jQuery

Призив за действие в уеб дизайна е термин, използван за елементи в уеб страница, които изискват действие от потребителя (кликване, завиване и т.н.). Днес ще го направим създайте ефективен и страхотен бутон за повикване до действие с някои CSS и jQuery които привличат вниманието на потребителя и го примамват да щракне .

По време на този урок ще обясним всеки ред използван код с подробности и се надяваме, че ще бъде полезен за вас. Следващият урок използва HTML, CSS и jQuery с ниво на трудност начинаещ и приблизително време за завършване на 45 минути.

Инструкция за изтегляне (.zip) или Демонстрация

Част I - Създаване на изображението на бутона

В тази първа част ще ви покажем как да създадете необходимите изображения с Photoshop в прости лесни стъпки. Да започваме.

Създайте нов документ на Photoshop с ширина 580px и височина 130px. Отиди на изглед > Ново ръководство след това, задайте ориентация да се хоризонтален и позиция до 65 пиксела.

Създайте още ръководства; за горната, долната, лявата и дясната. След като сте готови, изображението ви трябва да има следните указания:

Водачите изглеждат да разделят вашето платно на горната и долната половина. Изберете Кръгъл правоъгълен инструмент, нагласи радиус до 5px и начертайте правоъгълна форма в горната половина на платното.

Променете стиловете за Градиентно наслагване и Удар.

Изберете Тип Инструмент и тип “Изтегли” за като примерен текст в полето, което сте създали. Подравнете текста до средата на средата на полето и изходът ви трябва да изглежда по следния начин:

Завършихме създаването на първото състояние на бутона за изтегляне. Нека да създайте нова група и преместете всички слоеве в него. Дублирайте групата и след това я поставете под първата група. създадохме.

Преминете към дублираната група и променете Градиентно наслагване и Удар стил на нашата втора правоъгълна кутия (на въртящата се) със следните настройки:

Когато е избрана втората група, използвайте Ход инструмент за преместване на цялата правоъгълна кутия до втората половина на платното.

Това е! Приключихме с първата част. Запазете изображението си като download.png и пуснете любимия си редактор на код.

Изтеглете PSD

Част II - HTML

Стъпка 1 - Подгответе необходимите файлове

Създайте папка и му дайте име. Ще го наречем jQueryCallToaction за този урок. Вътре jQueryCallToaction създайте следните файлове / папки:

1. Празен HTML файл, index.html
2. Празен CSS файл, style.css
3. Празен JavaScript файл, script.js
4. Папка с име "снимки"
5. място download.png вътре снимки папка.

Стъпка 2 - Връзка index.html с CSS & JS

Нека свържем нашия CSS и JavaScript да се index.html. Поставете ги вътре . Започваме с CSS файл:

тогава последната версия на jQuery от хранилището на Google AJAX Libraries:

и накрая нашето JavaScript файл :

Сега нашият трябва да изглежда така:

Нека поставим кодовете за нашите бутони вътре маркер:

Обяснение: Създадохме параграфи за два бутона, всеки от които е обвит с с хипервръзка вътре. Ред 1: клас = "button1" се поставя вътре , докато ред 2: клас = "button1" се поставя вътре

 .button1 / * Бутон само с CSS * / background: url (images / download.png) 0 0; височина: 65px; ширина: 580px; езика: блок;  .button1: hover / * mouseOver * / фон: url (images / download.png) 0 65px;  

 .button2, .button2 a фон: url (images / download.png) 0 -65px; височина: 65px; ширина: 580px; езика: блок;  .button2 a фонова позиция: 0 0;  

 $ (document) .ready (функция () $ ('. button2 a'). hover (функция () $ (this) .stop (). animate ('opacity': '0', 500); , функция () $ (this) .stop (). animate ('opacity': '1', 500);););