Создание анимационной кнопки.

От автора: В этом уроке мы будем создавать анимационную кнопку, точную кнопку, которая будет реагировать на наведение курсора мышки. А с помощью фреймворка JQuery заставим нашу кнопку плавно изменять цвет при наведении курсора на кнопку. Таким образом, мы заставляем пользователя нажать на кнопку (заставляем его действовать).

Давайте перечислим все наши действия, которые мы будем выполнять в уроке:

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Шаг 1: Photoshop

Наша кнопка будет размерами 200х50px. Но мы будем рисовать сразу две кнопки, для двух различных состояний, поэтому высота полотна у нас будет 100px (дальше вы поймете, почему мы две кнопки рисуем).

Давайте для начала зайдем в Photoshop и создадим полотно (Ctrl + N) размерами 200х100px.

Чтобы нам было проще рисовать кнопки, мы разделим полотно специальными линиями. Чтобы их включить, жмем Ctrl + R или View> Rulers.

Создаем форму кнопки. На панели инструментов выбираем инструмент Rounded Rectangle Tool, а в панели параметров (вверху) поставим округлость углов 8px.

Когда у нас выбран и настроен для работы инструмент Rounded Rectangle Tool, создаем нашу кнопку путем зажимания ЛКМ в верхнем углу полотна и тянем к правому углу.

Оформляем кнопку. Для этого нужно открыть меню с настройками стилей, кликнуть 2 раза ЛКМ на слой с формой кнопки.

Добавим градиент. Для этого нажмите на Gradient Overlay. Затем нажмите на градиент для открытия окна редактирования градиента, чтобы выбрать нужные нам цвета.

