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

как создать кнопку

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

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

Нарисуем кнопку в Photoshop’е

Сверстаем кнопку с помощью HTML/CSS

Добавим эффект плавности с помощью фреймворка JQuery

автор

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

Меня зовут Кириленко Евгений. Я верстальщик, блоггер и начинающий веб-дизайнер из Киева.
По образованию я Механик, но это мне не мешает уже два года работать фрилансером по специальности верстальщик.

Сайт: http://W-blog.org.ua – «Блог где много букв»

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

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

Шаг 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*/
}&amp;amp;lt;/p&amp;amp;gt;
&amp;amp;lt;p&amp;amp;gt;.button a:hover {
background-position:0 50px;
}

Шаг 3: JavaScript/jQuery

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

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

<script type="text/javascript" src="//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);},&amp;amp;lt;/p&amp;amp;gt;
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. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Хотите научиться создавать шикарные дизайны сайтов?

Получите бесплатную пошаговую обучающую систему по веб-дизайну

Получить

Метки: , ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (46)

  1. Зарифа

    Благодарю!!!!!

  2. Виталий

    Спасибо, очень интересно!
    Как-то было бы правильнее , если бы Вы разместили в конце статьи результат работы — саму кнопку…

    • Виктор Рог

      В начале статьи есть ссылка на «демо», т.е. на саму кнопку. Смотрите внимательнее.

  3. Виктор

    Спосбо , очень полезная статья.

  4. Коралловый клуб

    Кнопочку для примера, думаю надо было сделать с более веселой раскраской.

    • Виктор Рог

      Возможно я с Вами и согласен, но статья авторская, поэтому…

    • Евгений Кириленко

      Да вы правы, нужно было кнопку сделать более яркой. Но у меня было целью донести технические моменты по созданной кнопки, а вы уже на практике можете кнопку и по ярче сделать :)

  5. Валентин

    Спасибо, ребята!
    Хорошая статья и отличный сайт

  6. alex

    привет.
    выучить английский для того чтоб научиться делать кнопку? Не проще бы авторам использовать русскоязычный фотошоп. или по крайней мере как другие делают (рус\англ)
    спасибо

  7. Олег

    Спасибо!!! Прикольно и круто!!!

  8. Дмитрий

    Спасибо.

  9. Николай

    Спасибо!
    Отличный урок!

  10. Павел

    Спасибо!

  11. Алексей

    Супер! Отличная статья. Так держать!

  12. Никита

    Урок полезный, но как то сложно. Обычно использую onmouseover/onmouseout и резкий переход. Но стоит наверно научиться и jQuery…

  13. Очень хорошо!

    Очень хорошо!Анимация на яваскрипте!!!

  14. Арман

    да красивий трюк ;)

  15. Дмитрий

    А в IE 6,7,8 работает ?

  16. Людмила

    урок интересный

  17. Roman

    Спасибо! Отличная статья и урок!

  18. Михаил

    Спасибо!Очень захватывающая вещь.

  19. Profruit

    Полная ерунда.
    Ряд 05 — .animate({ ‘opacity’: 0}, 500);},&amp;lt;/p&amp;gt;
    border-width: 0; делаем на border: none;
    text-indent:-9999px; — Google подумает, что вы spammer.
    luigimontanez.com/2010/stop-using-text-indent-css-trick/
    За чем в демо находим:
    .button a:active {
    background-position:0 0px;
    }
    «подключаем нашу кнопку,-50px это высота на которую мы опускаем нашу кнопку вниз*/» А почему это делаем, так и не стало понятно.
    Зачем p, когда и spam годится?

  20. Сергей Петрович

    Или это ошибка, которую никто не заметил, или я что-то не понимаю:
    При создании папки norm надо:
    -перетаскиваем все слои (кроме layer 0)
    после этого на скриншоте д.б.:
    -norm
    -layer 0
    и только потом: ПКМ — Duplicate.
    и после этого порекомендовать студенту поднять слой norm наверх

  21. анатолий

    Cпасибо за очень ценную информацию.

  22. Ильдар

    Мне урок понравился, да и другие уроки очень интересные. Спасибо.

  23. Виктор Васильевич

    Не очень понятно написано. Действительно можно было бы в двух вариантах рус\eng и по доходчивей. «Жмем на папку «hover», а затем нижней кнопкой клавиатуры» — что это за кнопка такая «нижняя», мне не понятно.
    Демо пример в кодировке utf-8, зачем?

  24. Виктор Васильевич

    Выделяю папку «hover» и перетаскиваю на нижнее полотно, в ответ получаю «Невозможно выполнить запрос поскольку исходный и целевой документы совпадают.»

  25. Иммагинатор

    Спасибо за урок!

  26. lifephysic

    Замечательно объясняешь. Использую этот пост для создания своего сайта

  27. Эдуард

    Сделал горизонтальное меню из 6-ти кнопок.
    Неплохо!
    Спасибо!

  28. sacha

    красивая цацка, но не эффективная….((( а если javascript отключен в браузере пользователя? мертвая цветная кнопка? на сегодняшний день это уже старый прием, есть более современные, обходящие этот момент, лучше бы этими приемами поделились…

    • Vyacheslav

      Да, Ваша правда, у многих посетителей не подключен yavascript, особенно у людей пожилого возраста. А если сайт создаётся в основном, для этой категории?
      Sachа, Вы если знаете, поделитесь. А то получается:-»Я знаю лучше, но вам не скажу.»

  29. Vyacheslav

    Я то же сделал горизонтальное меню, естественно уменьшив размеры. Мешает пробел сверху. Как его можно убрать?
    Урок нужный, а главное, своевременный.
    Спасибо!

  30. kolyta

    Евгений, вы умница!!! Я хоть и совсем плохо знаю HTML и тому подобное, но ваш урок прошел на ура. Немного поковырявшись с папками в Фотошопе все удалось сделать.

  31. Андрюха

    Здравствуйте! А как сделать, чтобы текст ссылки всегда оставался? В CSS строку закомментировал, текст ссылки есть но при наведении курсора на кнопку он исчезает. Как сделать, чтобы он оставался?

    • Andrey Bernacki

      Удалить строку, которая отвечает за сдвиг текста:
      text-indent:-9999px;

      • Андрюха

        Я закоментировал ее — не помогает. Также добавлял правило для buttom a:hover {opasity: 1;} присваивал его и разным тегам в которые помещал текст внутри анкера — текст больше не исчезает НО при наведении мыши он моргает! Почему??

        • Andrey Bernacki

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

  32. Андрюха

    Подскажите плиззз!!!

  33. Андрюха

    Текст нужен потому, что у пользователей IE могут быть отключены картинки.

  34. Петр

    Огромное спасибо за статью, благодаря вам удалось создать кнопку, но возник вопрос, как разместить две разные анимационные кнопки на одной странице?
    ps Можно ли прижать кнопку вплотную к верху страницы?(Пробовал с различными topmargin, но ничего не вышло).

  35. Вася

    Возможно я туплю… но
    Подскажите пожалуйста как теперь мне эту кнопку разместить в Joomla???
    Очень надо!
    Автору огромное спасибо!
    Статья очень полезная и лаконичная все понятно и без воды!!!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree