Пишите о программах и предлагаете своим читателям ссылку на её скачивание? Эта статья для вас. Теперь не нужно создавать, искать и сохранять к себе на сайт картинки красивых кнопки «Скачать Бесплатно», «Скачать Сейчас» и т. д. на сайт. Добавьте статью в закладки и используйте предложенный HTML-код для вставки подходящей кнопки.
Зелёная кнопка «Скачать бесплатно»Зелёный — это цвет безопасности , что располагает к доверию. Кнопка большая — 180х60 пикселей. Основной акцент сделан на слове «Скачать », а «бесплатно » идёт с небольшой прозрачностью. Таким образом, кнопка получилась не кричащей, но акцентирующей основное внимание на действии .
Синий — цвет нейтральный, но ассоциируется у нас с цветом ссылки, т. е. активного элемента. Призыв к действию — более очевиден, т. к. скачать предлагается «сейчас ». Свою роль играет и оранжевая ленточка с надписью «free », слово «бесплатно » слишком длинное. Оранжевый — цвет действия. У меня он переходит в красный — цвет активности. Градиент позволяет свести к минимуму агрессию. Размер кнопки 223x55 пикселей.
HTML-код для вставки на страницу:
Общий формат HTML-кода кнопки:
Этот вариант был взят из набора графики для инфобизнеса. Всё тот же нейтральный синий цвет, но надпись без CapsLock . Получился умеренный призыв к действию. Основной особенностью кнопки я считаю красивую тень. Размер кнопки очень большой — 240х110 пикселей. Кнопка в большей степени подойдёт для большого пространства, но может вписаться и в тот же сайдбар.
HTML-код для вставки на страницу:
Общий формат HTML-кода кнопки:
Наверное, заходя на страницу скачивания сервиса Яндекс.Диск, Вам встречались достаточно простые и привлекательные кнопки для сохранения и скачивания файлов. Я решил объединить их и создать свою кнопку. Жёлтый — цвет действия, а стрелочка — достаточно привычная и понятная иконка для скачивания.
HTML-код для вставки на страницу:
Общий формат HTML-кода кнопки:
Кнопка воспринимается пользователем как более активный элемент, чем ссылка. Из-за этого количество кликов по кнопке будет больше, чем по обычной ссылке. Чтобы предать кнопке более выраженный характер активного элемента, я использовал тень, кнопка как бы «парит» и призывает кликнуть её. Безусловно, мы уже привыкли ко всем этим трюкам, но оно работает.
Главное помнить, что пользователь должен получить именно то, что вы ему предлагает. Согласитесь, не правильно предлагать скачать что-то бесплатно в обмен на подписку или заработок на файлообменниках. Тем не менее, будем реалистами, всё имеет свою цену. Сыр он остаётся сыром и в мышеловке. На этом у меня всё. Спасибо за внимание. Удачи!
Спасибо, что заглянули на мой блог. Меня зовут Богдан, я живу в Алма-Ате (Казахстан). Давным-давно, еще в 7 классе школы началось мое увлечение программированием в целом (благодаря урокам Delphi на информатике). А в 9 классе в нашу школу пришел сисадмин, который оказался заядлым SEO-шником и вообще классным парнем, и он то и рассказал мне о WordPress, и о том, как можно зарабатывать деньги ведя свой блог в сети и продвигая его. Так и началось мое знакомство с WP и с темой заработка в сети.
На этом блоге я не зарабатываю, он просто создан как хранилище полезных фишек, которые я нахожу в процессе работы. А зарабатываю я веб-разработкой в стиле "фриланс", в которой неплохо продвинулся за последние годы. Пробовал разные технологии, но больше всего люблю писать back-end (внутреннюю логику) приложений на PHP и JS. Ну и конечно, пишу дорогие и сложные плагины для любимого WP на заказ.
Еще люблю воду, велосипед, лыжи и визуальную эстетику во всем.
Примерно так же обычно пишут в разделе "Об авторе"?
Хорошего дня вам!
Практически на каждом сайте есть контент, который предназначен для скачивания. Для того, чтобы пользователям было удобно скачивать файлы, создаются кнопки. При нажатии на них файл не открывается, а сразу скачивается. Сегодня я вам расскажу, как создать такую кнопку.
Для создания кнопки мы используем очень простой html код и стандартную программу Paint . Принцип очень простой: создадим изображение кнопки и вставим его в html код; вставим ссылку на файл, который надо скачать.
Для создания изображения кнопки можно использовать другие редакторы графики – CorelDRAW, Photoshop т. д. Наша задача – показать сам принцып.
Открываем Paint. Рисуем прямоугольник произвольного цвета (в нашем случае — зеленый). Размер прямоугольника должен соответствовать приблизительным размерам нашей кнопки.
Закрашиваем прямоугольник тем же цветом, что и его края. Вводим текст – «СКАЧАТЬ». Размещаем его приблизительно в центре кнопки. Уменьшаем поле документа к размерам кнопки. Сохраняем файл.
Загружаем изображение кнопки на страницу.
Выбираем редактирование «Текст»
Вставляем html код на страницу:
скачать файлВыделенный красным текст кода переменный : на месте файл для скачивания вставляем ссылку на свой файл, который должен быть скачан; на месте скачать файл вставляем не просто ссылку, а код ссылки на изображение кнопки, которую мы создали и загрузили на сайт. – это отображение изображения в редакторе «Текст» в текстовом виде.
Примечание: Не удаляйте кавычки – меняйте только текст.
Кстати , если не менять скачать файл на код ссылки на изображение кнопки, то на сайте будет отображаться просто словосочетание скачать файл , при нажатии на которое начнется скачивание файла.
Таким образом вы можете вставить разные файлы – Изображения, Документы Microsoft Word, PDF и тд.
Здравствуйте, уважаемый читатель моего блога. Продолжаю тему о кнопках. В этой статье пойдет речь о том как сделать кнопку скачать с помощью кода 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 код.
Изучая веб-программирование, я не нашел внятного решения проблемы оформления загрузки файла на сервер при помощи одной кастомной кнопки.
Предлагаю на суд сообщества свой велосипед. На написание данного текста вдохновил Способ №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("Файл загружен");
}
