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

Как сделать кнопку для сайтаЗдравствуйте мои дорогие друзья!

Сегодня я хочу поделиться с вами ещё одной довольно Как сделать кнопку для сайтаполезной информацией о том, где и как сделать кнопку для сайта.

Как сделать кнопку для сайтаГуляя по просторам интернета я наткнулась на очень интересный онлайн сервис, где можно сделать за 5 мин вот такие, или такие как нужно вам,  симпатичные кнопки для сайта. Вы можете вписать в эти кнопки любой нужный вам текст, любого цвета и с любым фоном. Эти кнопки маскируют ваши гиперссылки для перехода на другую, заданную в гиперссылке страницу.

Красивый дизайн сайта всегда привлекает к себе внимание ваших посетителей, и они приходят к вам чаще. Эти кнопочки создают более привлекательный вид нежели написанные слова «Скачайте по этой ссылке» , а то и вообще просто ссылка, и многое в этом духе.  

Согласитесь, что красивая и эффектная кнопочка  будет выглядеть всегда привлекательнее и будет вызывать куда большее желание чтобы нажать на неё. Сохранённые в png формате они весят очень мало, а сделать их можно даже менее чем за 5 мин. Пять минут мне понадобилось на первую кнопочку пока всё попробовала и рассмотрела, а за следующие 10 минут я поменяла все кнопки на своём блоге на новые.

Конечно, сделать кнопку для сайта можно разными способами, к примеру, в фотошопе. Но это сделать может только тот человек кто очень хорошо «дружит» с этой программой, а для новичка это будет сделать довольно проблематично, во всяком случае, пока он не освоит хотя бы азы фотошопа, и займёт это кучу времени.

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

Рассмотрим как сделать кнопку для сайта.

Итак, приступим к знакомству с сервисом Da Button Factory и познакомимся с тем, как же он работает.

Переходим на сайт  dabuttonfactory.com

Чтобы вам легче было понять, особенно тем у кого нет перевода страницы я сделаю  на скриншоте русский перевод.

Рассмортим первый блок:

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

Как видно на скриншоте, вам нужно только ввести "текст" вашей кнопки, задать ей "шрифт" простой, либо "жирный" или "наклонный" (поставив там галочку), нужна "тень текста" или нет(указав галочкой). Если тень нужна то задать её "размер и цвет".

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

Переходим ко второму блоку:

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

 Здесь выбираем "стиль" нашей кнопки - "прямоугольный", "округлый" или "круглый".

Подбираем "фон" - "два цвета","градиент" или "пирамида" (экспериментируйте сами) и подбираем цвет фона.

Выбирая "пограничная" вы делаете обводку вашей кнопки нужного вам цвета (откроется дополнительное окно).

Поставив галочку " тени?" вы можете сделать в дополнительной области глубину тени и её цвет.

Больше я ничего не ставила, а вы можете по экспериментировать, если у вас будет желание. В нижнем блоке оставляйте "размер" - "переменная", тогда размер вашей кнопки будет увеличиваться в длину, при написании текста, автоматически.

Можете поменять отступы по вертикали и горизонтали, лично я всё оставляла по умолчанию и ничего не меняла (меня всё пока устраивало).

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

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

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

Если вы на первом скриншоте в "типе выхода" указали "изображение", то у вас под кнопкой будут только две строчки со ссылками,а если указали "CSS фон", то у вас ниже сразу откроется и код вашей кнопки, который вам нужно будет скопировать и вставить в виджет вашего сайдбара или туда куда вам ещё нужно. Но имейте ввиду что вместе с кодом вы переносите на свой блог и ссылку этого сайта.

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

Ну вот вроде бы и всё. Красивых Вам кнопок!

Если вам понравилась статья, как сделать кнопку для сайта, то делимся ею со своими друзьями в соц.сетях либо обмениваемся мнениями в комментариях.

Поделиться в соц. сетях

Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники
Нравится
Запись опубликована в рубрике Онлайн сервисы. Добавьте в закладки постоянную ссылку.

