Красивая анимированная кнопка для сайта – создание и установка за 10 минут.

образец кнопкиПосвящается тем, кто спрашивал, как сделать красивую кнопку на сайте, меняющуюся при наведении курсора. Только не в формате флэш, как например здесь, а обычными растровыми картинками GIF или PNG. На моем сайте примерами могут послужить кнопочка “получать” – в  верху сайдбара, которая служит для подписки на статьи, а также мышь, в самом низу сайдбара, несущая в себе ссылку на страничку подписки на рассылку сайта. В первом случае для кнопки использованы 2 картинки PNG, во втором – 2 картинки Gif.

орущая мышь

Я сам не могу назвать себя экспертом по HTML или JavaScript, поэтому когда нужно в коде какие-то не слишком тривиальные вещи наладить, стараюсь обращаться к людям более сведущим, либо ищу подходящие готовые решения в сети.
По поводу этих меняющихся кнопок один знакомый программист говорил мне – существует много решений, какое из них правильное, сказать трудно. Зависит от многих факторов.

Я использовал 2 метода и оба из них работают. Они очень разные, какой из них более верный, я не знаю. Если кто знает – подсказывайте.
Способ №1.
1 – Заливаем картинки кнопок на хостинг – картинка №1 курсор вне кнопки, картинка №2 курсор на кнопке.
2 – Устанавливаем в то место, где должна быть кнопка следующий код:

1
2
<a href="ссылка куда ведет кнопкаl" target="_blank"><br />
<img onmouseover="this.src='ссылка на картинку №2 (курсор на кнопке)';" onmouseout="this.src='ссылка на картинку №1 (курсор вне кнопки)';" src="ссылка на картинку №1 (курсор вне кнопки)" alt="" /></a>

3 – Подставляем в код соответствующие нашей кнопке ссылки.
Таким образом у меня на сайте сделана мышь.

Способ №2.
Все тоже самое, только в шаге №2 другой код, код вот этого скрипта:

1
2
3
4
<a href="ссылка куда ведет кнопкаl" target="_blank"><img id="b1" src="ссылка на картинку №1 (курсор вне кнопки)" alt="" border="0" /></a><br />
<script type="text/javascript">// <![CDATA[
      jQuery(document).ready(function(){  jQuery('#b1').mouseenter(function() {  jQuery(this).attr('src',  'ссылка на картинку №2 (курсор на кнопке)');  });  jQuery('#b1').mouseleave(function() {  jQuery(this).attr('src',  'ссылка на картинку №1 (курсор вне кнопки)');  });  });
// ]]></script>

Идентификатор id=”” может быть произвольным.

Да и еще, немаловажная вещь, с самими картинками – красивыми кнопками можно разобраться вообще без графических программ! Есть отличные онлайн сервисы, с которыми вы легко наделаете кучу всевозможных кнопок. Я выбираю вот эти два  http://vorabota.ru/zdes-mozhno-samostoyatelno-sozdat-knopki-dlya-sayta-v-graficheskom-onlayn-generatore.html и http://cooltext.com. Скопируйте адреса в браузер и попадете куда надо.

В помощь вам небольшое видео про сервисы красивых кнопок и установку меняющихся при наведении курсора кнопок на сайт.

Оставляйте пожалуйста комментарии и вопросы!  Жмите пожалуйста на кнопки социальных сетей!

с уважением,  Agor

Непременно поделитесь с друзьями!

Метки , , , . Закладка постоянная ссылка.

8 Комментариев к статье: Красивая анимированная кнопка для сайта – создание и установка за 10 минут.

  1. Отлично! Большое спасибо, забираю оба кода. Как я понял, первый способ более простой и не навороченный, а во втором видно, что используются какие-то скрипты и не понятно что за параметр id? Наверно используется еще для каких-то дальнейших действий… Ну нам пока и первого хватит. Отдельное спасибо за ресурсы – действительно, проще иногда не изобретать велосипед, а воспользоваться готовым :)

  2. Са говорит:

    Спасибо! Как раз размышлял как сделать такую кнопочку!

  3. Павел говорит:

    Красиво,замечательно.Но стоит ли эта красота,такого большого туда.Может вы Agor переубедите.

  4. Надежда говорит:

    Спасибо, что быстро среагировал на просьбу трудящихся =)

  5. Клара говорит:

    Спасибо, у меня пока нет своего сайта, но страничку в закладки поместила, удачи Вам!!!

  6. Agor говорит:

    Я если честно не догнал о чем вы?

  7. Альфия говорит:

    Спасибо. Вы очень помогли начинающему чайнику!

  8. Спасибо большое!

Оставить комментарий

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

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