вРазные полезности

Лучшие варианты кнопки "Cкачать" для uCoz-сайтов

На uCoz создается очень много сайтов, которые так или иначе занимаются раздачей контента и предоставляют пользователям возможность скачивания файлов напрямую с сервера. И так уж получилось, что некоторых не устраивает дефолтный вариант кнопки «скачать».

В сегодняшнем материале я решил собрать в одном месте лучшие альтернативы для апдейта этой кнопки. Уверен, каждый сможет найти себе вариант по своему вкусу – тут есть и кнопочки для раздачи файлов с указанием размера, и кнопки с функцией обратного отсчета. Как всегда, все они проверены на работоспособность, по каждой кнопке написан детальный мануал и сделана демо-страничка. Смотрим, выбираем и совершенствуем свои сайты.

1. Кнопка «Скачать» с указанием размера файла

Кнопка, которая специально создана для модуля «Каталог файлов». Можно переделать для других модулей или под свои нужды. На самой кнопке отображается надпись «Скачать», а также автоматически указывается размер файла.

2. Два варианта кнопок «Cкачать торрент» для uCoz

Эта кнопка также сделана для модуля «Каталог файлов». При необходимости ее можно переделать для использования с другими модулями. На кнопке отображается размер скачиваемого файла и количество закачек. Как вы видите, есть два варианта оформления, при наведении на кнопку цвет с зеленого меняется на оранжевый.

3. Красная CSS3 кнопка «Скачать» + «Демо» с анимацией

Красные анимированные кнопки «Скачать» и «Демо» для uCoz. При наведении на кнопку появляется информация с количеством загрузок и размером файла.
Надписи на кнопке можно переименовать под свои нужды.

4. Раскрывающаяся кнопка «Скачать» с размером файла

Интересный вариант кнопки «Скачать» синего цвета, при нажатии демонстрирующей размер и название файла в выпадающем окне. Как и прочие кнопки, может быть изменен под свои нужды. 

5. Зеленая кнопка «Скачать» со стрелкой и размером файла

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

6. Разноцветные 3D-кнопки «Скачать» на CSS3

Эти 3D-кнопки выполнены в забавном «рисованном» стиле. Более того, они отлично анимированы: при наведении курсора кнопки затемняются, а при нажатии – утопают. Стандартную надпись можно переименовать, например, сохранить, загрузить и т.д. 

7. Ярко-зеленая кнопка «Скачать» + указание размера файла

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

8. Кнопка «Скачать бесплатно» (с сервера) с обратным отсчетом в 15 сек.

При нажатии на кнопку в правом нижнем углу появляется окно с обратным отсчетом в 15 секунд, после чего начинается загрузка файла. При наведении курсора меняется цвет.

9. Салатовая кнопка «Скачать материал»

Один из самых простых вариантов кнопки «Скачать». Выполненная в достаточно простом, но от того не менее «качественном стиле», она не имеет анимаций и не отображает какую-либо дополнительную информацию. 

10. Стильные кнопки «Скачать» + «Демо»

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

11. Простая кнопка «Скачать файл»

Простой и «минималистичный» вариант, имеющий простую анимацию при наведении курсора и отображающий только самую нужную информацию – предложение скачать файл. 

12. Кнопка «Скачать» для uCoz

Данная кнопка имеет простое оформление, но обладает одной особенностью: в обычном состоянии она зеленого цвета, а при наведении мышкой ее цвет изменяется на оранжевый. Кнопка заточена для модуля «Каталог файлов», но вам ничего не мешает использовать ее где угодно.

13. Подборка разных кнопок «Скачать» для uCoz

На последок выкладываю небольшой zip-архив с кнопками «Скачать» и «Download» в формате jpeg, png, gif и psd.
P.S.: Это лучшие варианты, которые мне удалось найти. Все они проверены на работоспособность, думаю с их установкой у вас не возникнет проблем. Если же что-то не получается, или возникли какие-то дополнительные вопросы, то вы можете смело их задавать через комментарии.

  • Обновлено:
    2014-01-29
  • Автор:
  • Оцените статью:
    9.6/10 из 42

Источник: uguide.ru

Похожие посты