регистрация
856материалов
3289комментариев
235тем на форуме
6857пользователей

3 красивых кнопки "скачать" для uCoz


Описание кнопок:

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

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

Первая кнопка - демо:


Стили кнопки (CSS):
Код
.a-btn{
               color: #fff!important;
               text-decoration: none!important;
}
.a-btn{
               background:#a9db80;
               background:-webkit-gradient(linear,left top,left bottom,color-stop(#a9db80,0),color-stop(#96c56f,1));
               background:-webkit-linear-gradient(top, #a9db80 0%, #96c56f 100%);
               background:-moz-linear-gradient(top, #a9db80 0%, #96c56f 100%);
               background:-o-linear-gradient(top, #a9db80 0%, #96c56f 100%);
               background:linear-gradient(top, #a9db80 0%, #96c56f 100%);
               filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f',GradientType=0 );
               padding-left:90px;
               padding-right:105px;
               height:90px;
               display:inline-block;
               position:relative;
               border:1px solid #80ab5d;
               -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
               -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
               box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
               -webkit-border-radius:4px;
               -moz-border-radius:4px;
               border-radius:4px;
               float:left;
               clear:both;
               margin:10px 0px;
               overflow:hidden;
               -webkit-transition:box-shadow 0.3s ease-in-out;
               -moz-transition:box-shadow 0.3s ease-in-out;
               -o-transition:box-shadow 0.3s ease-in-out;
               transition:box-shadow 0.3s ease-in-out;
}
.a-btn img{
               position:absolute;
               left:15px;
               top:13px;
               border:none;
               -webkit-transition:all 0.3s ease-in-out;
               -moz-transition:all 0.3s ease-in-out;
               -o-transition:all 0.3s ease-in-out;
               transition:all 0.3s ease-in-out;
}
.a-btn .a-btn-slide-text{
               position:absolute;
               font-size:36px;
               top:18px;
               left:18px;
               color:#6d954e;
               opacity:0;
               text-shadow:0px 1px 1px rgba(255,255,255,0.4);
               -webkit-transition:opacity 0.2s ease-in-out;
               -moz-transition:opacity 0.2s ease-in-out;
               -o-transition:opacity 0.2s ease-in-out;
               transition:opacity 0.2s ease-in-out;
}
.a-btn-text{
               padding-top:13px;
               display:block;
               font-size:30px;
               text-shadow:0px -1px 1px #80ab5d;
}
.a-btn-text small{
               display:block;
               font-size:11px;
               letter-spacing:1px;
}
.a-btn-icon-right{
               position:absolute;
               right:0px;
               top:0px;
               height:100%;
               width:80px;
               border-left:1px solid #80ab5d;
               -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
               -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
               box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
               width:38px;
               height:38px;
               opacity:0.7;
               -webkit-border-radius:20px;
               -moz-border-radius:20px;
               border-radius:20px;
               position:absolute;
               left:50%;
               top:50%;
               margin:-20px 0px 0px -20px;
               border:1px solid rgba(0,0,0,0.5);
               background:#4e5c50 url(http://webmaster-ucoz.ru/ucoz/demo/mat/skachat/arrow_down.png) no-repeat center center;
               -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
               -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
               box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
               -webkit-transition:all 0.3s ease-in-out;
               -moz-transition:all 0.3s ease-in-out;
               -o-transition:all 0.3s ease-in-out;
               transition:all 0.3s ease-in-out;
}
.a-btn:hover{
               -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
               -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
               box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
}
.a-btn:hover img{
               -webkit-transform:scale(10);
               -moz-transform:scale(10);
               -ms-transform:scale(10);
               -o-transform:scale(10);
               transform:scale(10);
               opacity:0;
}
.a-btn:hover .a-btn-slide-text,
.a-btn:hover .a-btn-icon-right span{
               opacity:1;
}
.a-btn:active{
               position:relative;
               top:1px;
               background:#80ab5d;
               -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
               -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
               box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
               border-color:#a9db80;
}
.a-btn:active .a-btn-icon-right span{
               -webkit-transform:scale(1.4);
               -moz-transform:scale(1.4);
               -ms-transform:scale(1.4);
               -o-transform:scale(1.4);
               transform:scale(1.4);
}

Кнопка:
Код
<?if($FILE_URL$)?><div class="button-wrapper">
<a href="$FILE_URL$" class="a-btn">
<span class="a-btn-slide-text">ZIP</span>
<img src="http://webmaster-ucoz.ru/ucoz/demo/mat/skachat/3.png">
<span class="a-btn-text"><small>Весит: $FILE_SIZE$</small>Скачать</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
</div><?endif?>

Вторая кнопка - демо:


Стили кнопки (CSS):
Код
.a-btn{
             color: #fff!important;
             text-decoration: none!important;
}
.a-btn{
             background:#80a9da;
             background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
             background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
             background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
             background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
             background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);
             filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );
             padding-left:90px;
             padding-right:105px;
             height:90px;
             display:inline-block;
             position:relative;
             border:1px solid #5d81ab;
             -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
             -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
             box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
             -webkit-border-radius:4px;
             -moz-border-radius:4px;
             border-radius:4px;
             float:left;
             clear:both;
             margin:10px 0px;
             overflow:hidden;
             -webkit-transition:box-shadow 0.3s ease-in-out;
             -moz-transition:box-shadow 0.3s ease-in-out;
             -o-transition:box-shadow 0.3s ease-in-out;
             transition:box-shadow 0.3s ease-in-out;
}
.a-btn img{
             position:absolute;
             left:15px;
             top:13px;
             border:none;
             -webkit-transition:all 0.3s ease-in-out;
             -moz-transition:all 0.3s ease-in-out;
             -o-transition:all 0.3s ease-in-out;
             transition:all 0.3s ease-in-out;
}
.a-btn .a-btn-slide-text{
             position:absolute;
             font-size:36px;
             top:18px;
             left:18px;
             color:#bde086;
             text-shadow:0px 1px 1px rgba(0,0,0,0.3);
             -webkit-transform:scale(0);
             -moz-transform:scale(0);
             -ms-transform:scale(0);
             -o-transform:scale(0);
             transform:scale(0);
             opacity:0;
             -webkit-transition:all 0.3s ease-in-out;
             -moz-transition:all 0.3s ease-in-out;
             -o-transition:all 0.3s ease-in-out;
             transition:all 0.3s ease-in-out;
}
.a-btn-text{
             padding-top:13px;
             display:block;
             font-size:30px;
             text-shadow:0px -1px 1px #5d81ab;
}
.a-btn-text small{
             display:block;
             font-size:11px;
             letter-spacing:1px;
}
.a-btn-icon-right{
             position:absolute;
             right:0px;
             top:0px;
             height:100%;
             width:80px;
             border-left:1px solid #5d81ab;
             -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
             -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
             box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
             width:38px;
             height:38px;
             opacity:0.7;
             -webkit-border-radius:20px;
             -moz-border-radius:20px;
             border-radius:20px;
             position:absolute;
             left:50%;
             top:50%;
             margin:-20px 0px 0px -20px;
             border:1px solid rgba(0,0,0,0.5);
             background:#5b5b5b url(http://webmaster-ucoz.ru/ucoz/demo/mat/skachat/arrow_down.png) no-repeat center center;
             -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
             -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
             box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
             -webkit-transition:all 0.3s ease-in-out;
             -moz-transition:all 0.3s ease-in-out;
             -o-transition:all 0.3s ease-in-out;
             transition:all 0.3s ease-in-out;
}
.a-btn:hover{
             -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
             -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
             box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
}
.a-btn:hover img{
             opacity:0;
}
.a-btn:hover .a-btn-slide-text{
             opacity:1;
             -webkit-transform:scale(1);
             -moz-transform:scale(1);
             -ms-transform:scale(1);
             -o-transform:scale(1);
             transform:scale(1);
}
.a-btn:hover .a-btn-icon-right span{
             opacity:1;
             background-color:#bc3532;
}
.a-btn:active{
             position:relative;
             top:1px;
             background:#5d81ab;
             -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
             -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
             box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
             border-color:#80a9da;
}
.a-btn:active .a-btn-icon-right span{
             -webkit-transform:rotate(360deg);
             -moz-transform:rotate(360deg);
             -ms-transform:rotate(360deg);
             -o-transform:rotate(360deg);
             transform:rotate(360deg);
}

Кнопка:
Код
<?if($FILE_URL$)?><div class="button-wrapper">
<a href="$FILE_URL$" class="a-btn">
<span class="a-btn-slide-text">ZIP</span>
<img src="http://webmaster-ucoz.ru/ucoz/demo/mat/skachat/3.png">
<span class="a-btn-text"><small>Весит: $FILE_SIZE$</small>Скачать</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
</div><?endif?>

Третья кнопка - демо:


Стили кнопки (CSS):
Код
.a-btn{
         color: #fff!important;
         text-decoration: none!important;
}
.a-btn{
         background:#80a9da;
         background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
         background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
         background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
         background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
         background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);
         filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );
         padding-left:20px;
         padding-right:80px;
         height:38px;
         display:inline-block;
         position:relative;
         border:1px solid #5d81ab;
         -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
         -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
         box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
         -webkit-border-radius:20px;
         -moz-border-radius:20px;
         border-radius:20px;
         float:left;
         clear:both;
         margin:10px 0px;
         overflow:hidden;
         -webkit-transition:all 0.3s linear;
         -moz-transition:all 0.3s linear;
         -o-transition:all 0.3s linear;
         transition:all 0.3s linear;
}
.a-btn-text{
         padding-top:5px;
         display:block;
         font-size:18px;
         white-space:nowrap;
         text-shadow:0px 1px 1px rgba(255,255,255,0.3);
         color:#446388;
         -webkit-transition:all 0.2s linear;
         -moz-transition:all 0.2s linear;
         -o-transition:all 0.2s linear;
         transition:all 0.2s linear;
}
.a-btn-slide-text{
         position:absolute;
         height:100%;
         top:0px;
         right:52px;
         width:0px;
         background:#63707e;
         text-shadow:0px -1px 1px #363f49;
         color:#fff;
         font-size:18px;
         white-space:nowrap;
         text-transform:uppercase;
         text-align:left;
         text-indent:10px;
         overflow:hidden;
         line-height:38px;
         -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
         -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
         box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
         -webkit-transition:width 0.3s linear;
         -moz-transition:width 0.3s linear;
         -o-transition:width 0.3s linear;
         transition:width 0.3s linear;
}
.a-btn-icon-right{
         position:absolute;
         right:0px;
         top:0px;
         height:100%;
         width:52px;
         border-left:1px solid #5d81ab;
         -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
         -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
         box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
         width:38px;
         height:38px;
         opacity:0.7;
         position:absolute;
         left:50%;
         top:50%;
         margin:-20px 0px 0px -20px;
         background:transparent url(http://webmaster-ucoz.ru/ucoz/demo/mat/skachat/arrow_right.png) no-repeat 50% 55%;
         -webkit-transition:all 0.3s linear;
         -moz-transition:all 0.3s linear;
         -o-transition:all 0.3s linear;
         transition:all 0.3s linear;
}
.a-btn:hover{
         padding-right:180px;
         -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
         -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
         box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
}
.a-btn:hover .a-btn-text{
         text-shadow:0px 1px 1px #5d81ab;
         color:#fff;
}
.a-btn:hover .a-btn-slide-text{
         width:100px;
}
.a-btn:hover .a-btn-icon-right span{
         opacity:1;
}
.a-btn:active{
         position:relative;
         top:1px;
         background:#5d81ab;
         -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
         -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
         box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
         border-color:#80a9da;
}

Код кнопки:
Код
<?if($FILE_URL$)?><div class="button-wrapper">
<a href="$FILE_URL$" class="a-btn">
<span class="a-btn-text">Скачать</span>         
<span class="a-btn-slide-text">$FILE_SIZE$</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
</div><?endif?>


Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 11.11.2015 в 09:00
Материал просмотрен: 1204 раза
Категория материала: Скрипты для uCoz
К материалу оставлено: 8 комментариев

Пожаловаться
Сказать спасибо

8 комментариев


NarutoPro
Влад @NarutoPro 12.11.2015 13:461
+6
Вторая кнопка очень понравилась. Спасибо
AlexGraur
Alex Graur @AlexGraur 06.12.2015 05:583
0
где-то это я уже видел подобное тока не для юкоза
Dabur Vatika 30.01.2016 00:454
0
что делат чтобы mp3 скачался прямо, при нажатие на кнопку скачать, без менеджеров.
e
Подскажите пожалуйста, как сделать, чтобы кнопка отображалась и при добавлении ссылки на сторонний сервер?
Ромчик
Используется код $RFILE_URL$ соответственно $FILE_URL$ заменяем на $RFILE_URL$
e
Спасибо! Завтра буду пробовать.
e
Отличные кнопки! Спасибо. Немного изменил под себя вторую кнопку. Вставил ее в каталог файлов, вид материалов, чтобы она отображалась в материалах на главной странице под картинкой. Вот пример тест-сайта: http://1081-test.ucoz.com/
Подскажите пожалуйста, куда нужно вставить код кнопки, чтобы она отображалась в результатах поиска по тегу (также внизу под картинкой)?
пример: 1081-test.ucoz.com/search/сэмплы ударных
avatar
Партнерская программа uKitCPA
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0