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}
2021-08-15 Загрузок: 1 Просмотров: 373 Комментарий: (11)

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

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

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

Комментарий: 11
Kosten
Kosten 2021-08-15 04:281
+2
Где то на сайте есть похожие кнопки, только если не ошибаюсь под яндекс диск.
avatar
AyaMi 2021-08-15 04:492
+1
Под яндекс как раз таки сделана кнопка "Файлообменник", просто я её изменил под себя, так как мне хватает "Торрента" и "Файлообменника", все остальные ссылки на патчи и дополнительные находятся на форуме в аналогичной, с файлом, теме.
Я думаю пригодятся, кому-нибудь :)
-SAM-
-SAM- 2021-08-15 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 их.
avatar
AyaMi 2021-08-15 18:208
-1
Это не такие же, похожие, но не такие же))
Kosten
Kosten 2021-08-15 15:104
0
Ne_NuJeN, вы ссылки скинте, если они есть у вас, то реально в стилях битые ссылки.
avatar
AyaMi 2021-08-15 18:197
-2
Я извиняюсь, там старый адрес сайта в прописан.
пропишите настоящий
First
First 2021-08-15 15:275
+1
Могу предложить ещё такую кнопочку


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

avatar