3 красивых кнопки "скачать" для uCoz
827материалов
228тем на форуме
3004комментария
6161пользователь

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
Материал просмотрен: 1018 раз
Категория материала: Скрипты для 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 скачался прямо, при нажатие на кнопку скачать, без менеджеров.
avatar
Подскажите пожалуйста, как сделать, чтобы кнопка отображалась и при добавлении ссылки на сторонний сервер?
Ромчик
Используется код $RFILE_URL$ соответственно $FILE_URL$ заменяем на $RFILE_URL$
avatar
Спасибо! Завтра буду пробовать.
avatar
Отличные кнопки! Спасибо. Немного изменил под себя вторую кнопку. Вставил ее в каталог файлов, вид материалов, чтобы она отображалась в материалах на главной странице под картинкой. Вот пример тест-сайта: http://1081-test.ucoz.com/
Подскажите пожалуйста, куда нужно вставить код кнопки, чтобы она отображалась в результатах поиска по тегу (также внизу под картинкой)?
пример: 1081-test.ucoz.com/search/сэмплы ударных
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта