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

    1) Пользуемся поиском по форуму! Зачастую информация может находиться не по разделу!

    2) Раздел ИНФО-продуктов относительно новый, но имеем уже более 3000 высококлассных материалов (пользуемся сортировкой по прификсам).

    3) И самое важное, КАК КАЧАТЬ БЕЗ ОГРАНИЧЕНИЙ, вся информация находится по этой ссылке КУПИТЬ VIP

    4) Временная акция, получи +5 постов за вступление в нашу группу "Вконтакте" Более подробно ТУТ

    5) Веди активную жизнь на форуме и получай рубли на личный счёт!

    Скрыть объявление
  2. На нашем форуме Null-Prog действует серьёзное правило касательно размещения материалов!

    ДЛЯ РЕЛИЗЁРОВ: категорически запрещается выкладка материалов на файлообменники типа Deposit, letitbit и другие, требующие просмотров рекламы, обрезающие скорость и тд. Нарушителям, первые 2 раза предупреждения, далее БАН. Тему по этому поводу можно посмотреть ТУТ

    Скрыть объявление
  3. В тестовом режиме на нашем форуме открыт онлайн конструктор сайтов. Вы можете попробовать создать свой сайт у НАС, интуитивно понятный интерфейс, переведёт на 95%, быстрый экспорт проекта, от вас только перетаскивать элементы и вставить в них необходимый текст!

    Все вопросы ТУТ

    Скрыть объявление

  4. Скрыть объявление
  5. Уважаемые форумчане, открывается новый раздел форума, посвящённый ремонту и эксплуатации автомобилей. Просмотреть его можно ТУТ

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

    Напоминаю, сообщения в разделе АВТО не учитываются, общение не ограничено.

    Скрыть объявление
  6. Объявляется набор Модераторов на различные раздел форума, свои заявки можно оставлять в ЭТОМ разделе, перед оставлением заявки рекомендуется ознакомиться с ПРАВИЛАМИ для модераторов.

ХАК Кнопки

