Получайте секретные материалы проекта на свой E-Mail:

Делаем кнопку для сайта за 5 минут онлайн

Здравствуйте, Дорогие читатели и посетители моего блога! В данной коротенькой статье мы поговорим о том, как сделать кнопку для сайта без особых усилий в онлайн. В этом нет ничего сложного, сейчас мы разберем один сервис, благодаря которому можно создавать красивые кнопки легко и быстро.Как сделать кнопку для сайта

Думаю многие уже знают, что дизайн сайта - очень важный фактор для продвижения и заработка. Ведь чем красивей дизайн, тем будет больше людей заходить. И если дизайн привлекает и притягивает то, тот кто зашел, позовет еще своих друзей. И так цепочка...

Поэтому нужно стараться чтобы дизайн и юзабилити были для людей. Под словом дизайн и юзабилити я имею ввиду: аккуратность в шаблоне, привлекательность, красивый логотип, шапка, красивые кнопки и т.д. Как раз о кнопках мы сейчас и поговорим!

Кнопка, которую мы будет делать нужна для того, чтобы как-нибудь украсить гиперссылку. То есть при нажатии на кнопку будет производиться переход на какую-то страницу.

Сделать кнопку для сайта можно разными способами. С помощью каких программ, тот же Photoshop или еще как-то. Именно я предпочитаю работать в онлайн, и в этом мне помогает сервис Da Button Factory, о нем и пойдет речь далее. 

Как сделать кнопку для сайта

В этом нет ничего сложного, просто следуйте инструкции ниже (в картинках) и у Вас все безусловно получится. Давайте начнем...

1. Заходим на сайта dabuttonfactory.com

Кнопка для сайта - Da Button Factory

2. Вписывает текст, который хотим видеть на кнопке и настраиваем написание (блок слева) 

Настраиваем кнопку

Text — вписывает текст, который хотим видеть на кнопке

Font — шрифт написания. Хочу отметить, что не все поддерживают кириллицу

Bold — ставите галочку и текст становится жирным

[yandexd]

Italic — ставите галочку и текст становится курсивным

Size — думаю понятно, это размер текста

Color — цвет текста

Text shadow — хотите ли использовать тень? Если да, ставьте галочку

Distance to text — размер тени

Color — цвет тени

3. Настраиваем стиль кнопки (блок справа)

Кнопка для сайта

Style — выберите подходящий стиль из списка: квадратный, закругленные углы или овальный

Background — выберите стиль окраски и цвет

Border — поставьте галочку, если нужна рамка кнопки, и выберите цвет и размер

Shadow — поставьте галочку, если кнопки нужна тень, и выберите цвет и размер

4. Настраиваем размер кнопки (блок справа внизу)

Размер кнопки

5. Выбираем тип изображения: CSS или Image (блок слева внизу)

Тип изображения

Если выбираете тип Image, то остается лишь выбрать формат (рекомендую .png) и сохранить кнопку. Для этого необходимо просто нажать на саму кнопку или на надпись download внизу ее

Скачать кнопку для сайта

Если выбираете тип CSS background, необходимо скопировать код из окна CSS code в нужно Вам место, например в виджетах.

CSS код для вставки кнопки

6. Радуемся созданной кнопкой!

[yandexd]

Вот мы и сделали красивую кнопку онлайн. Ну как тяжело? Думаю, что нет. Благодаря данному сервису можно делать очень красивые кнопки всего за пять минут, а то и меньше. Поэтому не стоит, пропускать! Сделайте Ваш дизайн еще более красивее и удобнее.

Раньше я делал кнопки в Photoshop'е. Скажу честно — то еще занятие, намного тяжелее, чем то, что мы разобрали сейчас. Если бы я раньше знал про данный сервис, не мучился бы и не тратил свое время. Но ведь, что не делается, все к лучшему! Дерзайте, теперь Вы знаете — как сделать кнопку для сайта!

Также советую прочитать следующие статьи:

Обмен ссылками-Бесплатные качественные ссылки на сайт

Как установить Яндекс Поиск на сайт

Как создать карту сайта

Как проверить и ускорить загрузку сайта

И подписаться на обновления блога, чтобы не пропустить новых полезный статей. ---> Подписаться!

C уважением, Томский школьник!

автор блога SeoKos.RU

Белан Константин Сергеевич

С уважением, Константин Белан.

