Как создать анимированную кнопку для сайта

Здравствуйте, уважаемые друзья. Сегодня я расскажу про два способа, которые помогут вам создать анимированную кнопку для ваших сайтов. Вы наверняка, видели много таких кнопок и нажимали на них. Так вот, на своём блоге я периодически рекомендую партнёрские курсы и тренинги, только те, что испробовал сам. И разумеется я интересуюсь статистикой, а статистика говорит, что на привлекательные кнопки люди нажимают на 48% чаще, чем на обычные ссылки.

По началу, когда я поставил цели Яндекс.Метрики на кнопки, я скорей хотел видеть сколько было переходов (именно по кнопке), но со временем я обратил внимание, что ссылки в статье по кликабельности в разы отличаются от анимированных кнопок. В общем, на такие кнопки кликают гораздо чаще.

И поэтому я советую использовать такие кнопки на Ваших сайтах и блогах. К тому же делаются они вовсе не трудно.

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

Как создать анимированную кнопку с помощью графических заготовок

Если у вас есть навыки работы с графическими редакторами, — это только приветствуется. Если нет, берите готовые шаблоны, которые я подготовил для вас.

И вот видеоурок по первому способу:

Итак, открываем изображение кнопки в бесплатном онлайн-редакторе Pixlr Edition. Хотя, вы можете работать в любом удобно для Вас редакторе.

Для этого достаточно выбрать нужный файл и нажать кнопку «Открыть». Если вы используете свои изображения, помните они должны быть в формате PNG (то есть поддерживать прозрачность).

Теперь нужно увеличить размер холста. А заодно и узнаем исходный размер изображения. Это нам понадобится в дальнейшем.

Исходный размер 300х90 надо увеличить по вертикали, и получится 300х200. Если, что-то будет лишнее, после уберём.

Увеличив холст по вертикали, приступаем к дублированию слоя с кнопкой. Для этого достаточно просто перетащить имеющийся слой на иконку «Новый слой».

Далее нужно сместить одно изображение ниже. Для этого используйте клавиши управления курсором. Изображения должны быть строго одно под другим. Иначе в дальнейшем получится немного не тот эффект на который Вы рассчитываете.

Эффектов, которые Вы можете сделать огромное множество, это и изменение градиента, цвета, формы, прозрачности и так далее. Всё зависит от вашей фантазии.

В качестве примера, мы просто добавим призыв к действию на кнопке.

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

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

В качестве примера я уменьшу непрозрачность надписи. Вы же можете сделать свой эффект. Воспользуйтесь своей фантазией и в Вас получится нечто оригинальное.

После того, как две кнопки готовы, нужно убрать всё лишнее. Для этого используйте инструмент «Обрезка».

Все, изображение готово, сохраняем в формате PNG.

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

Вот теперь в статье, где вы захотите вставить кнопку, надо добавить вот такой код:

<div class="t_c"><a class="button_red" href="ВАША ССЫЛКА" target="_blank" rel="nofollow"></a></div>

Обратите внимание на класс ссылки в данном коде class="button_red". Для разных кнопок, данный класс нужно будет менять и в статье и в таблице стилей. Но это делается только один раз, в дальнейшем при вставке кнопки, достаточно будет вставлять вышеуказанный  код.

Далее открываем раздел «Внешний вид» > «Редактор» > «Таблица стилей»,

где в самом конце добавляем следующие стили.

/*Кнопка информация о курсе*/
.button_red {
display: block;
position: relative;
width: 271px;/*Ширина кнопки*/
height: 90px;/*50% высоты изображения*/
padding: 0px;
margin: 10px auto;
line-height: 94px;/*смещение по вертикали*/
border: 0px;
background: url(http://test.1zaicev.ru/wp-content/uploads/2014/06/buttons.png) 0 0 no-repeat;}/*путь к вашей кнопке*/

.button_red:hover { background-position: 0 -92px;}/*смещение фона*/ 
.t_c { text-align: center !important}

Комментариями отмечены те параметры, которые вам придётся менять в зависимости от размеров кнопки. Тут главное понять, что если изображение по высоте 180рх, вы указываете высоту (height) 90px. И с этим значением работаете, плюс минус несколько пикселей в параметрах line-height и background-position для улучшения эффекта.

Итак, первый способ готов, скачивайте архив с заготовками.

Как сделать анимированную кнопку с помощью CSS

Данный способ позволяет создавать красивые анимированные кнопки для сайтов, только на основе стилей CSS. Делать это можно и самому, но легче использовать онлайн генераторы для создания кнопок на CSS. Я пользуюсь вот этим сервисом CSSButton. Классный, многофункциональный сервис, но англоязычный и для новичка сложноват. Поэтому, для подготовки статьи я поискал в Интернете другие генераторы кнопок. В результате чего, я отобрал несколько сервисов, которые вы можете опробовать:

CSS3 Button Generator

Sciweavers

CSS Button Generator

CSS3 Linear Gradient Buttons Generator

Генератор кнопок CSS

Принцип создания анимированных кнопок на CSS заключается в следующем, есть три положения. 1 — Исходное, 2 — при наведении курсора и 3 — при нажатии кнопки мышки. В каких-то сервисах есть все три положения, а в каких-то только два. Но главное, чтобы вас устраивал конечный результат.

Видеоурок по второму способу создания анимированных кнопок:

В качестве примера рассмотрим сервис CSS3 ButtonGenerator, в нём как раз всего два положения. Но эффекты смотрятся очень хорошо. Кого смущает отсутствие русского языка, используйте последний генератор, приведённый в списке.

Итак, начинаем.

Открываем главную страницу сервиса. Изначально перед вами будет предварительный вид кнопки и инструменты позволяющие сделать всевозможные настройки.

Первый раздел Text&Font, отвечает за текст, размер шрифта, цвет шрифта, тень шрифта. Именно здесь вы пишете надпись на кнопке, задаёте неё размер, цвет, и тень.

Следующий раздел Background, относится к фону. Здесь можно указать цвет кнопки, градиент кнопки, размер кнопки и смешение фона.

Раздел Border, отвечает за настройки тени и бордюров кнопки. Вы без труда сможете настроить толщину бордюра, закругление углов, и тень кнопки.

Следующий раздел Transform, отвечает за трансформацию кнопки, — это повороты, смещения, искажение.

Следующий раздел Transition, отвечает за плавность анимации. Данные настройки Вы устанавливаете в соответствие с Вашей кнопкой. Действия могут быть применены как ко всей кнопке, так и к отдельным слоям.

Попробовав, несколько раз, поэкспериментировать с настройками и вы поймете, что к чему.

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

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

Когда готова кнопка, можно переходить к установке кнопки в статью. Для этого в нужном мести статьи устанавливаем код:

<a href="#" class="button">Текст ссылки</a>

Примечание: текст ссылки и будет надписью на кнопке. То есть надпись указанная в генераторе, — это лишь для предварительного просмотра.

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

Вот наш пример:

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

На этом сегодня всё, желаю Вам удачи. И всегда рад видеть на страницах своего блога.

С уважением, Максим Зайцев.

P.S. А вот пример анимированной кнопки на тренинг Дениса Герасимова «Настройка холодного трафика для продвижения партнёрских ссылок». Я прошёл этот тренинг и рекомендую его всем — это без лишнего преувеличения, реальный способ заработка на партнёрских программах. Чем я в принципе и занимаюсь.

Тренинг Дениса Герасимова