Вторник, 22.08.2017, 08:25
Главная  Форум Регистрация Блог RSS
Приветствую Вас, Гость
Главная страница » Помощь Вебмастеру » Категория Разное/Другое » Добавлено [16.01.2014, 14:53]

Анимированная кнопка «Скачать» для uCoz

Войти или Зарегистрироваться [скачивать файлы могут только зарегистрированные пользователи!]

На большинстве сайтов от uCoz постоянно используются модуль каталог
файлов. Нет, ничего плохого в этом нету, но много веб-мастера не
заменяют стандартную надпись скачать файл на что-то более оригинальное и
красивое, как например на анимированную кнопку «Скачать» для сайта
uCoz. Но мы решили исправить это недоразумение и подготовить этот
материал, в котором рассказано и показано как можно изменить эту надпись
на картинку скачать материал в модуле каталог файлов.
  • Читателям на заметку о
    : на сайте компании Web Seo Promo люди часто заказывали услуги по созданию и
    продвижению качественного сайта. Цена, время выполнения работ полностью всех
    устроивали. Рекомендуем!


Установка:


В самый низ вашего css вставляйте:


Код
<br></p><pre tabindex="5001" style="overflow-y: hidden;" class="prettyprint prettyprinted"><code><span class="pun">.</span><span class="pln">button </span><span class="pun">{</span><span class="pln"> <br> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">200px</span><span class="pun">;</span><span class="pln"> <br> margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">40px</span><span class="pln"> </span><span class="lit">0px</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">}</span><span class="pln"> <br> </span><span class="pun">.</span><span class="pln">button a </span><span class="pun">{</span><span class="pln"> <br> display</span><span class="pun">:</span><span class="pln"> block</span><span class="pun">;</span><span class="pln"> <br> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pun">;</span><span class="pln"> <br> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">200px</span><span class="pun">;</span><span class="pln"> <br> </span><span class="com">/*TYPE*/</span><span class="pln"> <br> color</span><span class="pun">:</span><span class="pln"> white</span><span class="pun">;</span><span class="pln"> <br> font</span><span class="pun">:</span><span class="pln"> </span><span class="lit">17px</span><span class="pun">/</span><span class="lit">50px</span><span class="pln"> </span><span class="typ">Helvetica</span><span class="pun">,</span><span class="pln"> </span><span class="typ">Verdana</span><span class="pun">,</span><span class="pln"> sans</span><span class="pun">-</span><span class="pln">serif</span><span class="pun">;</span><span class="pln"> <br> text</span><span class="pun">-</span><span class="pln">decoration</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> <br> text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln"> center</span><span class="pun">;</span><span class="pln"> <br> text</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln"> uppercase</span><span class="pun">;</span><span class="pln"> <br> </span><span class="com">/*GRADIENT*/</span><span class="pln"> <br> background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#299a0b; </span><span class="pln"><br> </span><span class="com">/* Old browsers */</span><span class="pln"> <br> background</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="pln"> </span><span class="com">#299a0b 0%, #299a0b 100%); </span><span class="pln"><br> </span><span class="com">/* FF3.6+ */</span><span class="pln"> <br> background</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">linear</span><span class="pun">,</span><span class="pln"> left top</span><span class="pun">,</span><span class="pln"> left bottom</span><span class="pun">,</span><span class="pln"> color</span><span class="pun">-</span><span class="pln">stop</span><span class="pun">(</span><span class="lit">0</span><span class="pun">%,</span><span class="pln"> </span><span class="com">#299a0b), color-stop(100%, #299a0b)); </span><span class="pln"><br> </span><span class="com">/* Chrome,Safari4+ */</span><span class="pln"> <br> background</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="pln"> </span><span class="com">#299a0b 0%, #299a0b 100%); </span><span class="pln"><br> </span><span class="com">/* Chrome10+,Safari5.1+ */</span><span class="pln"> <br> background</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="pln">o</span><span class="pun">-</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="pln"> </span><span class="com">#299a0b 0%, #299a0b 100%); </span><span class="pln"><br> </span><span class="com">/* Opera 11.10+ */</span><span class="pln"> <br> background</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="pln">ms</span><span class="pun">-</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="pln"> </span><span class="com">#299a0b 0%, #299a0b 100%); </span><span class="pln"><br> </span><span class="com">/* IE10+ */</span><span class="pln"> <br> background</span><span class="pun">:</span><span class="pln"> linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="pln"> </span><span class="com">#299a0b 0%, #299a0b 100%); </span><span class="pln"><br> </span><span class="com">/* W3C */</span><span class="pln"> <br> filter</span><span class="pun">:</span><span class="pln"> progid</span><span class="pun">:</span><span class="typ">DXImageTransform</span><span class="pun">.</span><span class="typ">Microsoft</span><span class="pun">.</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">startColorstr</span><span class="pun">=</span><span class="str">'#299a0b'</span><span class="pun">,</span><span class="pln"> endColorstr</span><span class="pun">=</span><span class="str">'#299a0b'</span><span class="pun">,</span><span class="pln"> </span><span class="typ">GradientType</span><span class="pun">=</span><span class="lit">0</span><span class="pun">);</span><span class="pln"> <br> </span><span class="com">/* IE6-9 */</span><span class="pln"> <br> </span><span class="pun">}</span><span class="pln"> <br> </span><span class="pun">.</span><span class="pln">button a</span><span class="pun">,</span><span class="pln"> </span><span class="pun">.</span><span class="pln">button p </span><span class="pun">{</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> <br> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2px</span><span class="pln"> </span><span class="lit">2px</span><span class="pln"> </span><span class="lit">8px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.2</span><span class="pun">);</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2px</span><span class="pln"> </span><span class="lit">2px</span><span class="pln"> </span><span class="lit">8px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.2</span><span class="pun">);</span><span class="pln"> <br> box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2px</span><span class="pln"> </span><span class="lit">2px</span><span class="pln"> </span><span class="lit">8px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.2</span><span class="pun">);</span><span class="pln"> <br> </span><span class="pun">}</span><span class="pln"> <br> </span><span class="pun">.</span><span class="pln">button p </span><span class="pun">{</span><span class="pln"> <br> background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#222; </span><span class="pln"><br> display</span><span class="pun">:</span><span class="pln"> block</span><span class="pun">;</span><span class="pln"> <br> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">40px</span><span class="pun">;</span><span class="pln"> <br> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">180px</span><span class="pun">;</span><span class="pln"> <br> margin</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="lit">50px</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> <br> </span><span class="com">/*TYPE*/</span><span class="pln"> <br> text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln"> center</span><span class="pun">;</span><span class="pln"> <br> font</span><span class="pun">:</span><span class="pln"> </span><span class="lit">12px</span><span class="pun">/</span><span class="lit">45px</span><span class="pln"> </span><span class="typ">Helvetica</span><span class="pun">,</span><span class="pln"> </span><span class="typ">Verdana</span><span class="pun">,</span><span class="pln"> sans</span><span class="pun">-</span><span class="pln">serif</span><span class="pun">;</span><span class="pln"> <br> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#fff; </span><span class="pln"><br> </span><span class="com">/*POSITION*/</span><span class="pln"> <br> position</span><span class="pun">:</span><span class="pln"> absolute</span><span class="pun">;</span><span class="pln"> <br> z</span><span class="pun">-</span><span class="pln">index</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="lit">1</span><span class="pun">;</span><span class="pln"> <br> </span><span class="com">/*TRANSITION*/</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transition</span><span class="pun">:</span><span class="pln"> margin </span><span class="lit">0.5s</span><span class="pln"> ease</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">transition</span><span class="pun">:</span><span class="pln"> margin </span><span class="lit">0.5s</span><span class="pln"> ease</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">o</span><span class="pun">-</span><span class="pln">transition</span><span class="pun">:</span><span class="pln"> margin </span><span class="lit">0.5s</span><span class="pln"> ease</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">-</span><span class="pln">ms</span><span class="pun">-</span><span class="pln">transition</span><span class="pun">:</span><span class="pln"> margin </span><span class="lit">0.5s</span><span class="pln"> ease</span><span class="pun">;</span><span class="pln"> <br> transition</span><span class="pun">:</span><span class="pln"> margin </span><span class="lit">0.5s</span><span class="pln"> ease</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">}</span><span class="pln"> <br> </span><span class="com">/*HOVER*/</span><span class="pln"> <br> </span><span class="pun">.</span><span class="pln">button</span><span class="pun">:</span><span class="pln">hover </span><span class="pun">.</span><span class="pln">bottom </span><span class="pun">{</span><span class="pln"> <br> margin</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="lit">10px</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">}</span><span class="pln"> <br> </span><span class="pun">.</span><span class="pln">button</span><span class="pun">:</span><span class="pln">hover </span><span class="pun">.</span><span class="pln">top </span><span class="pun">{</span><span class="pln"> <br> margin</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="lit">80px</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> <br> line</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">35px</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">}</span><span class="pln"> <br> </span><span class="com">/*ACTIVE*/</span><span class="pln"> <br> </span><span class="pun">.</span><span class="pln">button a</span><span class="pun">:</span><span class="pln">active </span><span class="pun">{</span><span class="pln"> <br> background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#00b7ea; </span><span class="pln"><br> </span><span class="com">/* Old browsers */</span><span class="pln"> <br> background</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="pln"> </span><span class="com">#00b7ea 36%, #009ec3 100%); </span><span class="pln"><br> </span><span class="com">/* FF3.6+ */</span><span class="pln"> <br> background</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">linear</span><span class="pun">,</span><span class="pln"> left top</span><span class="pun">,</span><span class="pln"> left bottom</span><span class="pun">,</span><span class="pln"> color</span><span class="pun">-</span><span class="pln">stop</span><span class="pun">(</span><span class="lit">36</span><span class="pun">%,</span><span class="pln"> </span><span class="com">#00b7ea), color-stop(100%, #009ec3)); </span><span class="pln"><br> </span><span class="com">/* Chrome,Safari4+ */</span><span class="pln"> <br> background</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="pln"> </span><span class="com">#00b7ea 36%, #009ec3 100%); </span><span class="pln"><br> </span><span class="com">/* Chrome10+,Safari5.1+ */</span><span class="pln"> <br> background</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="pln">o</span><span class="pun">-</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="pln"> </span><span class="com">#00b7ea 36%, #009ec3 100%); </span><span class="pln"><br> </span><span class="com">/* Opera 11.10+ */</span><span class="pln"> <br> background</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="pln">ms</span><span class="pun">-</span><span class="pln">linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="pln"> </span><span class="com">#00b7ea 36%, #009ec3 100%); </span><span class="pln"><br> </span><span class="com">/* IE10+ */</span><span class="pln"> <br> background</span><span class="pun">:</span><span class="pln"> linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">top</span><span class="pun">,</span><span class="pln"> </span><span class="com">#00b7ea 36%, #009ec3 100%); </span><span class="pln"><br> </span><span class="com">/* W3C */</span><span class="pln"> <br> filter</span><span class="pun">:</span><span class="pln"> progid</span><span class="pun">:</span><span class="typ">DXImageTransform</span><span class="pun">.</span><span class="typ">Microsoft</span><span class="pun">.</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">startColorstr</span><span class="pun">=</span><span class="str">'#00b7ea'</span><span class="pun">,</span><span class="pln"> endColorstr</span><span class="pun">=</span><span class="str">'#009ec3'</span><span class="pun">,</span><span class="pln"> </span><span class="typ">GradientType</span><span class="pun">=</span><span class="lit">0</span><span class="pun">);</span><span class="pln"> <br> </span><span class="com">/* IE6-9 */</span><span class="pln"> <br> </span><span class="pun">}</span><span class="pln"> <br> </span><span class="pun">.</span><span class="pln">button</span><span class="pun">:</span><span class="pln">active </span><span class="pun">.</span><span class="pln">bottom </span><span class="pun">{</span><span class="pln"> <br> margin</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="lit">20px</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">}</span><span class="pln"> <br> </span><span class="pun">.</span><span class="pln">button</span><span class="pun">:</span><span class="pln">active </span><span class="pun">.</span><span class="pln">top </span><span class="pun">{</span><span class="pln"> <br> margin</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="lit">70px</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> <br> </span><span class="pun">}</span></code></pre>
<p>


Следующий код туда, где должна быть кнопочка «Скачать»:

<div class="button"> 
<a href="#">Скачать</a>
<p class="top">нажмите чтобы скачать</p>
<p class="bottom">12MB .zip</p>
</div>


При копирование материалов с сайта необходимо указать активную ссылку источника - Скрипты для uCoz 2013 и Анимированная кнопка «Скачать» для uCoz



Расскажи друзьям интересные новости:


- Установить на свой сайт блок социальных закладок
Категория: Разное/Другое | Добавил: scripts_for_ucoz | Теги: «Скачать», uCoz, анимированная, кнопка
Просмотров: 8035 | Загрузок: 0 | Комментарии: 2 | Рейтинг: 0.0/0
Всего комментариев: 2
2 AboutGTA   (16.03.2014 20:35)
Что в ней такого красивого?

+1   Спам
1 Black-Yellow   (19.01.2014 20:11)
Довольно интересный скрипт. Смотрела цвета можно подкроректировать и размер. Спасибо.

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Для добавления необходима авторизация
Хостинг от uCoz