Темные кнопки для загрузки 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} |
Поделиться в социальных сетях
Материал разместил
Комментарии: 11 | |
| |