44 комментария: Как сделать кнопку для сайта за 5 мин.

  1. Лидия говорит:

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

    • Ольга говорит:

      А главное Лидия очень быстро! На первую пока всё попробуете может и уйдёт 5 мин , на последующие можно сделать и за 1 минуту.

  2. Маргарита говорит:

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

  3. Евгений говорит:

    Спасибо, Ольга! Очень интересный и полезный сервис! Обязательно воспользуюсь им и создам эти кнопочки! ;-)

  4. Ирина говорит:

    Ольга, спасибо за хорошую подсказку. Надо посмотреть. Обязательно пригодится на наших сайтах!

    • Ольга говорит:

      Сделать её всегда быстрее чем потом где то искать картинку на это похожее. А применить их можно как угодно, здесь дело вкуса и фантазии.

  5. Тамара говорит:

    Понравилась кнопочка. Я всякие прибамбасы люблю, но мне трудно все дается. Привлекает, что просто и быстро. Надо попробовать.

  6. Ирина говорит:

    А как под нее ссылку подставить? Ведь кнопка должна куда-то вести?

    • Ольга говорит:

      Очень просто Ирина! В редакторе когда установите эту кнопку в вашу запись, нужно нажать на неё (так же как вы и увеличиваете или уменьшаете картинку) и нажать на значёк в редакторе гиперссылка.У вас откроется дополнительное окошко куда вам нужно ввести нужный URL адрес.Всё тоже самое как вы делаете и перелинковку, только там вы выделяете сам текст а здесь саму картинку. А если вам нужно вставить в сайдбар кодом, то сначала поставьте эту картинку в поле записи, сделайте из неё гиперссылку как я уже описала, а потом переведите вашу картинку в редакторе на HTML просмотр.Вам откроется код этой картинки с уже вставленной гиперссылкой.Скопируйте этот код и вставьте его в виджет сайдбара или туда куда вам ещё нужно. Всё. При нажатии на кнопку она сработает как гиперссылка и перенаправит вас на другую страницу.

  7. Роман говорит:

    Спасибо за нужную информацию как раз то что нужно мне было С меня твит

  8. Татьяна Туманова говорит:

    Здорово. Беру на заметку. И себе, и поделюсь с теми, кто не очень дружит с фотошопом и HTML-ом. Спасибо.

  9. Дмитрий говорит:

    Ольга. У Вас очень неплохие скриншоты получаются, спасибо.

  10. Тамара говорит:

    Спасибо Вам Ольга за подробное разъяснение про эти красивые кнопочки. Скриншоты мне тоже очень понравились.

  11. Олег говорит:

    Полезно, особенно для одностраничников. Там даже не страшно, что лишняя ссылка.

  12. Ольга говорит:

    Им можно везде найти применение.

  13. Ксения говорит:

    Спасибо, обязательно возьму на заметку! Вдруг когда пригодится!

  14. Sasha говорит:

    А почему шаблон не меняете? Полезная информация теряется…. Хотите побольше статей написать, а потом переехать?

    • Ольга говорит:

      Да вот как раз этим вопросом и занимаюсь.

      • Sasha говорит:

        Отлично) А то очень ценная, хорошая информация на его фоне теряется.
        Успехов в выборе нового шаблона! Сама знаю, что это не сильно легко. Кажется, что их очень много, а на сама деле, как начнешь искать, так ничего приличного и нет)))). И вечно что-то доделывать/изменять приходится….

        В общем, терпения вам и удачи)

  15. Ольга говорит:

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

  16. Ольга говорит:

    Оля, у меня получилось установить эту кнопку, большое спасибо. На сколько привлекательней смотрится страничка, просто класс!

  17. Надежда Пинчук говорит:

    Сервис, действительно, очень хорош. И в работе просто незаменим. Пользуюсь им.

  18. sana говорит:

    Для меня эта статья очень актуальна, большое спасибо. Занесу в закладки.

  19. Елена говорит:

    Ольга, спасибо. Мне очень пригодится.

  20. Ольга говорит:

    Да я и сама к ним теперь обращаюсь почти в каждой статье.

  21. Александр говорит:

    Очень интересно и информативно,хорошо разъясненная тема должна привлечь внимание и вернуть посетителя на сайт.Александр(monymaker.ru)

  22. Андрей говорит:

    Использовал в своей новой статье, спасибо за находку.+

  23. luba говорит:

    У Вас всегда можно почерпнуть интересную информацию для сайта. Я, как белочка в дупло, складываю всё в закладки, но не нахожу времени, чтобы применить на практике. Надо будет как-то забросить все дела и пересмотреть всё, что насобирала. Спасибо.

    • Ольга говорит:

      К сожалению не одни вы. У меня уже столько накопилось о чём и написать и самой сделать нужно, а времени так на всё не хватает.

  24. Рашида говорит:

    Отличный сервис по созданию кнопки, спасибо Ольга, за столь подробный и понятный рассказ о создании кнопки для сайта.

Добавить комментарий для Ольга Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *