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


 

Как сделать кнопку для сайта за 5 минут онлайн? Это безумно просто с помощью онлайн сервиса cooltext.

Вот пример кнопки:

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

Внимание! Кнопка рабочая!

В действительности работа над кнопкой для сайта на сервисе cooltext заняла у меня даже меньше пяти минут. 5 минут примерно ушло вместе с добавлением в пост.

Скажем откровенно в фотошопе над такой пришлось бы по… постараться ;) А так бац-бац и в точку!

Вот еще один пример трехминутной работы на cooltext:

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

Кнопка рабочая! Подпишись на RSS сайта по е-мэйл!

Если Вы конечно гений фотошопа, то ДА! Можете сделать себе кнопку для сайта красивше, но не факт что быстрее.

А если знаний в вышеописанной программе недостаточно или нужно делать несколько кнопок сразу, то онлайн-сервис cooltext (култекст) тут как тут! В нем это ОЧЕНЬ просто! (можно на этом сайте делать также логотипы для сайта онлайн и баннеры, но получаются они скажем откровенно очень посредственными, хотя, возможно, это я мало времени уделил).

Итак, как сделать кнопку для сайта онлайн:

Заходите на главную страницу cooltext, это раз.

Внизу выбираете стиль кнопки -это два.

Пишите текст и настраиваете под себя все параметры кнопки и шрифта: цвет, размер, тень, эффект — на следующей странице и жмете кнопку «Render Button» -это три!

Фуууу! Замотался я с Вами пойду кофейку попью…

…ничто так не способствует написанию текстов, как свежесваренная натуральная арабика.

Что уже дальше сами разобрались? Нет? Ну тогда продолжим:

Далее скачиваем ДВЕ! а не три… кнопки ПОД КОТОРЫМИ НАПИСАНО Download Image.

Копируем код в тело сайта и всё) Ах да путь к кнопкам для сайта не забудьте прописать))))
где-то так:

<img src="http://dollar-zone.ru/img/cooltext9.png" onmouseover="this.src='http://dollar-zone.ru/img/cooltext9MouseOver.png';" onmouseout="this.src='http://dollar-zone.ru/img/cooltext9.png';">

Если кнопка находится в корне сайта, то по такому адресу она может не отображаться!!! В этом случае попробуйте прописать следующим образом:


<img src="http://img.dollar-zone.ru/cooltext9.png" onmouseover="this.src='http://img.dollar-zone.ru/cooltext9MouseOver.png';" onmouseout="this.src='http://img.dollar-zone.ru/cooltext9.png';">

Есть ещё один вариант: можно сделать не кнопку, а ленту в стиле web 2.0 в углу сайта. Смотрится она довольно прилично, к тому же замечательно привлекает внимание. Об этом я рассказал Вам в своём видеоуроке.

Внимание!!! Если Вам необходима кнопка с русским текстом, то делается это не сложно:
делаете кнопку без текста, далее открыв ее в фотошопе пишете текст(предварительно выбрав размер и стиль шрифта) и инструментом перемещение центрируете надпись как Вам необходимо.

Надеюсь, что информация о том как сделать кнопку за 5 минут онлайн бесплатно была Вам действительно полезной.

P.S. В комментах спросили и я решил дописать пост. Путь к картинке не только нужно прописать, но и сделать картинку ССЫЛКОЙ! А делается это следующим образом:


<a href="ссылка_на_которую_перейдет посетитель_после_нажатия_на_кнопку.ru" >путь_к_кнопкам </a>

Вокруг рисунка появится рамка (указывающая, что кнопка является ссылкой). Если она портит внешний вид, то в атрибутах рисунка укажите border="0"

Кстати, точно так же можно сделать картинку ссылкой!

Вот теперь точно все!

Если и этого оказалось мало, то прочитайте мою новую статью: Где и как разместить в интернете картинку (баннер, кнопку, логотип) бесплатно. Подробный мануал.

 
Статья прочитана 18456 раз(a).
 
Еще из этой рубрики:
Комментарии к записи "Как сделать кнопку для сайта за 5 минут онлайн."

