Проста кнопка Заклик до дії з CSS & jQuery

Заклик до дії у веб-дизайні - це термін, який використовується для елементів веб-сторінки, які вимагають дії від користувача (натискання, зависання тощо). Сьогодні ми збираємося створити ефективну і приголомшливу кнопку виклику до дії з деякими CSS і jQuery що привертає увагу користувача і спонукає його натиснути .

Протягом цього підручника ми роз'яснимо кожен рядок використовуваного коду з деталями і сподіваємося, що він буде корисним для вас. Використовується наступний навчальний посібник HTML, CSS і jQuery з рівнем складності Початківець і приблизний час завершення 45 хвилин.

Завантажити навчальний посібник (.zip) або Демо

Частина I - Створення зображення кнопки

У цій першій частині ми покажемо, як створювати необхідні зображення за допомогою Photoshop у простих простих кроках. Давайте розпочнемо.

Створіть новий документ Photoshop шириною 580px і висотою 130px. Йти до Переглянути > Нове керівництво потім встановіть Орієнтація до Горизонтальний і Позиція до 65px.

Створіть більше посібників; кожна для верхньої, нижньої, лівої і правої. Після того, як ви закінчите, на вашому зображенні повинні бути наведені нижче настанови:

Направляючі з'являються щоб розколювати ваше полотно у верхню та нижню половину. Виберіть Закруглені прямокутні інструменти, встановити Радіус до 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 зі сховища бібліотек AJAX Google:

і нарешті наше Файл JavaScript :

Тепер наші має виглядати приблизно так:

Давайте вставимо коди для наших кнопок тег:

Пояснення: Ми створили абзаци для двох кнопок, кожна з яких обгорнута з гіперпосиланням всередині. Рядок 1: class = "button1" знаходиться всередині , а лінія 2: class = "button1" знаходиться всередині

 .button1 / * Кнопка тільки з CSS * / background: url (images / download.png) 0 0; висота: 65px; ширина: 580px; дисплей: блок;  .button1: hover / * mouseOver * / background: url (images / download.png) 0 65px;  

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

 $ (document) .ready (function () $ ('. button2 a'). hover (function () $ (this) .stop (). animate ('opacity': '0', 500); , function () $ (this) .stop (). animate ('opacity': '1', 500);););