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

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

Здравствуйте, друзья!

Сегодня мы научимся как создать кнопку онлайн для своих интернет ресурсов — рассылки, блога, скайпа, подписных страниц.

Делать кнопку, как Вы поняли, мы будем на онлайн сервисе, на сайте cooltext.com.

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

Но наша задача сегодня — это создать кнопку. Идём по ссылке  http://cooltext.com/

Попадаем на страницу с логотипами, опускаемся вниз страницы, последние ряды — это шаблоны кнопок.

кнопки

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

Я для примера выбрала вот такую вот кнопку.  knopka

И сейчас мы её будем редактировать. Нажав на понравившуюся кнопку, мы переходим на страницу создания кнопки.

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

шрифт

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

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

Если поставим галочки, то можем выделить текст жирным или курсивом.

Далее — обводка букв. Если нажмём на треугольник — в выпавшем меню выбираем тип обводки, а нажав на цветовой квадратик — цвет обводки.

В разделе — тень текста — нажимаем на понравившийся тип тени и её цвет.

Чуть подробнее по смещению. Вы можете сместить текст вправо, влево, вверх, вниз относительно кнопки.

Х: с минусом — смещение влево, с плюсом — смещение вправо
У: с минусом — смещение вверх, с плюсом — смещение вниз.

Отредактировав текст на кнопке, переходим к редактированию самой кнопки (кликабельно)

редактирование кнопки

Выбираем форму кнопки — здесь Вы из первоначальной кнопки можете сделать любую форму.

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

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

Следующий раздел — обводка кнопки. Также выбираете тип обводки и её цвет.

Далее настраиваем тень кнопки, её цвет и другие эффекты.

Теперь переходим к размерам кнопки. По умолчанию Вы видите те размеры (ширина, высота), котрые присвоены данному шаблону. Рядом с этими размерами стоят галочки в словах «Auto».

Это значит, если Вы будете изменять размер текста кнопки, автоматически будет увеличиваться и сама кнопка (её ширина и высота). Если же Вам надо выставить какой-то свой размер кнопки или сделать текст большим, а кнопку оставить прежней, или какие-то другие варианты, то просто уберите галочки и выставьте нужный Вам размер.

Когда настроили кнопку так, как Вам нравится, нажимаете большую синюю кнопку, которая по-русски называется «Создать кнопку» и переходите на такую вот страницу. (кликабельно)

готовая кнопка

Здесь Вы можете выбрать один из вариантов (можно и оба) кнопки и скачиваете её себе на компьютер. Можно взять html код данной кнопки.

Если же что-то не понравилось, можно нажать на «Редактировать» и вернуться обратно. Сделать нужные настройки и снова нажать на синюю кнопку «Создать кнопку». И так можно возвращаться сколько угодно раз, пока кнопочка не будет Вам радовать глаз.

Вот и всё, друзья!Теперь Вы знаете как создать кнопку онлайн. Ничего трудного здесь нет, а вот удовольствие от своего творчества Вам гарантирую!

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

А мы продолжаем мини-конкурс «Найди смайл»

В прошлый раз первыми были дед Виталя (4 балла) и снова Ирина (2 балла).

Общий счёт: дед Виталя — 23 балла, Ирина — 19 баллов, Лилия — 13 баллов, Евгения -9 баллов, Александра — 6 баллов, Ольга -5 баллов, Лана и Томский школьник -по 2 балла.

Сегодня Вас смайлики ждут в рубриках «Автоматизация» и «Программы»

С уважением, Людмила Винокурова

Комментариев (24)

  1. Симпатичные кнопочки получаются. В свое время искала такую информацию =)

    [Ответить]

    Степан Reply:

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

    [Ответить]

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

    Конечно, может и этот сервис пригодится когда-нибудь!

    [Ответить]

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

    Ты-то, Иринка, знаешь этот сервис! ;)

    [Ответить]

    Сюрпризы жизни Reply:

    Впуклость-выпуклость классно здесь делать, а всё остальное предпочитаю в фотошопе.

    [Ответить]

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

    Ну, если владеешь -почему бы и нет!

    [Ответить]

    Ирина Раковец Reply:

    Знаю, конечно. Вместе учились ;)

    [Ответить]

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

    Так здорово, что опять вместе! Ты мне очень нравилась — из всей группы больше всех, настоящий лидер!
    И я так обрадовалась, когда увидела тебя в блоггинге.

    [Ответить]

  2. Ну что же, кнопочки — дело нужное. Вот как «разгребёмся» с Неделей ориентировщика-2013, так обязательно и этот материал проработаю. Обязательно ведь в будущем понадобится.
    Букет Вам благодарностей, Людмила! *ROSE* *ROSE* *ROSE*

    [Ответить]

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

    Конечно, понадобится! Спасибо за замечательный букет, Виталий! :-[

    [Ответить]

  3. Спасибо, для меня это полезная и нужная информация.

    [Ответить]

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

    Удачи, Виктория!

    [Ответить]

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

    [Ответить]

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

    Да, Александр, ничего сложного нет! Обязательно сделайте!

    [Ответить]

  5. Людмила, спасибо большое за подробный урок. Сейчас все за вами повторила и получилась замечательная кнопка. Буду пользоваться при случае.

    [Ответить]

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

    Ну, вот и хорошо, Алла! Думаю, что может пригодиться.

    [Ответить]

  6. Интересная информация! быстро и легко! Хотя можно кнопочки легко сделать в обычном Ворде! Там сейчас тоже есть множество возможностей! или еще можно в фотошопе! Я лично в нем делаю все необходимые кнопочки и баннеры! Но для новичков описанный в статье способ- очень привлекателен!!! Спасибо!!!
    Предлагаю посмотреть и если понравится скачать обои на рабочий стол.
    http://gallora.com/?p=1167

    [Ответить]

    Ольга Reply:

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

    [Ответить]

    Лилия Reply:

    Конечно,для новичков-чем проще, тем лучше

    [Ответить]

    Лора Reply:

    Согласна, в фотошопе надо иметь навыки!! А для новичков действительно надо искать методы по-проще))

    [Ответить]

    Сюрпризы жизни Reply:

    Так знакомство с фотошопом должно быть самым первым пунктом блоггера :-D

    [Ответить]

    Ольга Reply:

    :-D Именно из-за блога и пришлось с фотошопом знакомится. До этого вообще не знала, что там и как

    [Ответить]

    Ирина Раковец Reply:

    Я, наоборот, еще до блога фотошопом увлекалась. Уж очень он мне нравится =)

    Люда, заходи в гости на второй блог. Я там уже в конкурсе участвую =)

    [Ответить]

    Ольга Журбенко Reply:

    До блога я вообще мало с чем работала. Как то не до того было.
    А на втором сайте я у тебя, Ириш, уже побывала. Завтра погуляю побольше там. Сегодня со временем был напряг

    [Ответить]

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

    А я ещё не заходила! Ирин ,исправлюсь. Завтра первым делом — зайду на твой второй блог!

  7. Людмила! Наверное я сделала как-то не так ссылку на свою последнюю статью… Подскажите, как это сделать правильно.Заранее вам благодарна за помощь!

    [Ответить]

    Ольга Reply:

    Лора, когда пишите комментарий, внизу под формой есть надпись «Ссылка на Вашу последнюю статью», ставите галочку Вам выдает 10 последних статей с Вашего сайта, нажимаете на ту на которую хотите оставить ссылку. Все просто ;)

    [Ответить]

    Лора Reply:

    Благодарю, Ольга, за подсказку! Но я ставила галочку, но почему-то никаких статей не загружалось в тот раз, поэтому спросила! А сейчас все в порядке!! благодарю, что откликнулись!!!

    [Ответить]

    Ольга Reply:

    Не за что, Лора *ROSE* Просто у Людмилы выходной) А мне помочь не сложно

    [Ответить]

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

    Девочки, я уже здесь!
    Лора, Вы сразу статью не увидите, а при обновлении странички — всё появится.
    Олечка, спасибо, что ответила! ;)

    [Ответить]

    Ольга Reply:

    Да мне ж не сложно =) Всегда пожалуйста *IN LOVE*

    [Ответить]

    Лора Reply:

    Спасибо, Людмила, за ответ!!! Я просто как всегда — торопыга)) Хочется все и сразу, и подождать нету терпения иногда!! теперь буду знать!!!

    [Ответить]

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

    Лора, я тоже торопыга — поэтому прекрасно понимаю Вас. Кстати, у многих возникает вопрос — почему не сразу видно ;)

  8. Лилия 31.03.2013 @ 20:43

    мне пока кнопка не нужна, но с удовольствием позанималась с этой программой! =)

    [Ответить]

  9. У меня месяца три назад к кнопкам большая любовь была. уже и не помню зачем делала — ни одна до сегодняшнего дня не сохранилась :-D

    [Ответить]

    Ольга Reply:

    :-D Ну ты даешь))
    А я вот еще не дошла до кнопочек. Где то бы и поставила, желание то есть, но времени разбираться не было. Поэтому ссылками обхожусь

    [Ответить]

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

    Теперь-то поняла, что это не сложно!

    [Ответить]

    Ольга Reply:

    Да, Люд, спасибо за подсказку, да еще с подробными разъяснениями. Теперь буду делать кнопочки ;)

    [Ответить]

    Юлия Reply:

    Я бы с удовольствием наделала себе таких чудненьких кнопочек, только вот осталось придумать, для чего они мне нужны. :-D

    [Ответить]

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

    ну, может когда ещё и пригодятся.

    [Ответить]

    Ольга Журбенко Reply:

    Да разве это сложно придумать то? Например подписаться ;)

    [Ответить]

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

    Или что-нибудь «Скачать»

    [Ответить]

    Ольга Журбенко Reply:

    Да, для «скачать» кнопо =) чки подходят очень хорошо и внимание привлекают

    [Ответить]

  10. Люда, ну ты борец! 8)

    [Ответить]

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

    Спорт, он ведь даёт о себе знать!
    В апреле я сбавлю активность, так что — дерзайте!

    [Ответить]

    Ирина Раковец Reply:

    Ну зато мы вроде 2 первых места заняли, да? :-D

    [Ответить]

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

    Видимо, так ;)

    [Ответить]

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

    [Ответить]

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

    Это точно. А онлайн сервисы -отличные помощники, Юля!

    [Ответить]

  12. Кнопочки красные, но вот куда их приспособить? Нужно лоб почесать и придумать) =)

    [Ответить]

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

    Татьяна ,может быть какую-то информацию дадите читателям для скачивания и под кнопку спрячете ссылку. Может в рассылку поместите.
    Со временем придёт понимание -зачем они нужны! ;)

    [Ответить]

    Лилия Reply:

    тоже надеюсь что со временем это понимание придёт =)

    [Ответить]

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

    Конечно, придёт! =)

    [Ответить]

  13. Отличный сервис. А главное можно такие прекрасные кнопки создавать *CRAZY*

    [Ответить]

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

    да, думаю ,что может пригодиться.

    [Ответить]

    Лилия Reply:

    теперь знаем где их взять,если понадобятся

    [Ответить]

  14. Какие аккуратные и забавные кнопочки. Сразу сайт приобретает такую индивидуальность! Класс!

    [Ответить]

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

    Да, можно сделать очень даже интересные кнопочки :)

    [Ответить]

  15. Сервис то хорош. Но думаю начальному блогеру он совсем не к чему будет. Куда ему вставлять эти кнопки)

    [Ответить]

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

    Например, если он даёт читателям какую-то ссылку для скачивания или в ту же форму подписки

    [Ответить]

    Ольга Журбенко Reply:

    Для подписки — хорошая идея

    [Ответить]

  16. Люда, я сделала кнопочку «Получать статьи»*YAHOO* Прилепила ее в статью :-[ Ой, красота. Заходи,оцени

    [Ответить]

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

    Посмотрела! Свои восторженно-восхищённые отзывы оставила у тебя на блоге! ;)

    [Ответить]

  17. А я пользуюсь PhotoShop там у меня свободы действий больше и эффектов тоже =)

    [Ответить]

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

    Я согласна, Александр, что лучше фотошопа пока программы нет, но не все им умеют пользоваться (особенно новички), поэтому на помощь приходят различные сервисы ;)

    [Ответить]

  18. Я не знаю, для чего мне нужны кнопки. Пока у меня надобности в них не было, но ведь я могу и не знать, что с ними, кнопками делать, куда их пристроить.
    Из статьи поняла, как делать.Подскажите, что с ними делать, пожалуйста.
    Не комментарий, одно непонимание…

    [Ответить]

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

    Вера, кнопку можно поставить на форму подписки, можно сделать её картинкой-ссылкой,чтобы она перенаправляла на другую страницу (например ,кнопка «Скачать», «Посмотреть» и т.д.)

    [Ответить]

  19. Очень помогли спасибо ))

    [Ответить]

  20. Всё хватит балдеть, иду делать себе кнопку…

    [Ответить]

  21. Не могу понять, но у меня не получается создать кнопку… пробовал, пробовал и бесполезно. Вроде саму кнопку делаю, но она на комп не скачивается. Не могу понять почему?

    [Ответить]

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

    А ты что нажимаешь ,чтоб скачать эту кнопку? Пришли скрин на почту, я посмотрю.

    [Ответить]

  22. А русские буквы этот сервис не знает?

    [Ответить]

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

    Знает, на картинке основной кнопка написана русскими буквами

    [Ответить]

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

    [Ответить]

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

    Удачи, Ирина! :)

    [Ответить]

  24. Мне тоже пригодится сервис по созданию кнопочек — хотя обычно стараюсь сам своими руками писать, так как CSS3 на данный момент позволяет сделать кнопку любой сложности!

    [Ответить]

Комментировать