Макеты
  • EXMO affiliate program
  • Выгодный курс обмена валюты

  • Здесь может быть Ваш текст или баннер номер №3...
    Пишите Свободно

NEW: 
Стильные кнопки "Скачать" + "Демо" Для Ucoz

Описание Web разработки: Пожалуй, один из самых эффектных вариантов. Помимо яркого оформления, эта кнопка отличается не менее зрелищной анимацией, появляющейся при наведении курсора. Красная CSS3 кнопка "Скачать" + "Демо" с анимацией. Красные анимированные кнопки "Скачать" и "Демо" для uCoz. ... Еще одна разновидность яркой, заметной и стильной кнопки. На кнопке отображается размер скачиваемого файла.
Установка: в ПУ - Дизайн - Управление дизайном (шаблоны) - Каталог файлов - Страница материала и комментариев к нему в нужное место вставить скрипт кнопки:

Код кнопки "Скачать":
Код
  

  <div class="buttons-post-check">  
  <a href="$FILE_URL$" rel="nofollow"><div class="post-download">  
  <img class="post-download-img colorbox-manual" src="http://uguide.ru/download/img/post-download-img.png"><i>Скачать</i><span>бесплатно с сервера</span></div></a>  

  


Код кнопки "Демо":

Код
  

  <a href="тут_ваш_url" rel="nofollow"><div class="post-demo-button">  
  <img class="post-demo-button-img colorbox-manual" src="http://uguide.ru/download/img/post-demo-img.png"><i>Демо</i><span>демонстрация</span></div></a>  
  </div>  

  


А этот css-код нужно вставить в конец шаблона Дизайн - Управление дизайном(CSS):

Код
  

  /*Button POST DOWNLOAD*/  
  .buttons-post-check {margin: 30px auto 20px auto; width: 40%; height: 60px; display:table;}  
  .buttons-post-check a { display:table-cell; text-decoration:none;}  
  .buttons-post-check a:hover {text-decoration:none;}  

