Как сделать кнопку своего сайта
Как сделать кнопку для сайта онлайн. Топ 3 сервиса.
Привет! Недавно узнал как сделать кнопку для сайта онлайн быстро и просто. И вот уже делюсь с вами.
Как сделать кнопки для сайта быстро и просто.
Кто- то успел уже заметить, что в моих статьях стали появляться кнопочки вместо обычных ссылок, это смотрится гораздо лучше и конечно привлекает больше внимания.
Это особенно важно, если в своей статье вы что то рекламируете. Партнёрскую ссылку или на продукт можно вставить в кнопку и предлагать уже в таком виде. Что бы сделать кнопку для сайта онлайн понадобится по моим подсчётам минуты три — четыре.
Например кнопка «БАБЛО», которую хотел бы видеть каждый из нас, но к сожалению она не активна, потому что такого не бывает это раз и т.к я не вставил туда никакой ссылки это два. Немного отвлёкся- перейдём к делу.
Некоторые люди колдуют с кодом и практически сами рисуют кнопалки. Я с HTML кодом дружу не очень хорошо, как и многие новички, поэтому я делаю проще- прибегаю к услугам специальных сервисов и пока не разу не пожалел.
Для себя я выделил три таких интересных сайта, где это можно сделать. Пользоваться скорее всего вы будете одним, а вот каким вы уже решайте сами.
Сервисы где можно сделать кнопку для сайта онлайн.
Итак онлайн генераторы которые мы сегодня рассмотрим:
Daruse
Первым я поставил Daruse, потому что он прост как «два рубля» создать кнополку там сможет даже первоклассник, ко всему этому кнопочки сделанные там смотрятся неплохо.
Ещё один плюс Daruse, там сразу можно вставлять ссылку на какой то ваш продукт или товар и просто вставить код в статью. Этот сервис специализируется не только на создании кнопок, есть в нём очень много полезных инструментов.
Это ещё не все возможности, я только выделил самые полезные на мой взгляд. Но вернёмся к кнопочкам. Переходим на сайт:
И попадаем на генератор, как видите, я не соврал, всё очень просто.
Пишите текст который вам нужно, цвет шрифта, фона и обводки, поставить галочку напротив «Открытие ссылки в новой вкладке». Справа настраиваются размеры. Поэкспериментируйте с размерами, какие лучше подойдут вам.
Советую не делать кнопки слишком длинными, они могут не корректно смотреться в мобильной версии.
Ниже вставьте ссылку, если не вставите свою, по умолчанию она будет вести на их сайт. Ещё ниже получается готовый код, копируем и вставляем в статью. Для этого переходим в режим «текст». Вот как сделано у меня в режиме визуально:
В режиме текст, красным выделен наш код:
С этим сервисом, думаю разобрались.
Da Button Factory
Очень удобный и функциональный сервис и очень популярный у веб-мастеров. Кнопки здесь сделать можно очень красивые. К тому же во вкладке «Примеры» можно подобрать уже готовую лишь изменив в ней текст.
Уже готовый вариант можно скачать в различных форматах png, jpeg, gif, ico, ссылку на изображение или CSS код.
Мне кажется эта кнопка симпатичнее, чем предыдущая, а вам? Только ссылку жаль там не вставить сразу, но не сложно это сделать и редакторе WordPress, когда пишите статью.
Ещё один небольшой минус- отсутствие русского меню, я сейчас выложу фото меню на русском языке, первое время можно ориентироваться по ней, потом привыкните и уже не будет в этом необходимости.
Canva
Отличный онлайн-сервис, создать там можно, что угодно, хоть баннер, хоть логотип, да и сделать кнопку для сайта онлайн тоже можно. Вообще то на кнопках он не специализируется, но возможностей там полно.
Все перечисленные выше сервисы хороши, если вам нужна простая кнопочка, а если, прям красивая нужна? С вашим логотипом или картинкой например, а может значок какой нибудь. Что бы читатель уже точно мимо неё не прошел и мышка сама туда тянулась.
Нет, я точно не художник и не дизайнер, даже код на скриншоте выше, криво обвёл. А если есть умения у вас тогда Canva точно вам подойдёт.
Для этого нужно перейти на сайт Canva, в вкладку «Создать дизайн» и в правом верхнем углу нажать «Использовать специальные размеры». Указываем нужные размеры. Например эта кнопка 250 на 55 пикселей.
Появится окно, в которое вы можете вставлять, что хотите. Выбирать фон из встроенных картинок или загружать свои. Встраивать логотипы или даже фото. Возможностей очень много.
То же самое можно сделать и в Фотошопе например, но там не все умеют работать, он достаточно сложный, Canva в этом смысле намного проще для освоения. Стоит лишь создать там пару картинок и всё станет понятно.
Заключение
Как видите сделать кнопку для сайта онлайн не составит никаких проблем, даже самому не опытному новичку, а ваша статья может преобразится и повысится кликабельность ссылок.
Главное не переусердствовать в этом деле и не «запихивать» кнопочки везде где только можно, думаю две, три на статью будет нормально.
Подписывайтесь на новости блога и следите за новыми статьями в группе в ВКонтакте, в планах много полезного для новичков и не только.
Делаем кнопку “Наверх” для сайта без плагинов
Приветствую дорогие друзья. Сегодня я покажу, как сделать кнопку наверх на сайте. Так уж получилось, что шаблон моего блога не был изначально снабжен этой полезной функцией, и посетители не могли быстро переместиться из нижней части статьи в верхнюю. Поэтому, одновременно с созданием такой кнопки у себя, я расскажу как это сделать вам (Может быть у вас такая же проблема и вы не знали как ее решить).
В статье будут следующие части:
Для чего нужна эта кнопка?
Сказать откровенно, миллионы сайтов живут без подобной кнопки. Ничего критичного в её отсутствии нет, но применение этого элемента может принести определенную пользу, как для посетителей, так и для вас, как для владельца ресурса.
Польза для посетителей
Страницы сайтов нередко перегружены контентом. Длинные и подробные статьи заставляют посетителей спускаться все ниже и ниже, прокручивая текст колесиком мыши. В самом конце их ожидают еще и десятки комментариев и для того, чтобы добавить свои, им приходится проделать еще больше работы.
Пока мы заняты чтением, такая прокрутка не особо утомляет. Но возвращаться назад уже не так весело и, вместо того, чтобы вернуться вверх и погулять по другим разделам вашего сайта, пользователь просто закрывает его.
Использование стрелки вверх для сайта, позволяет сделать возвращение к верхнему меню быстрым и комфортным.
Польза для сайта
Польза для сайта вытекает напрямую из предыдущего текста. Кнопка упрощает навигацию по страницам и улучшает поведенческие факторы для вашего ресурса, так как пользователи ведут себя более активно и больше внимания отдадут вашим материалам.
В свою очередь, удобная навигация и хорошие поведенческие факторы приводят к росту авторитета в глазах поисковых систем и, соответственно, к росту позиций в результатах поиска.
Простая кнопка наверх для сайта html
Я рассмотрю два способа снабдить ваш сайт такой кнопкой. Первый будет ориентирован на простые сайты, для которых нет возможности или желания подключать какие-либо дополнительные библиотеки или Javascript.
Для реализации будет достаточно стандартного функционала языка разметки HTML, дополненного CSS стилями. Кнопка вверх будет действовать как обычная ссылка, отправляющая посетителя к началу страницы.
Код кнопки будет состоять из двух элементов. Первый – это HTML ссылка, размещаемая в коде сайта. Второй – это CSS стиль кнопки, он размещается в файле стилей и отвечает за расположение кнопки и ее внешний вид.
Следующий код разместите внутри тела сайта (внутри тега body, лучше, прямо перед его закрытием). Обратите внимание, что вам потребуется картинка, которая послужит кнопкой (замените участок кода на ваш путь к картинке и ее название).
Дальше вам необходимо прописать стили созданного нами класса кнопки buttonup. Для этого открываем файл style.css и добавляем в конец следующий код:
Этот код отвечает за положение кнопки, редактируя цифры, вы можете его изменить. Как только вы сохраните файл, кнопка начнет действовать. Параметр width ставьте равным ширине картинки, bottom – отступ от нижнего края экрана, right – от правого края экрана.
Плавающая кнопка наверх для сайта
Итак, друзья, простую кнопку на HTML мы с вами сделали, теперь давайте займемся реализацией более продвинутой версии. В ней мы избавимся от тех недостатков, которые присутствовали в предыдущем варианте, а именно:
Существует масса способов и скриптов, позволяющих сделать кнопку вверх. Признаюсь честно, я не программист и, если в предыдущем варианте с HTML я разобрался, то в JavaScript я полный чайник. Поэтому я просмотрел и изучил кучу разных версий и выбрал для себя вариант, который проще всего реализовать (меньше изменений в разных файлах).
В целом, процесс создания такой кнопки чуть-чуть сложнее, но разобраться с ним может каждый. Делается все в 2 этапа:
1. Подключение библиотеки jQuery
Если вы используете WordPress или другую стандартную CMS, то эта библиотека, скорее всего, подключена по умолчанию. В таком случае, этот пункт вы можете пропустить.
Для подключения библиотеки jQuery, вам нужно прописать в разделе вашего сайта следующую строку:
2. Подключение скрипта, выводящего кнопку
Код скрипта можно вставить двумя способами:
Первый вариант проще, второй, на мой взгляд, удобнее.
Вот сам скрипт (автор Тимур Камаев wp-kama.ru):
Замените в скрипте ссылку https://biznessystem.ru/img/arrow.png на ту, где будет храниться ваша картинка.
Как создать кнопку для сайта онлайн: используем простой и удобный генератор
Привет, друзья! Решила затронуть тему кнопок, поскольку размещаю на своем блоге довольно много статей с обзорами и рекомендациями партнерских продуктов. Но, до недавнего времени, как-то, не использовала в них эти привлекающие внимание графические элементы.
А добавив кнопку в один из последних обзоров, заметила, что кликают по ней гораздо чаще, по сравнению с теми постами, где ссылка размещалась просто в тексте и выделялась жирным шрифтом.
Так что, моя копилка полезных инструментов теперь пополнилась несколькими сервисами, позволяющими создавать любые кнопки для сайта онлайн. Которыми я сегодня хочу поделиться с вами.
Поскольку в Фотошопе или др. подобном редакторе мне сделать кнопку сложнее и дольше, онлайн-конструкторы – это оптимальный вариант. С ними все быстрее и проще любому новичку.
Сам процесс работы с этими генераторами я подробно показываю в видео чуть ниже, а сейчас просто расскажу об особенностях каждого из них.
Важно: у данного конструктора несколько изменился интерфейс и теперь он называется ClickMinded Button Generator.
Он обладает самым нужным функционалом: позволяет редактировать текст, размеры, цвет, стиль кнопки, а на выходе загружать ее в png, jpeg, gif, ico форматах или использовать специальный CSS-код.
Помимо того, что здесь можно изготовить кнопочку полностью с нуля, сервис предлагает также несколько интересных заготовок, которые можно быстро отредактировать под себя.
Второй онлайн-конструктор – As B utton Generator имеет похожие возможности редактирования, с некоторыми своими особенностями. Этот конструктор больше не работает!
Выглядит он вот так:
Например, здесь есть опция загрузки готовой картинки в качестве фона кнопки, фильтры, позволяющие настраивать разные эффекты, прозрачные переливы, полосы, тень, граница и т.д.
Важный нюанс в работе с редактором – фильтры нужно использовать после добавления на кнопку текста или загрузки изображения. Так как, после них эти элементы уже не редактируются.
И еще один сервис – cooltext.com – интересен тем, что предлагает разные дизайнерские заготовки, в том числе с анимированными эффектами. Их можно менять слегка, либо переделывать полностью. Конструктор подходит для изготовления кнопок, надписей, логотипов.
Минус в том, что не все шрифты в нем поддерживают русский текст, и менять их не очень удобно, так как открываются они, почему-то, на новой странице без предпросмотра. Готовые кнопки скачиваются в png или gif формате, а также для них можно сгенерировать код (если зарегистрироваться).
Посмотрите небольшой обзорный урок по работе с данными сервисами и выберите подходящий для себя:
Кстати, друзья, если вы хотите сделать для своего сайта более эффектные анимированные кнопки, рекомендую посмотреть видеоурок на блоге моего коллеги Максима Зайцева. Этот урок прекрасно дополняет мой.
Если у вас появятся какие-либо вопросы, задавайте их в комментариях. Всегда рада ответить.
Делаем кнопку для сайта за 5 минут онлайн
Здравствуйте, Дорогие читатели и посетители моего блога! В данной коротенькой статье мы поговорим о том, как сделать кнопку для сайта без особых усилий в онлайн. В этом нет ничего сложного, сейчас мы разберем один сервис, благодаря которому можно создавать красивые кнопки легко и быстро. 
Поэтому нужно стараться чтобы дизайн и юзабилити были для людей. Под словом дизайн и юзабилити я имею ввиду: аккуратность в шаблоне, привлекательность, красивый логотип, шапка, красивые кнопки и т.д. Как раз о кнопках мы сейчас и поговорим!
Кнопка, которую мы будет делать нужна для того, чтобы как-нибудь украсить гиперссылку. То есть при нажатии на кнопку будет производиться переход на какую-то страницу.
Как сделать кнопку для сайта
В этом нет ничего сложного, просто следуйте инструкции ниже (в картинках) и у Вас все безусловно получится. Давайте начнем.
2. Вписывает текст, который хотим видеть на кнопке и настраиваем написание (блок слева)
Text — вписывает текст, который хотим видеть на кнопке
Font — шрифт написания. Хочу отметить, что не все поддерживают кириллицу
Bold — ставите галочку и текст становится жирным
Italic — ставите галочку и текст становится курсивным
Size — думаю понятно, это размер текста
Color — цвет текста
Text shadow — хотите ли использовать тень? Если да, ставьте галочку
Distance to text — размер тени
3. Настраиваем стиль кнопки (блок справа)
Style — выберите подходящий стиль из списка: квадратный, закругленные углы или овальный
Background — выберите стиль окраски и цвет
Border — поставьте галочку, если нужна рамка кнопки, и выберите цвет и размер
Shadow — поставьте галочку, если кнопки нужна тень, и выберите цвет и размер
4. Настраиваем размер кнопки (блок справа внизу)
5. Выбираем тип изображения: CSS или Image (блок слева внизу)
Если выбираете тип CSS background, необходимо скопировать код из окна CSS code в нужно Вам место, например в виджетах.
6. Радуемся созданной кнопкой!
Вот мы и сделали красивую кнопку онлайн. Ну как тяжело? Думаю, что нет. Благодаря данному сервису можно делать очень красивые кнопки всего за пять минут, а то и меньше. Поэтому не стоит, пропускать! Сделайте Ваш дизайн еще более красивее и удобнее.
Также советую прочитать следующие статьи:
Как разместить на своем сайте кнопку оплаты?
Платежная кнопка — самый простой способ получить онлайн-оплату. Разместить такую кнопку можно на любой странице вашего сайта и принимать платежи даже без интернет-магазина. Нажав на платежную кнопку, посетитель вашего сайта автоматически переходит на страницу оплаты.
Получить кнопку для приема оплаты можно в различных сервисах, мы рассмотрим вариант от сервиса ЮMoney.
1. Для начала работы с сервисом необходимо в нем зарегистрироваться. Это можно сделать на странице. Если у вас уже есть аккаунт в ЮMoney, вы можете использовать его.
2. Авторизуйтесь в своем аккаунте ЮMoney и перейдите в раздел Сбор денег.
3. Откроется окно, в котором представлены все возможные варианты для приема платежей. Нажмите на вариант Форма/кнопка на сайт.
4. Выберите конструктор кнопки.
5. Заполните назначение перевода. Здесь вы можете указать наименование услуги или товара, который пользователь будет оплачивать. Укажите сумму платежа, выберите текст, который будет отображаться на кнопке.
ВАЖНО: сумма платежа будет фиксированной. Покупатель не сможет ее изменить.
Вы также можете выбрать, каким способом посетитель сможет произвести оплату — с помощью кошелька или с помощью карты. Можно выбрать и оба варианта, тогда на сайте потребуется разместить отдельно две кнопки для каждого способа оплаты.
6. При необходимости заполните Дополнительные настройки. Здесь вы можете настроить внешний вид кнопки, запросить личные данные у отправителя платежа. Также вы сможете указать адрес страницы вашего сайта, на которую будет автоматически перенаправлен плательщик после успешной оплаты.
7. Справа от конструктора вы всегда можете видеть вид создаваемой кнопки и, по завершению настройки, получите ее код. Скопируйте код.
8. В системе управления сайтом откройте редактор той страницы, где необходимо разместить кнопку. Добавьте виджет Встроенный код. Подробнее о том, как добавить такой виджет, описано в руководстве Виджет Встроенный код. Разместите скопированный ранее код кнопки и сохраните изменения.
На сайте кнопка будет отображаться таким образом.
ВАЖНО: Информация об оплате не будет отображаться в системе управления. Когда и каким покупателем была произведена оплата, вы сможете просматривать только в вашем аккаунте ЮMoney.