Простая кнопка «Призыв к действию» с помощью CSS и jQuery

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

В этом уроке мы подробно объясним каждую строку используемого кода и надеемся, что он будет вам полезен. Следующий учебник использует HTML, CSS и jQuery с уровнем сложности начинающий и предполагаемое время завершения 45 минут.

Скачать учебник (.zip) или же демонстрация

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

В этой первой части мы покажем вам, как с помощью Photoshop создавать необходимые изображения с помощью простых простых шагов. Давайте начнем.

Создать новый документ Photoshop с шириной 580 пикселей и высотой 130 пикселей. Идти к Посмотреть > Новое руководство затем установите ориентация в горизонтальный и Позиция до 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 * / background: url (images / download.png) 0 65px;  

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

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