—»     —»   Простая агитирующая кнопка с помощью CSS и jQuery
  Раздел: Кнопки   Нет комментариев  

Простая агитирующая кнопка с помощью CSS и jQuery



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

Простая агитирующая кнопка с помощью CSS и jQuery

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

Скачать архив с демо-файлом.
Внимание! У вас нет прав для просмотра скрытого текста.


Часть 1 – Создаем изображение кнопки

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

Создайте новый документ Photoshop с параметрами ширины в 580 пикселей и высоты 130 пикселей. Далее пройдите в меню View > New Guide и установите ориентацию на горизонтальную и позицию на 65 пикселей.

Простая агитирующая кнопка с помощью CSS и jQuery

Создайте больше линеек сверху, снизу, слева и справа. Ваше изображение должно иметь такие линейки, как только вы закончите:

Простая агитирующая кнопка с помощью CSS и jQuery

Линейки делят ваш холст на верхнюю и нижнюю части. Выберите инструмент создания многоугольника с закругленными углами, установите радиус на 5 пикселей, и нарисуйте прямоугольную фигуру в верхней части холста.

Простая агитирующая кнопка с помощью CSS и jQuery

Примените параметры смешивания слоя Gradient Overlay и Stroke.

Простая агитирующая кнопка с помощью CSS и jQuery
Простая агитирующая кнопка с помощью CSS и jQuery

Теперь выберите инструмент создания текста и впишите слово «Download» в блок, который вы только что нарисовали. Выровняйте текст по центру блока. У вас должно получиться нечто вроде этого:

Простая агитирующая кнопка с помощью CSS и jQuery

Теперь мы закончили создавать первое состояние кнопки скачивания. Теперь давайте создадим группы на палитре слоев и уберем все созданные слои в нее. Дублируйте группу и разместите ее под первой группой на палитре слоев.

Простая агитирующая кнопка с помощью CSS и jQuery

Перейдите к дублированной группе и поменяйте параметры смешивания на Gradient Overlay и Stroke на следующие:

Простая агитирующая кнопка с помощью CSS и jQuery
Простая агитирующая кнопка с помощью CSS и jQuery

Выберите вторую группу и передвиньте все, что в ней находится, на вторую половину холста.

Простая агитирующая кнопка с помощью CSS и jQuery

Вот и все! Мы закончили первый этап разработки. Сохраните свое изображение как download.png и запустите свой любимый редактор кода.

Скачать PSD
Внимание! У вас нет прав для просмотра скрытого текста.


Часть 2 – HTML

Этап 1 – подготовка нужных файлов

Создайте папку и назовите ее по желанию. Допустим, в пределах данной статьи, мы назовем ее jQueryCallToaction. Внутри этой папки создайте файлы:

1. Чистый документ index.html
2. Чистый документ style.css
3. Чистый документ script.js
4. Папку под именем images
5. Переместите файл download.png в папку images.

Этап 2 – знакомим index.html с css и js

Нам нужно соединить наши файлы CSS и JS с index.html. Впишите их внутри 'head' и '/head'. Перейдем к файлу CSS:

<link href="style.css" rel="stylesheet" type="text/css" />

Затем нам потребуется последняя версия jQuery из хранилища библиотек AJAX на Google:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

И наконец, перейдем к файлу javascript:

<script type="text/javascript" src="script.js"></script>

Теперь наша секция 'head' должна выглядеть примерно так:

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

Давайте внесем коды наших кнопок внутрь секции 'body':

<p><a href="#" class="button1"></a></p> <!-- CSS only -->
<p class="button2"><a href="#"></a></p> <!-- CSS + jQuery -->

Пояснение:
Мы создали абзацы для двух кнопок, каждый из которых представляет собой ссылку 'a''/a' облаченную в 'p''/p'.
Строка 1: class="button1" внесен в 'a', а
Строка 2: class="button1" внесен в 'p'

Этап 3.1 – CSS для кнопки

Теперь перейдем к созданию нашей первой кнопки, используя только CSS. Откройте файл style.css и вставьте туда следующий код.

.button1 /* Button with CSS only */
{
    background: url(images/download.png) 0 0;
    height:65px;
    width:580px;
    display:block;
}
.button1:hover /* mouseOver */
{
    background: url(images/download.png) 0 65px;
}

Пояснение:
Наша первая кнопка полностью выполнена при помощи HTML и CSS. CSS-параметр background загружает download.png с указанными данными о ширине, но данные о высоте берутся только наполовину (т.е. 65 писелей), так что будет отображена только одна кнопка. Месторасположение кнопки определяется и управляется последним значением параметра background. Просчитывайте последнее значение параметра background так, чтобы определить начало изображения.

Этап 3.2 – CSS + кнопка на jQuery

Здесь мы будем использовать то же изображение. Различие лишь в том, что наша вторая кнопка будет выполнена при помощи jQuery, за счет чего можно будет достичь более плавного эффекта. Давайте начнем с CSS. Скопируйте этот код в style.css.

.button2, .button2 a {
    background: url(images/download.png) 0 -65px;
    height:65px;
    width:580px;
    display:block;
}
.button2 a {
    background-position: 0 0;
}

Пояснение:
Как .button2 {} так и .button2 a {} используют один и тот же стиль, который будет последним значением в параметре background. .button2 {} отображает кнопку синего цвета, а .button2 a {} отображает кнопку белого цвета.

Простая агитирующая кнопка с помощью CSS и jQuery

Работа с CSS закончена. Мы воспользуемся jQuery для того, чтобы плавно переключать состояние кнопки. Откройте script.js и скопируйте туда следующий код.

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

Пояснение:
$(this) относится к .button2 a, и при наведении курсора, активизируется анимация jQuery, и уровень плотности отображения элемента опускается до нуля, так что мы сможем видеть элемент .button2. И как только курсор мыши отведен в сторону, уровень плотности за 500 миллисекунд сменяется на 1.

Вот и все

Спасибо, что прошли до конца эту статью. Надеемся, что вам понравилось объяснение и вы смогли извлечь урок для себя. Если у вас возникнут какие-либо проблемы, не стесняйтесь, пишите тут в комментариях.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, CSS
Опубликовал Mysterious Master   Прочитано (раз): 11045   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31