ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Темные кнопки для загрузки SpAa на uCoz

Темные кнопки для загрузки SpAa на uCoz

Темные кнопки для загрузки SpAa на uCoz
Очень красивые кнопочки для загрузки на сайте, которые выполнены в темном цвете, что отлично смотрятся на темном или светлом формате сайта для скачивание файлов. Вы можете их установить на своем сайте, а стандартные убрать, ведь эти еще идут как оформление к сайту или блогу.

Где идет основной код, который устанавливается в странице материала и комментариев к нему. А также стилистика, где можно самостоятельно что то доработать в плане оформление, под основной дизайн на сайте. Аналогично и с кнопками, так как они выставлены под ссылку, что меняется на ту, которая вам юольше нравится или подходит под тематику сайта.

Красивая кнопка для скачивание файлов на сайте юкоз


Перед установкой установите шрфитовые-картинки!

В верхнюю часть сайта < head >CЮДА< /head >

Код
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Установка:

1. Туда где хотите видеть кнопочки:

Код
<div class="flx dload">
<div class="flx box_dload">
<a target="_blank" class="file_link tr_bottom" href="$FILE_URL$">Torrent файл</a>
<a target="_blank" class="file_link fo_bottom" href="$RFILE_URL$" itemprop="downloadUrl">Файлообменник</a>
<div class="size_file"><span>Размер файла</span> <b itemprop="fileSize">$RFILE_SIZE$</b></div>
<div class="update_file flx"><b>$MOD_DATE$</b></div>
</div>
</div>

2. В CSS:

Код
/*Кнопки скачивания*/
.element.style {}
.dload {margin-top: 5px;margin-bottom: 5px;flex-direction: column;}
.dload {align-items: center;justify-content: center;}
.box_dload{border:1px solid #535466;background:rgba(37,41,42,0.5);padding:5px;position:relative;text-align:Arial;text-align:center;min-width:100px;border-radius:5px}
.flx {display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;}
.file_link{margin:5px;font-size:1.5em;text-decoration:none;color:#9F9F9F;padding:10px 20px 15px;background-color:rgba(53,53,53,0.4);border:1px solid #535466;border-radius:5px}
.size_file{text-align:right;font-size:.8em;color:#9f9f9f;background:#353535;border-radius:5px;border:1px dashed #535466;display:flex;align-items:center;justify-content:space-evenly;flex-direction:column;padding:10px}
.size_file > b{font-size:12px;color:#8e8b74;letter-spacing:.1em}
.update_file {background: #4c78af33;text-align: center;border-radius: 3px;padding: 9px;margin: 0 5px;color: #8b8b74;border: 1px dashed #535466;align-items: center;flex-direction: column;justify-content: center;}
.update_file::before {content: "Материал обновлен: ";color: rgb(159, 159, 159);font-size: 0.8em;}
.fo_bottom:before {background-image: url(http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/dekangan/fileobmen.png);}
.fo_bottom:hover::first-letter{color:red}
.fo_bottom:hover{color:#000;background:linear-gradient(to bottom,#c4e3ff 46%,#fcfefd 64%);box-shadow:inset 0 0 34px #000}
.tr_bottom:before {background-image: url(http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/dekangan/utorrent.png);}
.tr_bottom:hover{background:#222;color:#76b83f;box-shadow:inset 0 0 34px #000}
.tr_bottom:before,.go_bottom:before,.fo_bottom:before{content:"";width:30px;height:30px;display:inline-block;background-size:cover;position:relative;top:5px;margin-right:10px}
/*-------*/




Так же если кому то шибко нужно вот такая же кнопка гугл, код оператора для доп ссылки прописать свой не забудьте:

Код
<a target="_blank" class="file_link go_bottom" href="КОД ОПЕРАТОРА НА ДОП ССЫЛКУ" itemprop="downloadUrl">Google Диск</a>

В CSS:

Код
.go_bottom:before {background-image: url(/data/img_box_material/google-drive.png);}
.go_bottom:hover{background:linear-gradient(to right,#09a15d 0%,#fdd04a 50%,#3f85fa 100%);box-shadow:inset 0 0 34px #000;color:#444}
15 Августа 2021 Загрузок: 4 Просмотров: 1138 Комментариев: (11)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 11
Kosten
Kosten 15 Августа 2021 04:281
+2
Где то на сайте есть похожие кнопки, только если не ошибаюсь под яндекс диск.
noavatar
AyaMi 15 Августа 2021 04:492
+1
Под яндекс как раз таки сделана кнопка "Файлообменник", просто я её изменил под себя, так как мне хватает "Торрента" и "Файлообменника", все остальные ссылки на патчи и дополнительные находятся на форуме в аналогичной, с файлом, теме.
Я думаю пригодятся, кому-нибудь :)
-SAM-
-SAM- 15 Августа 2021 07:213
+1
http://zornet.ru/load....-0-7728

http://zornet.ru/load....-0-8051
http://zornet.ru/load....-0-7990

P.S.: путь к картинкам в css битый? Надо залить на ZorNet их.
noavatar
AyaMi 15 Августа 2021 18:208
-1
Это не такие же, похожие, но не такие же))
Kosten
Kosten 15 Августа 2021 15:104
0
Ne_NuJeN, вы ссылки скинте, если они есть у вас, то реально в стилях битые ссылки.
noavatar
AyaMi 15 Августа 2021 18:197
-2
Я извиняюсь, там старый адрес сайта в прописан.
пропишите настоящий
First
First 15 Августа 2021 15:275
+1
Могу предложить ещё такую кнопочку


Кнопка полностью настраиваема, что цвет, картинки и надпись 04b
Kosten
Kosten 15 Августа 2021 18:519
0
First, норм такая кнопочка, заслуживает отдельного материала, будет еще, так закидывай на форум.
First
First 15 Августа 2021 19:5410
0
Не против если разместишь как материал
First
First 15 Августа 2021 16:276
+1
Kosten
Kosten 15 Августа 2021 20:2611
0
Если вам нравятся кнопки с красивыми эффектами, которые происходят при наведении курсора, то вероятно эта Кнопка скачать для uCoz c эффектами на CSS вам понравиться.

avatar