.post-download{text-decoration:none; text-align:center; position:relative; outline:none; cursor:pointer; margin:0 auto;  
width:175px;  
height:50px;  
padding:0 15px;
border:solid 3px #ffffff;
-webkit-border-radius:20px;  
-moz-border-radius:20px;
border-radius: 20px;
font:27px tahoma, Geneva, sans-serif;
font-weight:bold;
color:#ffffff;
background-color:#00bbcc;
background-image: -moz-linear-gradient(top, #00bbcc 0%, #3287ab 100%);
background-image: -webkit-linear-gradient(top, #00bbcc 0%, #3287ab 100%);
background-image: -o-linear-gradient(top, #00bbcc 0%, #3287ab 100%);
background-image: -ms-linear-gradient(top, #00bbcc 0% ,#3287ab 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3287ab', endColorstr='#3287ab',GradientType=0 );
background-image: linear-gradient(top, #00bbcc 0% ,#3287ab 100%);
-webkit-box-shadow:0px 0px 3px #bababa; -moz-box-shadow: 0px 0px 3px #bababa; box-shadow:0px 0px 3px #bababa;

}  

  .post-download:hover{  
  width:175px;  
  height:50px;  
padding:0 15px;
border:solid 3px #ffffff;
-webkit-border-radius:20px;  
-moz-border-radius:20px;
border-radius: 20px;
font:27px tahoma, Geneva, sans-serif;
font-weight:bold;
color:#ffffff;
background-color:#00bbcc;
background-image: -moz-linear-gradient(top, #00bbcc 0%, #3287ab 100%);
background-image: -webkit-linear-gradient(top, #00bbcc 0%, #3287ab 100%);
background-image: -o-linear-gradient(top, #00bbcc 0%, #3287ab 100%);
background-image: -ms-linear-gradient(top, #00bbcc 0% ,#3287ab 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3287ab', endColorstr='#3287ab',GradientType=0 );
background-image: linear-gradient(top, #00bbcc 0% ,#3287ab 100%);
-webkit-box-shadow:0px 0px 3px #bababa; -moz-box-shadow: 0px 0px 3px #bababa; box-shadow:0px 0px 3px #bababa;

text-shadow: 0px 0px 20px #ffffff;
filter: dropshadow(color=#ffffff, offx=0, offy=0);}  

.post-download:active{  
width:175px;  
height:50px;  
padding:0 15px;
border:solid 3px #ffffff;
-webkit-border-radius:20px;  
-moz-border-radius:20px;
border-radius: 20px;
font:27px tahoma, Geneva, sans-serif;
font-weight:bold;
color:#ffffff;
background-color:#3287ab;
background-image: -moz-linear-gradient(top, #3287ab 0%, #00bbcc 100%);
background-image: -webkit-linear-gradient(top, #3287ab 0%, #00bbcc 100%);
background-image: -o-linear-gradient(top, #3287ab 0%, #00bbcc 100%);
background-image: -ms-linear-gradient(top, #3287ab 0% ,#00bbcc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00bbcc', endColorstr='#00bbcc',GradientType=0 );
background-image: linear-gradient(top, #3287ab 0% ,#00bbcc 100%);
-webkit-box-shadow:0px 0px 3px #bababa; -moz-box-shadow: 0px 0px 3px #bababa; box-shadow:0px 0px 3px #bababa;

text-shadow: 0px 0px 20px #ffffff;
filter: dropshadow(color=#ffffff, offx=0, offy=0);}  

.post-download-img {position: absolute; left: 8px; top: -24px;}  
  .post-download span {position: absolute; top: 30px; left: 78px; font-size: 10px; font-weight: normal;}  
  .post-download i {font:normal 27px tahoma; margin: 0 0 0 48px;}  

  /*Button DEMO*/  

  .post-demo-button {position:relative; outline:none; cursor:pointer; margin:0 auto;  
  text-decoration:none;
  text-align:center;
  width: 175px;  
  height:50px;  
padding:0px 15px;
border:solid 3px #ffffff;
-webkit-border-radius:20px;  
-moz-border-radius:20px;
border-radius: 20px;
font:27px tahoma, Geneva, sans-serif;
font-weight:bold;
color:#ffffff;
background-color:#f3b442;
background-image: -moz-linear-gradient(top, #f3b442 0%, #de5608 100%);
background-image: -webkit-linear-gradient(top, #f3b442 0%, #de5608 100%);
background-image: -o-linear-gradient(top, #f3b442 0%, #de5608 100%);
background-image: -ms-linear-gradient(top, #f3b442 0% ,#de5608 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#de5608', endColorstr='#de5608',GradientType=0 );
background-image: linear-gradient(top, #f3b442 0% ,#de5608 100%);
-webkit-box-shadow:0px 0px 3px #bababa; -moz-box-shadow: 0px 0px 3px #bababa; box-shadow:0px 0px 3px #bababa;
  }  

  .post-demo-button:hover{  
width:175px;  
height:50px;  
padding:0 15px;
border:solid 3px #ffffff;
-webkit-border-radius:20px;  
-moz-border-radius:20px;
border-radius: 20px;
font:27px tahoma, Geneva, sans-serif;
font-weight:bold;
color:#ffffff;
background-color:#f3b442;
background-image: -moz-linear-gradient(top, #f3b442 0%, #de5608 100%);
background-image: -webkit-linear-gradient(top, #f3b442 0%, #de5608 100%);
background-image: -o-linear-gradient(top, #f3b442 0%, #de5608 100%);
background-image: -ms-linear-gradient(top, #f3b442 0% ,#de5608 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#de5608', endColorstr='#de5608',GradientType=0 );
background-image: linear-gradient(top, #f3b442 0% ,#de5608 100%);
-webkit-box-shadow:0px 0px 3px #bababa; -moz-box-shadow: 0px 0px 3px #bababa; box-shadow:0px 0px 3px #bababa;

text-shadow: 0px 0px 20px #ffffff;
filter: dropshadow(color=#ffffff, offx=0, offy=0);  
  }  

  .post-demo-button:active{  
  width:175px;  
height:50px;  
padding:0 15px;
border:solid 3px #ffffff;
-webkit-border-radius:20px;  
-moz-border-radius:20px;
border-radius: 20px;
font:27px tahoma, Geneva, sans-serif;
font-weight:bold;
color:#ffffff;
background-color:#de5608;
background-image: -moz-linear-gradient(top, #de5608 0%, #f3b442 100%);
background-image: -webkit-linear-gradient(top, #de5608 0%, #f3b442 100%);
background-image: -o-linear-gradient(top, #de5608 0%, #f3b442 100%);
background-image: -ms-linear-gradient(top, #de5608 0% ,#f3b442 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3b442', endColorstr='#f3b442',GradientType=0 );
background-image: linear-gradient(top, #de5608 0% ,#f3b442 100%);
-webkit-box-shadow:0px 0px 3px #bababa; -moz-box-shadow: 0px 0px 3px #bababa; box-shadow:0px 0px 3px #bababa;

text-shadow: 0px 0px 20px #ffffff;
filter: dropshadow(color=#ffffff, offx=0, offy=0);  
  }  

  .post-demo-button-img {position: absolute; left: 8px; top: -24px;}  
  .post-demo-button span {position: absolute; top: 30px; left: 92px; font-size: 10px; font-weight: normal;}  
  .post-demo-button i {font:normal 27px tahoma; margin: 0 0 0 48px;}  

  



Автор/Источник: не установлен автором Релиза или тупо источник неизвестен:)



Выгодный курс обмена валюты

 Вы собираетесь бесплатно 
Cкачать/Download 
 "Стильные кнопки "Скачать" + "Демо" Для Ucoz" 
 Ссылки на скачивания 

  Download

Размер:
22.4 Kb


Категория: Ucoz | Добавил: ♔Ďęŕჳҝuŭ♔ | Теги: скачать, стильные, uCoz, демо, кнопки Стильные кнопки "Скачать" + "Демо" Для Ucoz скачать, стильные, uCoz, демо, кнопки

Похожие новости:

Имя *:
Email *: