Полностью своя кнопка «Выбрать файл. Как сделать ссылку на скачивание файла Кнопка «Скачать бесплатно» в стиле Яндекс
Здравствуйте, уважаемый читатель моего блога. Продолжаю тему о кнопках. В этой статье пойдет речь о том как сделать кнопку скачать с помощью кода css.
Вообще кнопки скачать очень распространены на сайтах с учебной тематикой, например. Или в интернет магазинах с большим количеством товара, отличающегося по параметрам. Ведь удобнее же прайс разместить для скачивания, нежели загружать файл ексель. Не каждый читатель будет дожидаться пока окрытия большого по объему файла ексель.
Будем делать кнопку скачать аналогично технологии, описанной в статье
Как сделать кнопку скачать с помощью кода css1 этап.
Вставляем код кнопки скачать в нужное место статьи в текстовом режиме.
Zip">Нажмите на меня
2 этап.
В файл style.css вставляем код.
Btn { background: #5dd934; background-image: -webkit-linear-gradient(top, #5dd934, #7fb82b); background-image: -moz-linear-gradient(top, #5dd934, #7fb82b); background-image: -ms-linear-gradient(top, #5dd934, #7fb82b); background-image: -o-linear-gradient(top, #5dd934, #7fb82b); background-image: linear-gradient(to bottom, #5dd934, #7fb82b); -webkit-border-radius: 28; -moz-border-radius: 28; border-radius: 28px; font-family: Courier New; color: #ffffff; font-size: 20px; padding: 10px 20px 10px 20px; text-decoration: none; } .btn:hover { background: #fc3cd6; background-image: -webkit-linear-gradient(top, #fc3cd6, #5656cc); background-image: -moz-linear-gradient(top, #fc3cd6, #5656cc); background-image: -ms-linear-gradient(top, #fc3cd6, #5656cc); background-image: -o-linear-gradient(top, #fc3cd6, #5656cc); background-image: linear-gradient(to bottom, #fc3cd6, #5656cc); text-decoration: none; }
Получится вот такая кнопка, с подсветкой при нажатии.
Как видите, сделать кнопку скачать с помощью кода css очень легко. Правда ведь?
P.S. Кнопки могут быть разными, разного цвета и размера, с тенью и без и другими изменениями. В вы узнаете как можно менять эти свойства.
2016-03-21T13:29:21+00:00 Надежда Скрипты и коды как сделать кнопку скачатьЗдравствуйте, уважаемый читатель моего блога. Продолжаю тему о кнопках. В этой статье пойдет речь о том как сделать кнопку скачать с помощью кода css. Вообще кнопки скачать очень распространены на сайтах с учебной тематикой, например. Или в интернет магазинах с большим количеством товара, отличающегося по параметрам. Ведь удобнее же прайс разместить для...
Надежда Трофимова [email protected] Administrator Блог сайт Возможно Вас также заинтересует:Убираем с главной страницы и RSS записи рубрики
Продолжаем улучшать функционал и внешний вид сайта. Убираем ненужные записи с главной страницы и RSS.
Как защитить текст от копирования. Часть 1.
Блокировка правой кнопки мыши и выделения текста. Скрипт.Здравствуйте, уважаемый читатель. Столкнулась с проблемой копирования контента. Неприятно обнаружить свои труды на чужом сайте. Искала, искала...
Вывод php кода в блоге на WordPress
Эта тема, наверно, будет интересна для веб мастеров, которым надо в запись вставить php код.
Пишите о программах и предлагаете своим читателям ссылку на её скачивание? Эта статья для вас. Теперь не нужно создавать, искать и сохранять к себе на сайт картинки красивых кнопки «Скачать Бесплатно», «Скачать Сейчас» и т. д. на сайт. Добавьте статью в закладки и используйте предложенный HTML-код для вставки подходящей кнопки.
Зелёная кнопка «Скачать бесплатно»Зелёный — это цвет безопасности , что располагает к доверию. Кнопка большая — 180х60 пикселей. Основной акцент сделан на слове «Скачать », а «бесплатно » идёт с небольшой прозрачностью. Таким образом, кнопка получилась не кричащей, но акцентирующей основное внимание на действии .
Синий — цвет нейтральный, но ассоциируется у нас с цветом ссылки, т. е. активного элемента. Призыв к действию — более очевиден, т. к. скачать предлагается «сейчас ». Свою роль играет и оранжевая ленточка с надписью «free », слово «бесплатно » слишком длинное. Оранжевый — цвет действия. У меня он переходит в красный — цвет активности. Градиент позволяет свести к минимуму агрессию. Размер кнопки 223x55 пикселей.
HTML-код для вставки на страницу:
Общий формат HTML-кода кнопки:
Этот вариант был взят из набора графики для инфобизнеса. Всё тот же нейтральный синий цвет, но надпись без CapsLock . Получился умеренный призыв к действию. Основной особенностью кнопки я считаю красивую тень. Размер кнопки очень большой — 240х110 пикселей. Кнопка в большей степени подойдёт для большого пространства, но может вписаться и в тот же сайдбар.
HTML-код для вставки на страницу:
Общий формат HTML-кода кнопки:
Наверное, заходя на страницу скачивания сервиса Яндекс.Диск, Вам встречались достаточно простые и привлекательные кнопки для сохранения и скачивания файлов. Я решил объединить их и создать свою кнопку. Жёлтый — цвет действия, а стрелочка — достаточно привычная и понятная иконка для скачивания.
HTML-код для вставки на страницу:
Общий формат HTML-кода кнопки:
Кнопка воспринимается пользователем как более активный элемент, чем ссылка. Из-за этого количество кликов по кнопке будет больше, чем по обычной ссылке. Чтобы предать кнопке более выраженный характер активного элемента, я использовал тень, кнопка как бы «парит» и призывает кликнуть её. Безусловно, мы уже привыкли ко всем этим трюкам, но оно работает.
Главное помнить, что пользователь должен получить именно то, что вы ему предлагает. Согласитесь, не правильно предлагать скачать что-то бесплатно в обмен на подписку или заработок на файлообменниках. Тем не менее, будем реалистами, всё имеет свою цену. Сыр он остаётся сыром и в мышеловке. На этом у меня всё. Спасибо за внимание. Удачи!
Как сделать скачивание файла с сайта.
Для скачивания можно передавать файлы самых различных форматов: музыка, видео, текстовые файлы, Excel, архивы и мн. другие.
Как на сайте сделать скачивание файла Скачивание архивовДля файлов-архивов (форматы zip, rar и т.д.) достаточно просто указать ссылку на файл который нужно передать для скачивания. Поэтому здесь применяется обычный HTML тег ссылки
# - вместо символа решётки в атрибуте href прописывается ссылка на файл который отдаём для скачивания;
Так же хочу обратить внимание, что если файл с вашего сайта указываем относительный путь к файлу "music/pesnya..mp3"
А вот для файлов не архивных форматов (музыка, видео, различные текстовые файлы и документы, изображения и т.д.) применяется специальный для этого тег.
HTML тег скачать - downloadДля того, чтобы передать какой либо файл для скачивания пользователю, в HTML ссылки нужно прописать тег download.
В теге download ничего указывать не нужно. Браузер поймёт что файл нужно скачивать, а не открывать.
Со всплывающей подсказкой:
текст ссылки
В кавычках тега title прописываем текст всплывающей подсказки.
*Обязательно не забываем переключить редактор в режим HTML чтобы редактировать теги
Текстовая ссылкаскачать файл
Результат:
Скачать через кнопкуСкачать файл
- пример для Icomoon
Скачать файл
Скачивание файла при клике на изображение
Если вам что то не понятно или есть какие либо вопросы - не стесняйтесь и задавайте их в комментариях.
Изучая веб-программирование, я не нашел внятного решения проблемы оформления загрузки файла на сервер при помощи одной кастомной кнопки.
Предлагаю на суд сообщества свой велосипед. На написание данного текста вдохновил Способ №5 из материала Делаем красивый input для адаптивного сайта … И да - все работает в IE, начиная с 9 версии.
Цель
: создать свою кнопку/элемент управления по нажатию которой происходит загрузка файла на сервер (либо иные, предусмотренные разработчиком, файловые операции).
Инструменты
: CSS, PHP, JavaScript.
Используемые технологии
: Ajax, через скрытый iframe.
2. Начинаем «магию». Для «input» с типом «file» на событие по изменению вешаем вызов функции onchange=«LoadFile();».
3. На главной странице создаем кнопку. Навешиваем ей на событие нажатия кнопки мыши вызов функции onclick=«FindFile();».
4. В функции FindFile() имитируем клик на «input» с типом «file». То есть при нажатии на нашу кнопку вызывается стандартный диалог выбора файла. Как только пользователь выбрал файл, срабатывает событие onchange и вызывается функция LoadFile(). В функции LoadFile() имитируем клик на «input» с типом «submit».
5. Форма формирует POST запрос с именем файла к нашему back-end скрипту, который осуществляет все проверки по безопасности и загрузку файла. После этого скрипт вызывает callback функцию главной страницы, которой сообщает о результате выполнения.
Собственно все. Для примера приведены четыре основных файла, код которых приведён ниже:
css/style.css
– стили главной страницы
view/upload.php
– back-end скрипт загрузки файла
index.php
– главная страницы
js/upload.js
– front-end скрипты главной страницы
Кроме того, необходим любой файл с картинкой для кнопки buttons/openfile.png
Загружаемые файлы помещаем в директорию ../temp/
Таблица стилей (css/style.css)
Создаем стиль кнопки и скрытого «input».
.navButtons{
border:1px gray solid;
position:absolute;
overflow: hidden;
display:block;
height:50px;
width:50px;
margin:10px;
-moz-box-shadow:5px 5px 7px rgba(3,33,33,.7);
-webkit-box-shadow: 5px 5px 7px rgba(3,33,33,.7);
box-shadow: 5px 5px 7px rgba(3,33,33,.7);
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
}
.navButtons:hover
{
border:2px solid black;
background-color:#fff;
}
.hiddenInput{
position:absolute;
overflow: hidden;
display:block;
height:0px;
width:0px;
}
Input мы просто делаем нулевой ширины и высоты
Скрипт обрабатывающий запрос на загрузку файла (view/upload.php)
Здесь все согласно примерам в интернете, валидация файлов изъята:
Главная страница (index.php)
OpenFile test
JavaScript в главной форме (js/upload.js)
function FindFile() { document.getElementById("my_hidden_file").click(); }
function LoadFile() { document.getElementById("my_hidden_load").click(); }
function onResponse(d) // Функция обработки ответа от сервера
{
eval("var obj = " + d + ";");
if(obj.success!=1)
{
alert("Ошибка!\nФайл " + obj.filename + " не загружен - "+obj.myres);
return;
};
alert("Файл загружен");
}