Добавляем внутреннее свечение. Это даст кнопки тонкие белые границы. Жмем Inner Glow, ставим непрозрачность на 100% и меняем цвет свечения на белый (# FFFFFF), а размер свечение в 3px.

Добавляем темно зеленую 1px границу нашей кнопке. Для этого заходим в Stroke и ставим размер 1px, позиция inside (рамка будет внутренней), а цвет рамки темно зеленый – (#60694f).

Пишем текст на нашей кнопке, например «отправить». Для этого на панели инструментов выбираем инструмент Horizontal Type Tool, а в панели параметров ставим шрифт Arial, стиль шрифта Bold (жирный), размер шрифта 24px, сглаживание Sharp, затем нажмите на любом месте полотна и напишите свой текст.

Оформляем текст кнопки. Для этого опять открываем меню с настройками стилей (Layer Styles), кликаем 2 раза ЛКМ на слой с текстом. И делаем градиент, как это мы делали, только на этот раз для левой стороны цвет – #505548, а для правой – #9ca388. У вас должно получиться вот так:

Теперь добавим к нашему тексту внутреннюю тень. Заходим в Inner shadow. Ставим угол наклона тени 90 градусов, расстояние в 1px, размер ставим 2px, цвет внутренней тени черный (#000000) и помутнения (Opacity) на 75%.

Добавим к тексту немножко внешней тени. Нажимаем на Drop Shadow и делаем цвет тени светло-зеленого цвета (#dde4cf). Ставим помутнения на 100%, угол тени 90 градусов, расстояние 1px и размер в 2px (равно как и во внутренней тени).

Создаем изображение кнопки для состояния нover

Hover – состояние кнопки когда пользователь помещает над кнопкой курсор.
У нас уже есть изображения кнопки для нормального состояния, теперь мы создадим изображение для состояния, когда курсор на кнопке.

Мы все наши слои поместим в папку с названием «norm» (изображение нормального состояния кнопки), потом папку «norm» копируемо и переименовуем в «hover» (изображение активного состояния кнопки).

Создаем папку «norm», нажимаем (Ctr + G) или кнопку в виде папки, называем ее «norm» и перетаскиваем все наши слои в папку.

Теперь копируемо папку «norm», нажимаем по ней ПКМ (правый курсор мыши) и жмем Duplicate group, новую папку называем «hover».

Жмем на папку «hover», а затем нижней кнопкой клавиатуры или инструментом Move Tool (V) опускайте кнопку Hover в нижнюю часть холста, как это на скриншоте показано. Кнопки нужно стыковать краями. Для того чтобы это лучше сделать, можете увеличить изображение инструментом Zoom Tool (Z).

Меняем настройки слоев в папке Hover

Заходим в папку «hover», дважды щелкнув на слой формы кнопки, чтобы вызвать меню Layer Styles, затем заходим в настройки Gradient overlay и настраиваем градиентную заливку. Левой стороне – цвет #656664, а правой – #959691.

Дважды щелкните на слой с текстом в папке Hover, чтобы открыть меню Layer Styles. Во вкладке Drop shadow меняем цвета теней на серый цвет (#cdcfcd).

Последний штрих, который мы добавим – это градиент для текста. Заходим в Gradient overlay и в левой стороне меняем цвет на #f4f3f3, а для правой – (#f5f5f5). Смотрим скриншот конечного варианты кнопки:

Сохраняем нашу кнопку File>Save for Web & Devices в формате .gif. Можно и в других форматах .png или .jpg, но я сохранил как button.gif

Шаг 2: HTML/CSS

Перед тем как приступить к выполнению второго шага, давайте создадим папку button и в ней сохраним нашу кнопку button.gif. Затем заходим в наш любимый редактор Dreamweaver (можно другой редактор использовать, это уже зависит от вашего вкуса) и создаем файл index.html и styles.css

Подключаем файл с нашими будущими стилями styles.css к файлу index.html. Для этого нужно между тэгами вставить вот это код:

<link rel="stylesheet" href="styles.css" type="text/css" media="screen"/>

Заходим в наш index.html и пишем каркас для нашей кнопки. Для этого создаем параграф <p> с классом buttom, а внутри параграфа размещаем нашу ссылку. Смотрим пример:

<p class="button"><a href="#">Отправить</a></p>

Заходим в наш файл styles.css и прописываем настройки для класса .button.
Мы прописываем, как показывать элемент block (блоком), задаем высоту и ширину кнопки, и подключаем фоновое изображение, опускаем ее по высоте на -50px вниз.

.button {
display:block;  /*показывать элемент блоком*/
width:200px;  /*ширина кнопки*/
height:51px;  /*высота кнопки*/
background:url(button.gif) no-repeat 0 -50px;  /*подключаем нашу кнопку,-50px это высота, на которую мы опускаем нашу кнопку вниз*/
}

Теперь пропишем стиль ссылке. Это будет класс .button a.
Ссылка будет показываться как блок, высота и ширина 100%. С помощью класса text-indent убираем текст ссылки за экран.

border-width – толщина границ нашей кнопки. Cтавим 0px.

.button a {
 display:block; /*показывать элемент блоком*/
width:100%; /*ширина кнопки 100%*/
height:100%; /*высота кнопки 100%*/
background:url(button.gif) no-repeat 0 0; /*подключаем нашу кнопку,*/
text-indent:-9999px; /*текст ссылки убираем за экран*/
border-width: 0; /*толщина границ кнопки 0px*/
}

Предоставляем стиль ссылке, которая будет реагировать на курсор мыши. Это будет класс .Button a: hover.

Здесь все просто. background-position – это позиция фона (фоном у нас есть кнопка). Мы его поднимаем на 50px вверх. Таким образом, когда наводится курсор на кнопку, фон поднимается, а у нас снизу кнопка с черным фоном. Вот и вышла простая анимация.

 .button a:hover {
background-position:0 50px;
}

Весь HTML и CSS код кнопки

HTML код:

<p class="button"><a href="#">Отправить</a></p>

CSS код:

.button {
display:block; /*показывать элемент блоком*/
width:200px; /*ширина кнопки*/
height:51px; /*высота кнопки*/
background:url(button.gif) no-repeat 0 -50px; /*подключаем нашу кнопку,-50px это высота на которую мы опускаем нашу кнопку вниз*/
}
.button a {
display:block; /*показывать элемент блоком*/
width:100%; /*ширина кнопки 100%*/
height:100%; /*высота кнопки 100%*/
background:url(button.gif) no-repeat 0 0; /*подключаем нашу кнопку,*/
text-indent:-9999px; /*текст ссылки убираем за экран*/
border-width: 0; /*толщина границ кнопки 0px*/
}</p>
<p>.button a:hover {
background-position:0 50px;
}

Шаг 3: JavaScript/jQuery

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

Для начала давайте подключим наш фреймворк JQuery, к файлу index.html. Будем подключать через google, между тегами <head> </head> прописываем вот этот код:

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

Создаем наш javascript файл в Dreamweaver’и. Называем его javascript.js и сохраняем в папку button. Теперь нужно его присоединить к index.html, для этого между тегами <head> </head> прописываем вот этот код:

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

Заходим в файл javascript.js и запускаем функцию. Когда документ уже будет готов к работе, прописываем следующий код:

$(document).ready(function(){</p>
<p>});

Первое, что нужно сделать, это удалить стиль :hover для класса p.button a, потому что он повлияет на эффект анимации кнопки. Смотрим код:

$('p.button a')
.css({ 'backgroundPosition':'0 0'})

Теперь нам нужно прописать код, который будет отвечать за два этапа анимации. Первая – это когда пользователь наводит курсор мыши на кнопку, а вторая – когда курсор уходит с кнопки.

Элемент .hover будет иметь две функции. Первая будет отвечать за анимацию при наведении, а вторая функция – за анимацию, когда курсор уходит из зоны кнопки. Скорость нашей анимации измеряется в миллисекундах. Я поставил 500мс, мне кажется, при такой скорости кнопка оживает, но вы можете поэкспериментировать.

  .hover(
       function(){
            $(this)
             .stop()
             .animate({ 'opacity': 0}, 500);},</p>
function(){
            $(this)
              .stop()
              .animate({'opacity': 1 }, 500); }
 );

Весь JavaScript код:

  $(document).ready(function(){
      $('p.button a')
  .css({ 'backgroundPosition':'0 0'})     

  .hover(
       function(){
            $(this)
             .stop()
             .animate({ 'opacity': 0}, 500);},</p>
       function(){
            $(this)
              .stop()
              .animate({'opacity': 1 }, 500); }
 );
});

Вы можете просмотреть результат проделанной работы здесь.

Заключение

Давайте подведем итоги урока: мы нарисовали в Photoshop’е кнопку, а точнее 2 состояния кнопки, затем ее с верстали, с помощью HTML и CSS, а уже потом дали ей эффект плавности с помощью фреймворка jQuery.

Кстати если будите перемещать javascript.js или styles.css файлы, то не забывайте менять пути в index.html, то же самое относится к изображению кнопки.

Успехов Вам в работе!

Если есть вопросы, то пишите их в комментариях. Я обязательно отвечу.

Автор: Кириленко Евгений

E-mail: contact@webformyself.com

Проект webformyself.com – Как создать свой сайт. Основы самостоятельного сайтостроения

"Киберсант-вебмастер" – самый полный курс по сайтостроению в рунете!

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Подписаться

Поделиться

Метки: Javascript&Ajax, анимационные кнопки, как создать кнопку