Красивый эффект для кнопки

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

Все это будет сделано с помощью нашего любимого jQuery,

Первым делом нам необходимо поместить этот код между тегами .

Code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {  
  $('#rss a')  
  .append('<span class="hover" id="rsscolor"/>').each(function () {
  var $span = $('> span.hover', this).css('opacity', 0);
  $(this).hover(function () {
  $span.stop().fadeTo(800, 1);
  }, function () {
  $span.stop().fadeTo(800, 0);
  });
  });
});
</script>


Тут все стандартно - подключаем фреймворк и функцию.

Далее придаем немного стиля:

Code

body{
background:#000;}
#rss{
width:300px;
height:225px;
margin:auto;
position:relative;
display:block;}
#rss a{
  background-image:url(rss_bw-300x225.png);
  background-repeat: no-repeat;
  position:relative;
display:block;
width:300px;
height:225px;
}
  #rss span.hover{
  width:300px;
height:225px;
  background-image:url(rss-300x225.png);
  background-repeat: no-repeat;
  position:relative;
display:block;}


И в конце вставляем таким образом само изображение:

Code
<div id="rss"><a href="#" title="fancy rss"></a></div>


Получился довольно неплохой эффект, который при полете фантазии можно легко приделать к чему угодно!

Спасибо за внимание!

  • FalleN

  • 2792

  • 1

  • 212

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

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

Для добавления вы должны авторизироваться!