Рабочая 634570 Россия, Томская обл., г. Томск, +7 952 160 36 17
Сделайте мне приятно - нажмите на любую из кнопок:
Подпишитесь на рассылку блога и получайте новые статьи на свою почту
Количество комментариев к данной статье: 39
  1. Честно говоря прочитав начало я не понял какую кнопку для сайта мы создаем...

    P.S. Я так и не понял для чего кнопка!

  2. Татьяна Саксон, Да, видео действительно очень смешное! 😆

  3. Степан, Внимательней нужно читать. Это простая кнопка при нажатие на которую будет открываться какая-либо страница. Сейчас напишу это в начале поста!

  4. Ответить

    :mrgreen: Медведь смешны, по ходу ему «Хорошо»

    А слон тоже не хуже.

    Так наржалась, что живот болит! 😆

  5. Ответить

    Классный сервис, давно пользуюсь им. Но кнопку обычно сохраняю просто как картинку на комп, если скопировать код, то там же будет ссылка на этот сервис. А зачем нам это?

    • Татьяна Чиронова, Все верно, лучше сохранять картинку на компьютер, а потом на хостинг!

  6. Приветствую...

    Хотел спросить — возможно не по теме. Подскажи пожалуйста, у тебя реализована постраничная навигация «Показать больше» при помощи какого плагина ?

    Заранее спасибо...

    • Влад, Здравствуйте! Это не плагин, это функция была встроена в шаблон.

  7. Да Костя, кнопки всегда лучше, чем обычные ссылки. Можно их делать и в сети. Но я предпочитаю фотошопить в таких случаях. :mrgreen:

    • Ответить

      Да, Александр, кнопки очень украсят и сам сайт, и другие файлы — с кнопочками красивее получается всё!

      А вот работать с фотошопом умеют не все. поэтому, и сервис существует!

  8. admin:

    Степан, Внимательней нужно читать. Это простая кнопка при нажатие на которую будет открываться какая-либо страница. Сейчас напишу это в начале поста!

    А еще можно сделать кнопку БАБЛО. И нажимать на нее каждый день. Шутка.

  9. Ответить

    Для тех, кто не умеет работать в фотошопе, хорошее решение задачи. Я лично предпочитаю фотошоп, пару минут и кнопка готова. 😉

  10. Вадим:

    В принципе, конечно лучше смотрится сайт, всячески украшенный стрелочками, кнопочками и картинками — но это ведь влияет на скорость загрузки сайта. И Гугл не особо любит такие сайты.

    Поэтому стоит задуматься о необходимости лишней кнопки на блоге.

    С уважением, Вадим.

    Если переживаешь за скорость загрузки, то просто ставишь плагин кеширования, а картинку сохраняешь в формате GIF. И все, проблема загрузки уже не проблема. 😉

  11. Ответить

    В принципе, конечно лучше смотрится сайт, всячески украшенный стрелочками, кнопочками и картинками — но это ведь влияет на скорость загрузки сайта. И Гугл не особо любит такие сайты.

    Поэтому стоит задуматься о необходимости лишней кнопки на блоге.

    С уважением, Вадим.

    • Вадим, Я бы поспорил насчет снижения скорости, ведь такая кнопка имеет небольшой размер и вес.

  12. Ответить

    Спасибо!

  13. Вот за сервис большое спасибо, буду использовать!

  14. Так как с фотошопом не очень дружу,спасибо за сайт,зашла и за минуту готова кнопка.

  15. Cпасибо за сервис, надо взять на заметку, пригодится 😉

  16. Полезная штука надо будет разместить в конце поста какого нибудь

  17. Ответить

    Александр:

    Да Костя, кнопки всегда лучше, чем обычные ссылки. Можно их делать и в сети. Но я предпочитаю фотошопить в таких случаях.

    Не все могут фотошопить, особенно новички, поэтому онлайн сервисы очень помогают! 😉

  18. Ответить

    Спасибо, Костя, за информацию о сервисе, я всегда пользовалась сервисом cooltext.com., но информация лишней не бывает!

  19. А есть какой нибудь сервис для создания баннеров

    Людмила Винокурова:

    Александр:

    Да Костя, кнопки всегда лучше, чем обычные ссылки. Можно их делать и в сети. Но я предпочитаю фотошопить в таких случаях.

    Не все могут фотошопить, особенно новички, поэтому онлайн сервисы очень помогают!

  20. Я пользуюсь другим сервисом для кнопочек, даже рубрики себе такие сделала на сайт...http://cooltext.com/ насколько я поняла имеет больший ассортимент 😛

  21. Ответить

    Ух ты себе завтра пойду сделаю. Я как та обезьянка, беру все, что блестит!

  22. Ответить

    Фотошоп не изучила, но кнопочка действительно делается легко. только что создала. все получилось. Спасибо!

  23. Александр Василенко:

    Юлия:

    Обязательно воспользуюсь Вашей подсказкой. Спасибо за ссылку.

    Александр, я смотрю у Вас с Евгением конкурс на лучшего комментатора в разгаре

    😛 Другим даже не угнаться уже...

  24. Юлия:

    Я пользуюсь другим сервисом для кнопочек, даже рубрики себе такие сделала на сайт...http://cooltext.com/ насколько я поняла имеет больший ассортимент

    Обязательно воспользуюсь Вашей подсказкой. Спасибо за ссылку.

  25. Юлия:

    Александр, я смотрю у Вас с Евгением конкурс на лучшего комментатора в разгаре

    Другим даже не угнаться уже... Через цитирование комментария у меня в модерацию попадают...

    Да, иногда приходится защищать свой титул. А что тут поделаешь

  26. Хороший, а главное простой сервис, на котором я сделал уже не одну кнопку, правда из них уже много у меня нигде не стоят, но всё же пока более — менее фотошоп не освоил, пользовался только им.

  27. Огромное спасибо,очень хорошо все расписано ,буду пробовать

  28. 😯 хороший сервис и удобный, а главное очень простой и доступный!

    Кнопки нужны для чатов, для форумов, для блогов и сайтов. Спасибо создателям данного сервиса

  29. Интересно было бы сделать кнопки на каждую статью. Думаю, как бы смотрелось это. Видел такое, но для рубрик.

  30. Ответить

    Согласен, что кнопки для дизайна важны, но многие Seo специалисты не советуют использовать css в коде страницы (имеется в виду про код в тегах style).

  31. Ответить

    Вот ведь имела как-то адрес этого сервиса по изготовлению кнопок — но потом потеряла!

    А здесь у Кости есть всё! Теперь буду создавать красивые кнопки сама!

  32. про этот сервис не слышал да и кнопки не делал, ну все же спасибо за пост !

  33. Александр, спасибо! А как сделать на кнопке текст в столбик? Например: вопросы-

    ответы

  34. Ответить

    Константин, очень понятно и грамотно описано, как сделать кнопку онлайн.

    Я даже получила удовольствие от вашей статьи.

    Большое спасибо!

  35. Ответить

    Костя благодарю за статью.

    Все подробно описано,спасибо большое