Добавить комментарий
  1. Здравствуйте автор,спасибо вам большое :)
    Только вот я теперь не понимаю как мне зашифровать ссылку в созданной кнопке :) ?
    подскажите плз )
    Заранее спс)

  2. День добрый, не судите строго, я новичок в этих делах. Кнопку то сделал а прописать не получается. Код написал такой:

  3. Спасибо, за сервис — пошел делать свою кнопку.

  4. Спасибище! Вы меня спасли! Так не хотелось скачивать фотошоп и еще в нем разбирать ;-)

    Вот тока вопросик. Кнопку сделала, ссыль прописала, все работает. Вот только вокруг кнопки появилась какая-то красная линия. Как-бы рамка таблицы. Да, кстати кнопка как-раз ячейка таблицы. Это можно как-нибудь убрать? (толщину границ таблицы — прописала 0)

    • На здоровье, Emili :-) Наконец-то хоть у кого-то работает с первого раза и не нужно курс молодого бойца проводить по е-мэйл)

      А теперь по сути. Я так полагаю, что это происходит на границе с фоном. То есть фон и кнопка отличаются по цвету и из-за этого может быть такая беда. Может граница кнопки не прописана border=»0″? Тогда тоже может рамка появиться.

      Если не секрет, Вы сайт вручную в html делаете? Я свой первый сайт тоже умудрился ручками сделать)))

      • Еще одно спасибище от меня)))) Действительно, прописала границу кнопки — рамка исчезла!!! УРА!!!
        Ага, вручную.. Пока не знаю, получится ли что-нибудь вообще)))
        А какие еще способы есть? Просто интересно.. я знаю только три (но я уже давно и не работаю и не учусь ;-) мои сведения могли и устареть) — шаблоны (я их не люблю — мне кажется там нет изюминки), html — над которым долблюсь))) и просто заказать сайт у профи — самый верный способ наверное получить хороший сайт (этот вариант рассматриваю как запасной).

        • Вы героиня, Emili, я просто восхищаюсь! Сайт-то получится! Чур только меня первого на открытие позвать!

          Я теперь не заморачиваюсь, а просто беру движок и подбираю на него тему-шаблон. Быстрее намного! А время оно на вес золота. Хотя практика написания сайта вручную пригодилась — теперь я хоть что-то понимаю когда делаю или правлю) Этот блог работает на вордпресс — мне этот движок больше всех нравится)))

          • Впрочем, смотря для чего необходим сайт…

          • Да нет.. Героиня не я.. а Вы и те, кто делится знаниями.. а я так — спиногрыз)))
            Движок и что-то там еще — это я на потом оставлю. Сейчас и так голова от новых слов раскалывается ;-)
            Да и времени вроде хватает. Сначала мне хотелось бы основу понять, чтоб потом уже выпендриваться))

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

            В ближайшее время надеюсь скину ссыль на мой пока сыроватый сайт.

  5. Здравствуйте! Спасибо за статью! И мне нужен очень Ваш совет, у меня сайт на движке WordPress, и я не могу разобраться куда вставлять код, в какой корень сайта?
    Буду признателен за помощь!

    • shark74, код не нужно вставлять в корень сайта. Код вставляется в файл. Например если кнопка планируется справа, то код вставляется в файл sidebar.php если внизу, то footer.php и т.д. Если прямо в статье, то при редактировании нужно выбирать не визуальные редактор, а html. А вот в корень нужно закачивать картинку. Ваш сайт на WP находится на хостинге. Вот в корень WP и нужно её(картинку) закачать. Можно в отдельную папку ( к примеру images). Если что-то будет еще пишите постараюсь помочь.

  6. Вот спасибо. Сделала себе кнопочку за 5 мин. Все очень доступно изложено

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

  8. Вот спасибо. Сделала себе кнопочку за 5 мин!!!
    А где находиться код????

  9. А как сделать кнопку «мне нравится» толька для своего сайта а не от Вконтакте или Facebook?

    • Очень просто, Олег, нужно всего лишь научиться работать с фотошоп и выучить php и html. А дальше дело в шляпе — сами напишите! И если не секрет, для чего Вам нужна такая кнопка вообще?

  10. Спасибо, сделал кнопочку для своего сайта про автомобили, получается аккуратно и красиво.

  11. спасибо — сейчас буду пробывать кнопку в действии

  12. Здравствуй админ, спасибо за эту статью! Раньше долго мучался с фотошопом и не знал что есть такой простой способ=))))

  13. СПС за этот сайт вот мой сайт www.dragon-cs.3dn.ru снизу там мой баннер)))
    лишнию рекламу убрал и размер поменял и всё готова)))

  14. Огромное преогромное спасибо!!!!!
    Вы просто молодец!!!

  15. Отличный сервис и хорошие советы, спасибо

  16. Cпасибо за такой хороший урок. Все поняла кроме одного. Кнопку я сделала, скачала 2 изображения, прописала как вы сказали:

    Все отлично работает- кнопки с эффектом нажатия, но не могу сделать их ссылкой.
    куда вставлять вот это?
    a href=»ссылка_на_которую_перейдет посетитель_после_нажатия_на_кнопку.ru» rel=»nofollow»>путь_к_кнопкам объясните поподробней, буду очень признательна)))

    • Саша, всё очень просто. Вот то что у Вас получилось — большой такой код кнопок — это путь к кнопкам. То есть вставьте всё то что получилось вместо слов путь_к_кнопкам. А «ВОТ ЭТО» это и есть ссылка. И её нужно вставить вместе с кодом кнопок туда, где должна стоять кнопка. Вместо слов «ссылка_на_которую_перейдет посетитель_после_нажатия_на_кнопку.ru» вставляется адрес на который человек перейдет нажав кнопку. Например, если мне нужно сделать кнопку, нажав на которую я должен попадать на сайт http://konkursblog.ru/, тогда вместо слов «ссылка_на_которую_перейдет посетитель_после_нажатия_на_кнопку.ru» нужно вставить между кавычек адрес сайта http://konkursblog.ru/. Я надеюсь, что теперь гораздо понятнее. Если не получится стучите ко мне в асю. Номер аси я писал в комментариях выше. Только сразу пишите сообщение… иначе я могу принять за спам и не авторизовать.

      • спасибо вам огромное, все получилось!!!! как я сразу не додумалась, что кнопку которую я прописала, нужно вставить в поле «путь_к_кнопкам». сделала очень прикольную горизонтальную менюшку. на самом деле я уже около полугода пользуюсь этим сервисом. если не секрет как вы делали один из своих первых сайтов??? мне лично на юкозе приходится)))) кстати я тоже скажу вав хороший сайтик полезный веб-мастеру. во держите: http://www.bannersabc.com/ . может и про него напишите статью?????

        • На здоровье! Умными не рождаются — умными становятся)))

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

          Поинтересуюсь. Спасибо за наводку!

          P.S. Я смотрю Ваш сайт потихоньку хорошеет))) Заходите ещё.

  17. на cool text можно логотипы с русскими надписями создавать!

  18. Автору огромное спасибо всё вроде понятно!
    У меня к вам есть вопрос как указать положение кнопки на сайте в HTML или в CSS?

  19. Кстати если кому то будет интересно то есть ещё и такая фишка,
    onclick=»" – картинка появляется после того как мышку отпустили. (т.е. после клика).

  20. Кстати я обязательно к вам подолблюсь на асю, я тоже интересуюсь как сделать сайт своими ручками)))

  21. кнопка у меня получилась, а вот поставить все это дело на страницу…..хоть убейте меня…. где нибудь можно найти пошаговую инструкцию для «особо одаренных»))) именно по написанию кода??? я в этом деле новичок из новичков, но хочется быстро всему научиться…

  22. Это довольно таки простой вариант кнопки, искала раньше но попадалось всё какое то замудрённое. Спасибо!

  23. УУУУУУУУУУУУУУУУУУУУ я так мог и сам намного лучше сделать ну эти красиво тоже получаются ну всёравно спс

    • Лично я тоже могу сделать ГОРАЗДО лучше, но разговор ведь идет о пяти-десяти минутах, то есть кнопка по-быстрому для новичков в этом деле, а следовательно этот сервис самое то!)))

  24. Кнопочку сделал, поставил виджет с ней, а вот как в рамочку код поставить ниже кнопки?

  25. Спасибо разобрался, а сначала и не понял)

  26. Здравствуйте!
    По Вашей инструкции сотворила кнопочку для сайта… Все радует, ссылка прописывается, но вместо картинки появляется квадратик с красным крестиком внутри. Почему не появляется картинка (сама кнопка?)Что я сделала не верно? Помогите, пожалуйста!!!! =)

  27. Здравствуйте! Спасибо за нужную информацию, очень помогли, кнопки заработали.

Здесь вы можете написать комментарий к записи "Как сделать кнопку для сайта за 5 минут онлайн."

* Текст комментария
* Обязательные для заполнения поля
Внимание: Все отзывы проходят модерацию.

Архивы
Наши партнеры
Читать нас
Связаться с нами