Тема в разделе "Скрипты", создана пользователем Sam Jack, 6 июн 2015.

  1. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.635
    Симпатии:
    4.510
    [​IMG]

    Кнопка "Подписаться" как на загрузка-ап для uCв нужное место ставим
    Код:
    "Verdana"><table style="width: 240px; height: 32px; background-image: url(http://webmaster-profi.ru/scripts_ucoz/b-top-body_knopka_podpicatci.png); background-attachment: initial; background-origin: initial; background-clip: initial; border-collapse: collapse; background-position: 0% 0%; background-repeat: repeat repeat; " width="" align=""><tbody><tr><td><a class="b-top-body" style="margin:-2px -2px -2px -2px;" target="_blank" href="#"> 
      <div style="padding:9px 6px 0px 6px;float:left;"> 
      <img align="absmiddle" src="http://webmaster-profi.ru/scripts_ucoz/transmit_blue_knopka_podpicatci.png"> 
      <span style="color: rgb(255, 255, 255);">Подписаться 
      </span></div> 
      <div style="padding:3px 6px 0px 9px;float:right;"> 
      <div id="hours"><span style="color: rgb(255, 255, 255);">Дата: $DATE$<br>Время: $TIME$</span></div> 
      </div> 
      </a></td></tr></tbody></table> 
     
  2. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.635
    Симпатии:
    4.510
    [​IMG]
    Красивые INPUTS кнопки в голубых тонах.
    В CSS:
    Код:
    /*--------------------- INPUTS start ---------------------*/ 
      input[type=submit], input[type=reset], input[type=button] { 
      padding: 0 6px;background: #74c3e9 url(/.s/t/788/7.gif) repeat-x bottom left;color: #fff;border: 1px solid #45afe1;border-radius: 5px;cursor: pointer;font: 11px 'Arial'; 
      } 
      input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover { 
      background: #eaf4f5 url(/.s/t/788/7.gif) repeat-x top left;color: #1a4e89;border: 1px solid #d2e3eb; 
      } 
      input[type=submit]:active, input[type=reset]:active, input[type=button]:active {} 
      input[type=text], input[type=password], textarea, select { 
      padding: 1px 3px;background: #fff;border: 1px solid #abadb3;color: #848484;font: 11px 'Arial'; 
      } 
      textarea {} 
      #mchatBtn, input.codeButtons, input.button {padding-left: 0;padding-right: 0;} 
      .queryField {width: auto !important;} 
      .commFl {width: 100%;} 
      #frM58 span {display: inline-block;} 
      /*--------------------- INPUTS end ---------------------*/
     
  3. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.635
    Симпатии:
    4.510
    [​IMG]
    Такой эффект легко сделать на CSS, но для кроссбраузерности воспользуемся JQuery. Подпрыгивающие кнопки на JQuery – это просто ссылки, плавно поднимающиеся при наведении. Можно сделать подъем резким, чтобы кнопки как будто реально подпрыгивали. Сначала создадим плагин, который будет отнимать margin-top в CSS при наведении. Код плагина будет коротким. Нужно учесть что ссылки, не имеющие в стиле атрибут display:block не подскакивают.
    Установка:
    1 шаг. Это ставим в Верхнюю часть сайта:
    Код
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    2 шаг. Это ставим в нужное место:
    Код
    <ul class="links">
    <li><a href="/" class="up">Facebook</a></li>
    <li><a href="/" class="up">Twitter</a></li>
    <li><a href="/" class="up">Google Plus</a></li>
    </ul>

    3 шаг. Это ставим в Нижнюю часть сайта:
    Код
    <script type="text/javascript">
    $.fn.upHover = function () {
    return $(this).hover(
    function(){$(this).stop().animate({marginTop: '-10px'}, 200)},
    function(){$(this).stop().animate({marginTop: '0px'}, 200)}
    );
    }

    $(".up").upHover(); </script>


    4 шаг. Это ставим в CSS:
    Код
    .links {margin:0;padding:0;height:50px;line-height:50px;width:350px}
    .links li {margin:0;padding:0;list-style: none; float:left;margin-right:20px}
    .up {padding:20px;display:block}
     
  4. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.635
    Симпатии:
    4.510
    [​IMG]
    Очень удобная кнопка "вверх", осуществлённая по принципу кнопки с ВконтакПо мере прокрутки страницы справа постепенно появляется кнопка. При наведении на правую крайнюю область страницы весь блок кнопки становится кликабельным и клик по ней плавно отмотает страницу в самый верх.
    Установка:
    Этот код вставьте в самый низ нижней части сайта:
    Код:
    <style> 
      #up_button a { 
      text-decoration:none; 
      color:#000; 
      } 
    
      #up_button:hover { 
      background-color:rgba(100, 149, 237, 0.5); 
      box-shadow:0px -5px 10px #777; 
      } 
      </style> 
    
      <div style="padding:30px 5px 0px 5px;position:fixed;top:0px;right:0px;z-index:999;width:70px;height:100%;opacity:0" id="up_button"><center><a href="javascript://">▲ Вверх</a></center></div> 
      
      <script> 
      var as = $('#up_button'); 
      as.click(function() { 
      $(document).scrollTo(0, 500); 
      }); 
      document.onscroll = function() { 
      var apolst = '0.'+$('body').scrollTop(); 
      if(apolst.length == 5) { 
      as.stop().fadeTo(500, apolst); 
      } else if(apolst.length == 4 || apolst.length == 3) { 
      as.stop().fadeTo(500, 0); 
      }; 
      }; 
      </script>
     
  5. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.635
    Симпатии:
    4.510
    [​IMG]
    Кнопка оставить отзыв png
    Код
    <a href="адрес куда будет вести ссылка(или доп.-поле)" target="_blank"><img src="http://webmaster-profi.ru/scripts_ucoz/button.png" border="0" title="текст подсказки" width="height="></a>
     
  6. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.635
    Симпатии:
    4.510
    [​IMG]
    Код самой кнопки ставим по месту желаемого расположения
    Код
    "Verdana"><a href="#" class="buybtn">
    <span class="buybtn-text">
    Купить
    </span>
    <span class="buybtn-hidden-text">
    150$
    </span>
    <span class="buybtn-image">
    <span></span>
    </span>
    </a>

    А этот код ставим в css стили вашего сайта
    Код:
    "Verdana">.wrap{ <br> margin:100px 30%; <br> } <br><br> a { <br> color: #FFFFFF; <br> text-decoration: none; <br> } <br> .buybtn { <br> -moz-transition: all 0.3s linear 0s; <br> background: -moz-linear-gradient(center top , #FF8400 0%, #FF6600 100%) repeat scroll 0 0 transparent; <br> border: 1px solid #FF5A00; <br> border-radius: 5px 5px 5px 5px; <br> box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2); <br> clear: both; <br> display: inline-block; <br> float: left; <br> font-family: Arial,sans-serif; <br> height: 45px; <br> margin: 10px 0; <br> overflow: hidden; <br> padding-left: 20px; <br> padding-right: 65px; <br> position: relative; <br> } <br> .buybtn-text { <br> -moz-transition: all 0.2s linear 0s; <br> color: #6E1D08; <br> display: block; <br> font-size: 18px; <br> padding-top: 10px; <br> text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3); <br> white-space: nowrap; <br> } <br> .buybtn-hidden-text { <br> -moz-transition: width 0.3s linear 0s; <br> background: none repeat scroll 0 0 #6E1D08; <br> box-shadow: -1px 0 1px rgba(255, 255, 255, 0.4), 1px 1px 2px rgba(0, 0, 0, 0.2) inset; <br> color: #FFFFFF; <br> font-size: 18px; <br> height: 100%; <br> line-height: 42px; <br> overflow: hidden; <br> position: absolute; <br> right: 52px; <br> text-align: left; <br> text-indent: 17px; <br> text-shadow: 0 -1px 1px #363F49; <br> text-transform: uppercase; <br> top: 0; <br> white-space: nowrap; <br> width: 0; <br> } <br> .buybtn-image { <br> border-left: 1px solid #FF5A00; <br> box-shadow: 1px 0 1px rgba(255, 255, 255, 0.4) inset; <br> height: 100%; <br> position: absolute; <br> right: 0; <br> top: 0; <br> width: 52px; <br> } <br> .buybtn-image span { <br> -moz-transition: all 0.3s linear 0s; <br> background: url("http://webmaster-profi.ru/scripts_ucoz/cart.png") no-repeat scroll 75% 55% transparent; <br> height: 38px; <br> left: 50%; <br> margin: -20px 0 0 -20px; <br> opacity: 0.7; <br> position: absolute; <br> top: 50%; <br> width: 38px; <br> } <br> .buybtn:hover .buybtn-text { <br> color: #FFFFFF; <br> text-shadow: 0 1px 1px #5D81AB; <br> } <br> .buybtn:hover .buybtn-hidden-text { <br> width: 100px; <br> } <br> .buybtn:hover .buybtn-image span { <br> opacity: 1; <br> } <br> .buybtn:active { <br> background: none repeat scroll 0 0 #FF5A00; <br> }
     
  7. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.635
    Симпатии:
    4.510
    [​IMG]
    Код кнопки:
    Код
    <div align="center">
    <a href="/" class="download_button_mg" style="margin:5px;" rel="nofollow">
    <div id="downtitle" style="position:absolute; top:10px; left:85px;">Скачать через MediaGet</div>
    <div id="downinfo" style="position:absolute; top:25px; left:85px;" align="left"><b>Размер:</b>$FILE_SIZE$<br><b>Скачали:</b> $LOADS$ раз(а)</div>
    </a>
    </div>


    В CSS вставляем:
    Код
    #downinfo {font-family: Cuprum;font-size: 12px;font-style: italic;color: #fff;text-shadow: 1px 1px rgba(0,0,0,.13);}
    #downtitle {font-family: Cuprum;font-size: 16px;font-style: italic;color: #fff;text-shadow: 1px 1px rgba(0,0,0,.13);}

    .download_button {display:block; width:256px; height:60px; background:url('/button_down.png') no-repeat; position:relative; color:#fff; text-shadow:0px 1px 1px #7cb51a;}
    .download_button:hover {background-position:0 -62px; color:#fff; text-shadow:0px 1px 1px #49c2e0;}

    .download_button_mg {display:block; width:256px; height:60px; background:url('/download_button_mg.png') no-repeat; position:relative; color:#fff; text-shadow:0px 1px 1px #7cb51a;}
    .download_button_mg:hover {background-position:0 -63px; color:#fff; text-shadow:0px 1px 1px #49c2e0;}
     

    Вложения:

    • 996_buttons.rar
      996_buttons.rar
      Размер файла:
      72,3 КБ
      Просмотров:
      4
  8. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.635
    Симпатии:
    4.510
    [​IMG]
    Установка:
    На страницу комментариев и материалов каталога файлов вставляем за место кнопки скачать:
    Код:
    <table width="100%" cellpadding="1" cellspacing="1"> 
      <tbody><tr> 
      <td width="50%" align="left" valign="top"> 
      <a href="$FILE_URL$" class="downl" target="_blank" title="Размер: $FILE_SIZE$"> ↓ Скачать файл </a> 
      <a title="Скачан: $LOADS$ раз(а)" class="downl1"><span style="color: #ffffff;font-size: 10pt;"><b>$LOADS$</b></span></a> 
       <a href="$RFILE_URL$" class="downl" target="_blank"> ↓ Скачать файл </a> 
      <a title="Скачан: $LOADS$ раз(а)" class="downl1"><span style="color: #ffffff;font-size: 10pt;">$LOADS$</span></a>  
      </td> 
      <td width="50%" align="right" valign="top"> 
      <a style="text-decoration: none;" class="downl" href="javascript://" id="golike" onclick="$.get('/load/0-1-5-$ID$-3',function(data) {if($(data).text().indexOf('уже оценивали')>-1) _uWnd.alert('Вы уже оценивали данный материал!','Ошибка!',{w:270,h:60,t:8000}); else {_uWnd.alert('Вы успешно оценили!','Успешно!',{w:270,h:60,t:8000})};});">♥ Мне нравится</a> 
      <a class="downl1"><span style="color: #ffffff;font-size: 10pt;"><b>$RATED$</b></span></a>  
      </td> 
      </tr></tbody></table> 
      <style>a.downl {text-decoration:none;background:none repeat scroll 0 0 #A00200;color:#ffffff;font-family:Verdana;font-size:10px;font-weight:bold;margin:0 0px 0;padding:4px;border-radius: 3px 3px 3px 3px;} 
      a.downl1 {text-decoration:none;background:none repeat scroll 0 0 #424D69;color:#ffffff;font-family:Verdana;font-size:10px;font-weight:bold;margin:0 0px 0;padding:4px;border-radius: 3px 3px 3px 3px;} 
      </style>
    Внимание: Удалите старый вид рейтинга если он установлен на этой странице, в противном случае кнопка мне нравится не будет работать.
     
  9. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.635
    Симпатии:
    4.510
    [​IMG]
    Красивые 3D кнопки для сайта.
    Установка:
    1 шаг. Это ставим в нужное место:
    Код
    "Verdana"><a href="http://webmaster-profi.ru/" class="button">Скачать</a>
    <a href="http://webmaster-profi.ru/" class="button green">Скачать</a>
    <a href="http://webmaster-profi.ru/" class="button blue">Скачать</a>
    <a href="http://webmaster-profi.ru/" class="button yellow">Скачать</a><br>
    <a href="http://webmaster-profi.ru/" class="button red">Скачать</a>
    <a href="http://webmaster-profi.ru/" class="button purple">Скачать</a>
    <a href="http://webmaster-profi.ru/" class="button grey">Скачать</a>
    <a href="http://webmaster-profi.ru/" class="button black">Скачать</a>

    2 шаг. Это ставим с CSS:
    Код:
    "Verdana">.button { 
      margin: 0 0 5px; 
      height: 28px; 
      line-height: 28px; 
      padding: 0 12px; 
      font-size: 11px; 
      font-weight: bold; 
      color: #555555; 
      text-shadow: 0 1px #fff; 
      border-width: 1px 1px 0; 
      border-style: solid; 
      border-color: #cecece #bababa #a8a8a8; 
      border-radius: 3px 3px 2px 2px; 
      outline: none; 
      -webkit-box-sizing: content-box; 
      -moz-box-sizing: content-box; 
      box-sizing: content-box; 
      display: inline-block; 
      vertical-align: baseline; 
      zoom: 1; 
      *display: inline; 
      *vertical-align: auto; 
      background-color: #dfdfdf; 
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1f1f1), color-stop(70%, #dfdfdf), color-stop(100%, #dadada)); 
      background-image: -webkit-linear-gradient(top, #f1f1f1 0%, #dfdfdf 70%, #dadada 100%); 
      background-image: -moz-linear-gradient(top, #f1f1f1 0%, #dfdfdf 70%, #dadada 100%); 
      background-image: -ms-linear-gradient(top, #f1f1f1 0%, #dfdfdf 70%, #dadada 100%); 
      background-image: -o-linear-gradient(top, #f1f1f1 0%, #dfdfdf 70%, #dadada 100%); 
      background-image: linear-gradient(top, #f1f1f1 0%, #dfdfdf 70%, #dadada 100%); 
      -webkit-box-shadow: inset 0 1px #fdfdfd, inset 0 0 0 1px #eaeaea, 0 1px #a8a8a8, 0 3px #bbbbbb, 0 4px #a8a8a8, 0 5px 2px rgba(0, 0, 0, 0.25); 
      box-shadow: inset 0 1px #fdfdfd, inset 0 0 0 1px #eaeaea, 0 1px #a8a8a8, 0 3px #bbbbbb, 0 4px #a8a8a8, 0 5px 2px rgba(0, 0, 0, 0.25); 
      } 
      .button:hover, .button:active { 
      text-decoration: none; 
      background: #dfdfdf; 
      border-top-color: #c9c9c9; 
      } 
      .button:active, .button.green:active, .button.blue:active, .button.yellow:active, .button.red:active, .button.purple:active, .button.grey:active, .button.black:active { 
      vertical-align: -5px; 
      margin-bottom: 0; 
      padding: 1px 13px 0; 
      border-width: 0; 
      border-radius: 3px; 
      -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white; 
      box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white; 
      } 
      .button.green { 
      color: #465f25; 
      text-shadow: 0 1px #d9f3b5; 
      border-color: #91ce5e #7ab04b #5e903f; 
      background-color: #94d362; 
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c0eb85), color-stop(70%, #94d362), color-stop(100%, #8ed258)); 
      background-image: -webkit-linear-gradient(top, #c0eb85 0%, #94d362 70%, #8ed258 100%); 
      background-image: -moz-linear-gradient(top, #c0eb85 0%, #94d362 70%, #8ed258 100%); 
      background-image: -ms-linear-gradient(top, #c0eb85 0%, #94d362 70%, #8ed258 100%); 
      background-image: -o-linear-gradient(top, #c0eb85 0%, #94d362 70%, #8ed258 100%); 
      background-image: linear-gradient(top, #c0eb85 0%, #94d362 70%, #8ed258 100%); 
      -webkit-box-shadow: inset 0 1px #d9f3b5, inset 0 0 0 1px #b1e095, 0 1px #5e903f, 0 3px #6da445, 0 4px #5e903f, 0 5px 2px rgba(0, 0, 0, 0.4); 
      box-shadow: inset 0 1px #d9f3b5, inset 0 0 0 1px #b1e095, 0 1px #5e903f, 0 3px #6da445, 0 4px #5e903f, 0 5px 2px rgba(0, 0, 0, 0.4); 
      } 
      .button.green:hover, .button.green:active { 
      background: #94d362; 
      border-top-color: #82bd53; 
      } 
      .button.blue { 
      color: #236277; 
      text-shadow: 0 1px #c2ecf9; 
      border-color: #6fbad1 #3fa3c0 #3583ab; 
      background-color: #61cdf3; 
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9be5fa), color-stop(70%, #61cdf3), color-stop(100%, #5fbde8)); 
      background-image: -webkit-linear-gradient(top, #9be5fa 0%, #61cdf3 70%, #5fbde8 100%); 
      background-image: -moz-linear-gradient(top, #9be5fa 0%, #61cdf3 70%, #5fbde8 100%); 
      background-image: -ms-linear-gradient(top, #9be5fa 0%, #61cdf3 70%, #5fbde8 100%); 
      background-image: -o-linear-gradient(top, #9be5fa 0%, #61cdf3 70%, #5fbde8 100%); 
      background-image: linear-gradient(top, #9be5fa 0%, #61cdf3 70%, #5fbde8 100%); 
      -webkit-box-shadow: inset 0 1px #c5f0fd, inset 0 0 0 1px #8ad1eb, 0 1px #3583ab, 0 3px #3f9db8, 0 4px #3583ab, 0 5px 2px rgba(0, 0, 0, 0.4); 
      box-shadow: inset 0 1px #c5f0fd, inset 0 0 0 1px #8ad1eb, 0 1px #3583ab, 0 3px #3f9db8, 0 4px #3583ab, 0 5px 2px rgba(0, 0, 0, 0.4); 
      } 
      .button.blue:hover, .button.blue:active { 
      background: #61cdf3; 
      border-top-color: #3eaac9; 
      } 
      .button.yellow { 
      color: #7e4f27; 
      text-shadow: 0 1px #f2e294; 
      border-color: #efb443 #d9a238 #a57825; 
      background-color: #f6ba49; 
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffdd67), color-stop(70%, #f6ba49), color-stop(100%, #f4b03e)); 
      background-image: -webkit-linear-gradient(top, #ffdd67 0%, #f6ba49 70%, #f4b03e 100%); 
      background-image: -moz-linear-gradient(top, #ffdd67 0%, #f6ba49 70%, #f4b03e 100%); 
      background-image: -ms-linear-gradient(top, #ffdd67 0%, #f6ba49 70%, #f4b03e 100%); 
      background-image: -o-linear-gradient(top, #ffdd67 0%, #f6ba49 70%, #f4b03e 100%); 
      background-image: linear-gradient(top, #ffdd67 0%, #f6ba49 70%, #f4b03e 100%); 
      -webkit-box-shadow: inset 0 1px #ffeca6, inset 0 0 0 1px #e5c96d, 0 1px #a57825, 0 3px #c08a28, 0 4px #a57825, 0 5px 2px rgba(0, 0, 0, 0.4); 
      box-shadow: inset 0 1px #ffeca6, inset 0 0 0 1px #e5c96d, 0 1px #a57825, 0 3px #c08a28, 0 4px #a57825, 0 5px 2px rgba(0, 0, 0, 0.4); 
      } 
      .button.yellow:hover, .button.yellow:active { 
      background: #f6ba49; 
      border-top-color: #e5ab3d; 
      } 
      .button.red { 
      color: #702526; 
      text-shadow: 0 1px #ea8f99; 
      border-color: #e1696e #c85252 #a03a38; 
      background-color: #e46565; 
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eb9093), color-stop(70%, #e46565), color-stop(100%, #e25755)); 
      background-image: -webkit-linear-gradient(top, #eb9093 0%, #e46565 70%, #e25755 100%); 
      background-image: -moz-linear-gradient(top, #eb9093 0%, #e46565 70%, #e25755 100%); 
      background-image: -ms-linear-gradient(top, #eb9093 0%, #e46565 70%, #e25755 100%); 
      background-image: -o-linear-gradient(top, #eb9093 0%, #e46565 70%, #e25755 100%); 
      background-image: linear-gradient(top, #eb9093 0%, #e46565 70%, #e25755 100%); 
      -webkit-box-shadow: inset 0 1px #dcaaaa, inset 0 0 0 1px #df777a, 0 1px #a03a38, 0 3px #be4b49, 0 4px #a03a38, 0 5px 2px rgba(0, 0, 0, 0.4); 
      box-shadow: inset 0 1px #dcaaaa, inset 0 0 0 1px #df777a, 0 1px #a03a38, 0 3px #be4b49, 0 4px #a03a38, 0 5px 2px rgba(0, 0, 0, 0.4); 
      } 
      .button.red:hover, .button.red:active { 
      background: #e46565; 
      border-top-color: #d0585a; 
      } 
      .button.purple { 
      color: #714667; 
      text-shadow: 0 1px #f2c5e6; 
      border-color: #e391d0 #c27ab3 #8a517d; 
      background-color: #e393d3; 
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1bee3), color-stop(70%, #e393d3), color-stop(100%, #df8dce)); 
      background-image: -webkit-linear-gradient(top, #f1bee3 0%, #e393d3 70%, #df8dce 100%); 
      background-image: -moz-linear-gradient(top, #f1bee3 0%, #e393d3 70%, #df8dce 100%); 
      background-image: -ms-linear-gradient(top, #f1bee3 0%, #e393d3 70%, #df8dce 100%); 
      background-image: -o-linear-gradient(top, #f1bee3 0%, #e393d3 70%, #df8dce 100%); 
      background-image: linear-gradient(top, #f1bee3 0%, #e393d3 70%, #df8dce 100%); 
      -webkit-box-shadow: inset 0 1px #f5d6ee, inset 0 0 0 1px #dcaacf, 0 1px #8a517d, 0 3px #a7619a, 0 4px #8a517d, 0 5px 2px rgba(0, 0, 0, 0.4); 
      box-shadow: inset 0 1px #f5d6ee, inset 0 0 0 1px #dcaacf, 0 1px #8a517d, 0 3px #a7619a, 0 4px #8a517d, 0 5px 2px rgba(0, 0, 0, 0.4); 
      } 
      .button.purple:hover, .button.purple:active { 
      background: #e393d3; 
      border-top-color: #c87eb8; 
      } 
      .button.grey { 
      color: #41505b; 
      text-shadow: 0 1px #c2d0db; 
      border-color: #909eab #768791 #50606e; 
      background-color: #90aabd; 
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bccbd7), color-stop(70%, #90aabd), color-stop(100%, #83a0b4)); 
      background-image: -webkit-linear-gradient(top, #bccbd7 0%, #90aabd 70%, #83a0b4 100%); 
      background-image: -moz-linear-gradient(top, #bccbd7 0%, #90aabd 70%, #83a0b4 100%); 
      background-image: -ms-linear-gradient(top, #bccbd7 0%, #90aabd 70%, #83a0b4 100%); 
      background-image: -o-linear-gradient(top, #bccbd7 0%, #90aabd 70%, #83a0b4 100%); 
      background-image: linear-gradient(top, #bccbd7 0%, #90aabd 70%, #83a0b4 100%); 
      -webkit-box-shadow: inset 0 1px #d0dae2, inset 0 0 0 1px #99b5ce, 0 1px #50606e, 0 3px #627786, 0 4px #50606e, 0 5px 2px rgba(0, 0, 0, 0.4); 
      box-shadow: inset 0 1px #d0dae2, inset 0 0 0 1px #99b5ce, 0 1px #50606e, 0 3px #627786, 0 4px #50606e, 0 5px 2px rgba(0, 0, 0, 0.4); 
      } 
      .button.grey:hover, .button.grey:active { 
      background: #90aabd; 
      border-top-color: #8495a0; 
      } 
      .button.black { 
      color: #f1f1f1; 
      text-shadow: 0 1px #111; 
      border-color: #505050 #414141 #2c2c2c; 
      background-color: #4f4f4f; 
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #696969), color-stop(70%, #4f4f4f), color-stop(100%, #3c3c3c)); 
      background-image: -webkit-linear-gradient(top, #696969 0%, #4f4f4f 70%, #3c3c3c 100%); 
      background-image: -moz-linear-gradient(top, #696969 0%, #4f4f4f 70%, #3c3c3c 100%); 
      background-image: -ms-linear-gradient(top, #696969 0%, #4f4f4f 70%, #3c3c3c 100%); 
      background-image: -o-linear-gradient(top, #696969 0%, #4f4f4f 70%, #3c3c3c 100%); 
      background-image: linear-gradient(top, #696969 0%, #4f4f4f 70%, #3c3c3c 100%); 
      -webkit-box-shadow: inset 0 1px #828282, inset 0 0 0 1px #555555, 0 1px #2c2c2c, 0 3px #444444, 0 4px #2c2c2c, 0 5px 2px rgba(0, 0, 0, 0.4); 
      box-shadow: inset 0 1px #828282, inset 0 0 0 1px #555555, 0 1px #2c2c2c, 0 3px #444444, 0 4px #2c2c2c, 0 5px 2px rgba(0, 0, 0, 0.4); 
      } 
      .button.black:hover, .button.black:active { 
      background: #4f4f4f; 
      border-top-color: #494949; 
      }
     

    Вложения:

  10. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.635
    Симпатии:
    4.510
    [​IMG]
    Красивая кнопка скачать в виде переключателя для ucoz.
    Приступим к установки.
    В (CSS)
    Код
    /* -------Кнопка скачать------- */
    a.sprite {
    display:block;
    width:109px;
    height:40px;
    background:url("http://webmaster-profi.ru/scripts_ucoz/c7f0c59ccc2f.png");
    text-decoration:none;
    }
    a.sprite:hover {
    background-position:0 -40px;
    }
    /* ------------------------- */


    В "Страница материала и комментариев к нему", и вставляем код в удобное для вас место.
    Код
    <a href="$FILE_URL$" class="sprite" title="Скачать: $ENTRY_TITLE$"></a>
    <a href="$RFILE_URL$" target="_blank" class="sprite" title="Скачать: $ENTRY_TITLE$"></a>
     
  11. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.635
    Симпатии:
    4.510
    [​IMG]
    Установка
    В странице материалов и комментариев к нему вставляем по месту такой код:
    Код:
    <div class="mtr_btns"> 
      <style type="text/css"> 
      .mtr_btns { 
      margin-left: 10px; 
      height: 42px; 
      overflow: hidden; 
      } 
      </style> 
      <center><a href="$FILE_URL$" class="mtr_dwnld" onmouseover="$(this).stop().animate({marginTop:'0px'},100)" onmouseout="$(this).stop().animate({marginTop:'4px'},100)" style="margin-top: 0px; "> </div><!--</s>--></a> $FILE_SIZE$)</center> 
      <center><a href="$RFILE_URL$" target="_blank" class="mtr_dwnld" onmouseover="$(this).stop().animate({marginTop:'0px'},100)" onmouseout="$(this).stop().animate({marginTop:'4px'},100)" style="margin-top: 0px; "> <!--<s5224>--><!--</s>--></a></center> 
      <style type="text/css"> 
      .mtr_dwnld { 
      float: left; 
      margin-right: 5px; 
      margin-top: 4px; 
      background: url('http://webmaster-profi.ru/scripts_ucoz/buttons_material.png') 0 0; 
      width: 173px; 
      height: 38px; 
      cursor: pointer; 
      } 
      </style> 
      </div>
     

Поделиться этой страницей

iHax Community
Рейтинг@Mail.ru Яндекс.Метрика мониторинг сайтов
Форум программного обеспечения/
Загрузка...