Как сделать кнопку для сайта за 5 минут онлайн? Это безумно просто с помощью онлайн сервиса cooltext.
Вот пример кнопки:
Внимание! Кнопка рабочая!
В действительности работа над кнопкой для сайта на сервисе cooltext заняла у меня даже меньше пяти минут. 5 минут примерно ушло вместе с добавлением в пост.
Скажем откровенно в фотошопе над такой пришлось бы по… постараться 
А так бац-бац и в точку!
Вот еще один пример трехминутной работы на cooltext:
Кнопка рабочая! Подпишись на RSS сайта по е-мэйл!
Если Вы конечно гений фотошопа, то ДА! Можете сделать себе кнопку для сайта красивше, но не факт что быстрее.
А если знаний в вышеописанной программе недостаточно или нужно делать несколько кнопок сразу, то онлайн-сервис тут как тут! В нем это ОЧЕНЬ просто! (можно на этом сайте делать также логотипы для сайта онлайн и баннеры, но получаются они скажем откровенно очень посредственными, хотя, возможно, это я мало времени уделил).
Итак, как сделать кнопку для сайта онлайн:
Заходите на главную страницу 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"
Кстати, точно так же можно сделать картинку ссылкой!
Вот теперь точно все!
Если и этого оказалось мало, то прочитайте мою новую статью: Где и как разместить в интернете картинку (баннер, кнопку, логотип) бесплатно. Подробный мануал.
Похожие записи:
|
|
Здравствуйте автор,спасибо вам большое
?
Только вот я теперь не понимаю как мне зашифровать ссылку в созданной кнопке
подскажите плз )
Заранее спс)
Не совсем понял вопроса, но предполагаю, что имелось ввиду «как сделать из кнопки-картинки ссылку». Решил добавить ответ на этот вопрос в статью. Так что читайте выше.
А можно точные инструкции как сделать из картинки, кнопку, в Фотошопе разбираюсь хорошо, а вот см кнопками не очень=)
День добрый, не судите строго, я новичок в этих делах. Кнопку то сделал а прописать не получается. Код написал такой:
Вадим, не вижу кода… стучите в асю помогу в индивидуальном порядке 392228011 или пишите на мыло
Спасибо, за сервис – пошел делать свою кнопку.
Спасибище! Вы меня спасли! Так не хотелось скачивать фотошоп и еще в нем разбирать
Вот тока вопросик. Кнопку сделала, ссыль прописала, все работает. Вот только вокруг кнопки появилась какая-то красная линия. Как-бы рамка таблицы. Да, кстати кнопка как-раз ячейка таблицы. Это можно как-нибудь убрать? (толщину границ таблицы – прописала 0)
На здоровье, Emili
Наконец-то хоть у кого-то работает с первого раза и не нужно курс молодого бойца проводить по е-мэйл)
А теперь по сути. Я так полагаю, что это происходит на границе с фоном. То есть фон и кнопка отличаются по цвету и из-за этого может быть такая беда. Может граница кнопки не прописана border=»0″? Тогда тоже может рамка появиться.
Если не секрет, Вы сайт вручную в html делаете? Я свой первый сайт тоже умудрился ручками сделать)))
Еще одно спасибище от меня)))) Действительно, прописала границу кнопки – рамка исчезла!!! УРА!!!
мои сведения могли и устареть) – шаблоны (я их не люблю – мне кажется там нет изюминки), html – над которым долблюсь))) и просто заказать сайт у профи – самый верный способ наверное получить хороший сайт (этот вариант рассматриваю как запасной).
Ага, вручную.. Пока не знаю, получится ли что-нибудь вообще)))
А какие еще способы есть? Просто интересно.. я знаю только три (но я уже давно и не работаю и не учусь
Вы героиня, Emili, я просто восхищаюсь! Сайт-то получится! Чур только меня первого на открытие позвать!
Я теперь не заморачиваюсь, а просто беру движок и подбираю на него тему-шаблон. Быстрее намного! А время оно на вес золота. Хотя практика написания сайта вручную пригодилась – теперь я хоть что-то понимаю когда делаю или правлю) Этот блог работает на вордпресс – мне этот движок больше всех нравится)))
Впрочем, смотря для чего необходим сайт…
Да нет.. Героиня не я.. а Вы и те, кто делится знаниями.. а я так – спиногрыз)))
Движок и что-то там еще – это я на потом оставлю. Сейчас и так голова от новых слов раскалывается
Да и времени вроде хватает. Сначала мне хотелось бы основу понять, чтоб потом уже выпендриваться))
Сайт нужен для рекламы моих собак. Так что супер технологии не обязательны. просто хотелось бы красиво и информационно. Вот сейчас еще на курсы фотографов собираюсь – так что надеюсь с помощью хороших фото – получится что-нибудь не совсем рвотное)))
В ближайшее время надеюсь скину ссыль на мой пока сыроватый сайт.
Здравствуйте! Спасибо за статью! И мне нужен очень Ваш совет, у меня сайт на движке WordPress, и я не могу разобраться куда вставлять код, в какой корень сайта?
Буду признателен за помощь!
shark74, код не нужно вставлять в корень сайта. Код вставляется в файл. Например если кнопка планируется справа, то код вставляется в файл sidebar.php если внизу, то footer.php и т.д. Если прямо в статье, то при редактировании нужно выбирать не визуальные редактор, а html. А вот в корень нужно закачивать картинку. Ваш сайт на WP находится на хостинге. Вот в корень WP и нужно её(картинку) закачать. Можно в отдельную папку ( к примеру images). Если что-то будет еще пишите постараюсь помочь.
Вот спасибо. Сделала себе кнопочку за 5 мин. Все очень доступно изложено
Здравствуйте, Я вот на некоторых сайтах видела как под кнопкой делается развертка где собственно и прописан код кнопки, подскажите пожалуйста как это сделать.. я конечно понимаю что не совсем туда пишу, но если можно помогите пожалуйста=)
Делается это вставкой тега <code></code>. А внутри тега code(проще говоря между открывающим и закрывающим тегами) пишется сам код который и должен быть виден.
Вот спасибо. Сделала себе кнопочку за 5 мин!!!
А где находиться код????
koln, не понял сути вопроса) Объясните подробнее о чем вы) Или напишите мне на мыло)
А как сделать кнопку «мне нравится» толька для своего сайта а не от Вконтакте или Facebook?
Очень просто, Олег, нужно всего лишь научиться работать с фотошоп и выучить php и html. А дальше дело в шляпе – сами напишите! И если не секрет, для чего Вам нужна такая кнопка вообще?
Спасибо, сделал кнопочку для своего сайта про автомобили, получается аккуратно и красиво.
спасибо – сейчас буду пробывать кнопку в действии
Удачи в этом нелегком деле)))
Здравствуй админ, спасибо за эту статью! Раньше долго мучался с фотошопом и не знал что есть такой простой способ=))))
Всегда пожалуйста, Саня!)))
СПС за этот сайт вот мой сайт снизу там мой баннер)))
лишнию рекламу убрал и размер поменял и всё готова)))
Огромное преогромное спасибо!!!!!
Вы просто молодец!!!
Отличный сервис и хорошие советы, спасибо
Интересный сервис.
ой, спасибо Вам большое!))
Уже можно на ты)))))))
Cпасибо за такой хороший урок. Все поняла кроме одного. Кнопку я сделала, скачала 2 изображения, прописала как вы сказали:
Все отлично работает- кнопки с эффектом нажатия, но не могу сделать их ссылкой.
куда вставлять вот это?
a href=»ссылка_на_которую_перейдет посетитель_после_нажатия_на_кнопку.ru» rel=»nofollow»>путь_к_кнопкам объясните поподробней, буду очень признательна)))
Саша, всё очень просто. Вот то что у Вас получилось – большой такой код кнопок – это путь к кнопкам. То есть вставьте всё то что получилось вместо слов путь_к_кнопкам. А «ВОТ ЭТО» это и есть ссылка. И её нужно вставить вместе с кодом кнопок туда, где должна стоять кнопка. Вместо слов «ссылка_на_которую_перейдет посетитель_после_нажатия_на_кнопку.ru» вставляется адрес на который человек перейдет нажав кнопку. Например, если мне нужно сделать кнопку, нажав на которую я должен попадать на сайт , тогда вместо слов «ссылка_на_которую_перейдет посетитель_после_нажатия_на_кнопку.ru» нужно вставить между кавычек адрес сайта . Я надеюсь, что теперь гораздо понятнее. Если не получится стучите ко мне в асю. Номер аси я писал в комментариях выше. Только сразу пишите сообщение… иначе я могу принять за спам и не авторизовать.
спасибо вам огромное, все получилось!!!! как я сразу не додумалась, что кнопку которую я прописала, нужно вставить в поле «путь_к_кнопкам». сделала очень прикольную горизонтальную менюшку. на самом деле я уже около полугода пользуюсь этим сервисом. если не секрет как вы делали один из своих первых сайтов??? мне лично на юкозе приходится)))) кстати я тоже скажу вав хороший сайтик полезный веб-мастеру. во держите: . может и про него напишите статью?????
На здоровье! Умными не рождаются – умными становятся)))
Не секрет. Первый сайт я написал вручную на html примерно за сутки. Второй сайт был на юкозе, которого мне через пару месяцев стало мало и я ушел на профессиональную платформу wordpress. Но многим для первого блина до сих пор рекоменую юкоз. Впрочем, сейчас , которые смогут попробовать себя в качестве журналиста на блог-платформе wordpress.
Поинтересуюсь. Спасибо за наводку!
P.S. Я смотрю Ваш сайт потихоньку хорошеет))) Заходите ещё.
на cool text можно логотипы с русскими надписями создавать!
Это радует) Значит я не искал легких путей)))
Автору огромное спасибо всё вроде понятно!
У меня к вам есть вопрос как указать положение кнопки на сайте в HTML или в CSS?
Иногда работает html через тег align=»" внутри указывается положение left по левому краю, center или right по центру и по правому краю соответственно. Указывается в атрибутах картинки. А иногда приходится копаться в css.
А в пикселях?
Весьма рекомендую))) Там могут многое подсказать… не нужно искать по всему интернету. Когда начинал работать с php и вордпресс все решения находил именно там.
Вот добавь ещё в пост эту инфу
onmousedown=»this.src=’3.png’;» – она появится при нажатии на мышку (когда она зажата)
Спасибо за информацию. Эт конечно тоже хорошее дело. Но я считаю, что нужно выбирать что-то одно. Либо mouseover либо mousedown. Это уж как кому нравится… К тому же дописывать код многим просто не под силу, в следствие отсутствия базовых знаний в html.
Кстати если кому то будет интересно то есть ещё и такая фишка,
onclick=»" – картинка появляется после того как мышку отпустили. (т.е. после клика).
Это интересные вещи) и грамотному вебмастеру будет интересно с ними побаловаться)))
Кстати я обязательно к вам подолблюсь на асю, я тоже интересуюсь как сделать сайт своими ручками)))
кнопка у меня получилась, а вот поставить все это дело на страницу…..хоть убейте меня…. где нибудь можно найти пошаговую инструкцию для «особо одаренных»))) именно по написанию кода??? я в этом деле новичок из новичков, но хочется быстро всему научиться…
Там где-то в комментах должна быть ася))) стукни)
Это довольно таки простой вариант кнопки, искала раньше но попадалось всё какое то замудрённое. Спасибо!
УУУУУУУУУУУУУУУУУУУУ я так мог и сам намного лучше сделать ну эти красиво тоже получаются ну всёравно спс
Лично я тоже могу сделать ГОРАЗДО лучше, но разговор ведь идет о пяти-десяти минутах, то есть кнопка по-быстрому для новичков в этом деле, а следовательно этот сервис самое то!)))
Кнопочку сделал, поставил виджет с ней, а вот как в рамочку код поставить ниже кнопки?
У Вас на сайте все кнопки рабочие…
Спасибо разобрался, а сначала и не понял)
Здравствуйте!
По Вашей инструкции сотворила кнопочку для сайта… Все радует, ссылка прописывается, но вместо картинки появляется квадратик с красным крестиком внутри. Почему не появляется картинка (сама кнопка?)Что я сделала не верно? Помогите, пожалуйста!!!! =)
Анна, напишите адрес сайта, а ещё лучше мне на почту попробую глянуть… avtobloger[доберман]yandex.ru