Главная » 2013 » Сентябрь » 11 » Кнопки "СКАЧАТЬ" и "ДЕМО" в двух вариантах (Скрипты для ucoz)
11.09.2013, 15:08

Кнопки "СКАЧАТЬ" и "ДЕМО" в двух вариантах



После беседы с модератором, в комментариях своего прошлого материала (прочитать можно в блоке "Новые комментарии", если Вы конечно внимательные пользователи biggrin ), решил сделать кнопочку для ДЕМО, потом и для скачивания. Сделать их не долго, но пришла мысль еще и на спрайтах соорудить.
Вот в этом материале, представляю оба варианта кнопочек.

1. Просто картинки в формате gif, с анимацией. HTML код, включает в себя сами картинки и контейнер, в котором они расположены:
Код

  <div id="container">
  <img src="img/demo.gif" title="Смотреть демо">
  <img src="img/download.gif" title="Скачать файл/архив">
  </div>  
  


2. Кнопочки с использованием стилей CSS и спрайтов (Sprite Sheet — это одно большое изображение мелких графических элементов сайта, например иконок или кнопок. И благодаря CSS можно отображать каждый элемент отдельно):
Код

  <div id="container">  
  <span class="sprite_css"><a class="demo" title="Смотреть демо" target="_blank" href="#"></a></span>
  <span class="sprite_css"><a class="download" title="Скачать файл/архив" target="_blank" href="#"></a></span>
</div>  
  


2. Стили CSS для обоих вариантов кнопок:
Код

#container {overflow: hidden; margin: 10px auto; width:300px; height:100%;}
#container img { width:130px; height:50px; margin: 8px;} /* -- Только для gif -- */

.sprite_css a {
  display:block;  
  width:130px;
  height:50px;
  background:url(../img/button_sprite.png);
  background-repeat:no-repeat;
  margin: 10px;
}
   
.sprite_css a.demo {background-position:0px 0px; float:left;}
.sprite_css a:hover.demo {background-position:0px -50px;}
.sprite_css a.download {background-position:0px -100px; float:right;}
.sprite_css a:hover.download {background-position:0px -150px;}  
  




Смотрим, качаем и Всем удачи!
Материал взят с сайта infoscript.ru
Теги: Скачать Кнопки "СКАЧАТЬ" и "ДЕМО" в двух вариантах
Скачать "Кнопки "СКАЧАТЬ" и "ДЕМО" в двух вариантах"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: Skaiman
Категория: Скрипты uCoz | Просмотров: 1383 | Добавил: Skaiman | Рейтинг: 0.0/0 |
Теги: Скачать, варианта, двух, демо, кнопки
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]