• Страница 1 из 1
  • 1
Модератор форума: dotbot  
Сообщество uCoz » Архивариус » Корзина » Как сделать кнопку?
Как сделать кнопку?
Волшебник307
Сообщений: 58
Репутация: 0

Сообщение # 1 | 13:28:27
Как сделать кнопку?

Вот строчка кода, которая работает как гиперссылка
и отображается простой текст, вот так: [ · Скачать файл (16,2 Мб) ]

<?if($RFILE_URL$)?> · <a href="$RFILE_URL$" target="_blank"><!--<s5224>-->Скачать файл<!--</s>--></a> ($RFILE_SIZE$)<?endif?>
-----------------------------------------------------------------------
Как из всего этого мне сделать полноценную кнопку,
чтобы выглядела визуально как кнопка Яндекса?

Забыл рисы прикрепить
--------------------------------
Мой сайт.
http://307cwam.ucoz.ru/
Прикрепления: 9667921.png (4.9 Kb) · 2234062.png (4.6 Kb)

Сообщение отредактировал Волшебник307 - Вторник, 30 Сен 2014, 13:37:03
Хард
Сообщений: 446
Репутация: 156

Сообщение # 2 | 14:00:03
Вам надо именно как у Яндекса или это был пример и вам просто нужна кнопка?

---------------------------------------------
Вообще. Есть очень красивое решение.

Пишу для каталога файлов. Находим на подобии:

Код
<td width="85%">    
<?if($FILE_URL$ || $RFILE_URL$ || $SCREEN_URL$)?>[ <?if($FILE_URL$)?><a href="$FILE_URL$"><!--<s5223>-->Скачать с сервера<!--</s>--></a> ($FILE_SIZE$)<?endif?>    
<?if($RFILE_URL$)?> · <a href="$RFILE_URL$" target="_blank"><!--<s5224>-->Скачать удаленно<!--</s>--></a> ($RFILE_SIZE$)<?endif?>

И меняем на данное красивое решение:


Код
<style type="text/css">     
     .download_button {display:block; width:256px; height:65px; background:url("/img/download.png') no-repeat; position:relative; color:#fff; text-shadow:0 1px 2px #000;}     
     .download_button:hover {background-position:0 -65px; color:#fff;}     
     </style> <td width="85%">    
     <?if($FILE_URL$)?><a class="download_button" style="margin:5px;" href="$FILE_URL$" target="_blank"><div style="position:absolute; top:1px; left:75px; color:#fff; font-size:11pt; font-weight:bold;">Скачать/Download</div><div style="position:absolute; top:22px; left:75px; color:#fff; font-size:8pt;" align="left">Размер: $FILE_SIZE$</div></a><?endif?>     
</div>    
<div align="left">     
<?if($RFILE_URL$)?><a class="download_button" style="margin:5px;" href="$RFILE_URL$" target="_blank"><div style="position:absolute; top:1px; left:75px; color:#fff; font-size:11pt; font-weight:bold;">Скачать/Download</div>


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


Цитата
Прикрепленный файл скачиваем и загружаем в Файловый Менеджер. По пути: /img/download.png
Создаем папку "img" (Без кавычек)
И туда загружаем наш файл под именем "download"

Директорию вы можете изменить сами.


Добавлено (30 Сен 2014, 14:00:03)
---------------------------------------------
А вообще если вы хотите изменить надпись на картинку, без эффектов и т.п. То просто найдите код:


Код
<?if($FILE_URL$ || $RFILE_URL$ || $SCREEN_URL$)?>[ <?if($FILE_URL$)?><a href="$FILE_URL$"><!--<s5223>-->Скачать с сервера<!--</s>--></a> ($FILE_SIZE$)<?endif?>
<?if($RFILE_URL$)?> · <a href="$RFILE_URL$" target="_blank"><!--<s5224>-->Скачать удаленно<!--</s>--></a> ($RFILE_SIZE$)<?endif?>

И в нем вместо надписей вот таких:


Цитата
Скачать с сервера / Скачать Удалено

поставьте:


Код
<img src="директория фотографии" alt="">
Прикрепления: 2776926.png (35.6 Kb)

Модератор в отставке :D
Сообщение отредактировал Хард - Вторник, 30 Сен 2014, 14:01:47
Волшебник307
Сообщений: 58
Репутация: 0

Сообщение # 3 | 14:03:12
Хард,
Я как раз хотел спросить.
------------------------------------
Откуда этот файл грузится,
А то кнопка просто белая.

Сейчас установим у себя проверим.

А вот еще color:#fff
обычно указывается 6 букв или цифр,
а здесь всего3, почему так?

Хард
Сообщений: 446
Репутация: 156

Сообщение # 4 | 14:07:54
Цитата Волшебник307 ()
Откуда этот файл грузится, А то кнопка просто белая.

Кнопка белая потому что вы не загрузили фотографию. Вот она: //forum.ucoz.ru/_fr/694/2776926.png

Цитата Волшебник307 ()
Сейчас установим у себя проверим.

Жду. Отпишитесь в теме.

Цитата Волшебник307 ()
А вот еще color: #fff
обычно указывается 6 букв или цифр,
а здесь всего3, почему так?

Ответ: цвет White (Белый) обозначается 2 способами. Это: FFFFFF(Шестизначный) или же FFF (трехзначный)

Перейдите по данной Ссылке если хотите просмотреть все цвета и как они пишутся happy

Модератор в отставке :D
Волшебник307
Сообщений: 58
Репутация: 0

Сообщение # 5 | 14:10:28
Хард,
Классно получилось. Спасибо!
Прикрепления: 1224403.png (33.4 Kb)

Хард
Сообщений: 446
Репутация: 156

Сообщение # 6 | 14:15:31
Цитата Волшебник307 ()
Хард, Классно получилось. Спасибо!

Пожалуйста. Только пересмотрите код который вы вставили. а то кнопки "скачать файл" не пропали и на кнопке не показывает РАЗМЕР файла.

Модератор в отставке :D
Волшебник307
Сообщений: 58
Репутация: 0

Сообщение # 7 | 14:31:04
Хард,
Ещё раз, Спасибо!
Прикрепления: 2573715.png (29.1 Kb)

Сообщество uCoz » Архивариус » Корзина » Как сделать кнопку?
  • Страница 1 из 1
  • 1
Поиск: