Здравствуйте, друзья!
Сегодня мы научимся как создать кнопку онлайн для своих интернет ресурсов — рассылки, блога, скайпа, подписных страниц.
Делать кнопку, как Вы поняли, мы будем на онлайн сервисе, на сайте cooltext.com.
На этом сервисе можно делать также разные логотипы и баннеры. Недавно мы учились создавать простой баннер, здесь же гораздо больше функций для создания более сложного и более красивого баннера и логотипа.
Но наша задача сегодня — это создать кнопку. Идём по ссылке http://cooltext.com/
Попадаем на страницу с логотипами, опускаемся вниз страницы, последние ряды — это шаблоны кнопок.
При наведении курсора мышки на кнопку, мы видим — весь шаблон. Выбирайте, которая понравится и жмите на неё.
Я для примера выбрала вот такую вот кнопку. 
И сейчас мы её будем редактировать. Нажав на понравившуюся кнопку, мы переходим на страницу создания кнопки.
Вначале будем редактировать текст, который будет написан на кнопке. (кликабельно)
В поле вводим этот текст, я написала «Скачать», Вы, конечно же, выберите свой. Любые изменения,которые мы делаем, сохраняются автоматически и Вы сразу же можете видеть, как изменяется кнопка.
Далее из скриншота мы видим, что можно выбрать цвет текста,нажав на квадртик с цветом, размер текста (если Вы будете увеличивать размер текста, сама кнопка тоже будет увеличиваться, если размеры стоят автоматически, об этом чуть позднее).
Если поставим галочки, то можем выделить текст жирным или курсивом.
Далее — обводка букв. Если нажмём на треугольник — в выпавшем меню выбираем тип обводки, а нажав на цветовой квадратик — цвет обводки.
В разделе — тень текста — нажимаем на понравившийся тип тени и её цвет.
Чуть подробнее по смещению. Вы можете сместить текст вправо, влево, вверх, вниз относительно кнопки.
Х: с минусом — смещение влево, с плюсом — смещение вправо
У: с минусом — смещение вверх, с плюсом — смещение вниз.
Отредактировав текст на кнопке, переходим к редактированию самой кнопки (кликабельно)
Выбираем форму кнопки — здесь Вы из первоначальной кнопки можете сделать любую форму.
Далее настраиваем заполнение кнопки. В типе заполнения можно выбрать любой понравившийся тип — первый заполняет всю кнопку полностью, остальные — в разных вариациях.
Потом выбираете цвет самого заполнения и цвет оставшейся вне заполнения области. Попробуйте разные варианты, можно получить удивительное сочетание преходящих друг в друга цветов.
Следующий раздел — обводка кнопки. Также выбираете тип обводки и её цвет.
Далее настраиваем тень кнопки, её цвет и другие эффекты.
Теперь переходим к размерам кнопки. По умолчанию Вы видите те размеры (ширина, высота), котрые присвоены данному шаблону. Рядом с этими размерами стоят галочки в словах «Auto».
Это значит, если Вы будете изменять размер текста кнопки, автоматически будет увеличиваться и сама кнопка (её ширина и высота). Если же Вам надо выставить какой-то свой размер кнопки или сделать текст большим, а кнопку оставить прежней, или какие-то другие варианты, то просто уберите галочки и выставьте нужный Вам размер.
Когда настроили кнопку так, как Вам нравится, нажимаете большую синюю кнопку, которая по-русски называется «Создать кнопку» и переходите на такую вот страницу. (кликабельно)
Здесь Вы можете выбрать один из вариантов (можно и оба) кнопки и скачиваете её себе на компьютер. Можно взять html код данной кнопки.
Если же что-то не понравилось, можно нажать на «Редактировать» и вернуться обратно. Сделать нужные настройки и снова нажать на синюю кнопку «Создать кнопку». И так можно возвращаться сколько угодно раз, пока кнопочка не будет Вам радовать глаз.
Вот и всё, друзья!Теперь Вы знаете как создать кнопку онлайн. Ничего трудного здесь нет, а вот удовольствие от своего творчества Вам гарантирую!
После создания, кнопку можно вставить на любой ресурс, можно сделать её ссылкой.
А мы продолжаем мини-конкурс «Найди смайл»
В прошлый раз первыми были дед Виталя (4 балла) и снова Ирина (2 балла).
Общий счёт: дед Виталя — 23 балла, Ирина — 19 баллов, Лилия — 13 баллов, Евгения -9 баллов, Александра — 6 баллов, Ольга -5 баллов, Лана и Томский школьник -по 2 балла.
Сегодня Вас смайлики ждут в рубриках «Автоматизация» и «Программы»
С уважением, Людмила Винокурова
Симпатичные кнопочки получаются. В свое время искала такую информацию =)
[Ответить]
Степан Reply:
31 марта, 2013 at 00:28
Соглашусь с Ириной, кнопка действительно прекрасная. Я вот недавно скачал один видео-курс и в нем есть все кнопки которые мне сейчас нужны, но если понадобиться кнопка, то воспользуюсь данным сервисом.
[Ответить]
Людмила Винокурова Reply:
31 марта, 2013 at 22:32
Конечно, может и этот сервис пригодится когда-нибудь!
[Ответить]
Людмила Винокурова Reply:
31 марта, 2013 at 22:33
Ты-то, Иринка, знаешь этот сервис! 😉
[Ответить]
Сюрпризы жизни Reply:
31 марта, 2013 at 23:47
Впуклость-выпуклость классно здесь делать, а всё остальное предпочитаю в фотошопе.
[Ответить]
Людмила Винокурова Reply:
1 апреля, 2013 at 02:50
Ну, если владеешь -почему бы и нет!
[Ответить]
Ирина Раковец Reply:
1 апреля, 2013 at 02:36
Знаю, конечно. Вместе учились 😉
[Ответить]
Людмила Винокурова Reply:
1 апреля, 2013 at 02:45
Так здорово, что опять вместе! Ты мне очень нравилась — из всей группы больше всех, настоящий лидер!
И я так обрадовалась, когда увидела тебя в блоггинге.
[Ответить]
Ну что же, кнопочки — дело нужное. Вот как «разгребёмся» с Неделей ориентировщика-2013, так обязательно и этот материал проработаю. Обязательно ведь в будущем понадобится.
Букет Вам благодарностей, Людмила! *ROSE* *ROSE* *ROSE*
[Ответить]
Людмила Винокурова Reply:
31 марта, 2013 at 22:31
Конечно, понадобится! Спасибо за замечательный букет, Виталий! :-[
[Ответить]
Спасибо, для меня это полезная и нужная информация.
[Ответить]
Людмила Винокурова Reply:
31 марта, 2013 at 22:30
Удачи, Виктория!
[Ответить]
Кнопку сделать это здорово, я даже и не думал, что можно ее так легко сделать, спасибо за способ, обязательно сделаю у себя на сайте тоже кнопки.
[Ответить]
Людмила Винокурова Reply:
31 марта, 2013 at 22:30
Да, Александр, ничего сложного нет! Обязательно сделайте!
[Ответить]
Людмила, спасибо большое за подробный урок. Сейчас все за вами повторила и получилась замечательная кнопка. Буду пользоваться при случае.
[Ответить]
Людмила Винокурова Reply:
31 марта, 2013 at 22:29
Ну, вот и хорошо, Алла! Думаю, что может пригодиться.
[Ответить]
Интересная информация! быстро и легко! Хотя можно кнопочки легко сделать в обычном Ворде! Там сейчас тоже есть множество возможностей! или еще можно в фотошопе! Я лично в нем делаю все необходимые кнопочки и баннеры! Но для новичков описанный в статье способ- очень привлекателен!!! Спасибо!!!
Предлагаю посмотреть и если понравится скачать обои на рабочий стол.
http://gallora.com/?p=1167
[Ответить]
Ольга Reply:
31 марта, 2013 at 19:02
В фотошопе все таки не каждый работать умеет. Да и не всегда нужны замороченные кнопки. В онлайне то быстрее делается
[Ответить]
Лилия Reply:
31 марта, 2013 at 20:41
Конечно,для новичков-чем проще, тем лучше
[Ответить]
Лора Reply:
31 марта, 2013 at 20:57
Согласна, в фотошопе надо иметь навыки!! А для новичков действительно надо искать методы по-проще))
[Ответить]
Сюрпризы жизни Reply:
31 марта, 2013 at 23:50
Так знакомство с фотошопом должно быть самым первым пунктом блоггера 😀
[Ответить]
Ольга Reply:
1 апреля, 2013 at 00:38
😀 Именно из-за блога и пришлось с фотошопом знакомится. До этого вообще не знала, что там и как
[Ответить]
Ирина Раковец Reply:
1 апреля, 2013 at 17:29
Я, наоборот, еще до блога фотошопом увлекалась. Уж очень он мне нравится =)
Люда, заходи в гости на второй блог. Я там уже в конкурсе участвую =)
[Ответить]
Ольга Журбенко Reply:
1 апреля, 2013 at 23:44
До блога я вообще мало с чем работала. Как то не до того было.
А на втором сайте я у тебя, Ириш, уже побывала. Завтра погуляю побольше там. Сегодня со временем был напряг
[Ответить]
Людмила Винокурова Reply:
2 апреля, 2013 at 01:03
А я ещё не заходила! Ирин ,исправлюсь. Завтра первым делом — зайду на твой второй блог!
Людмила! Наверное я сделала как-то не так ссылку на свою последнюю статью… Подскажите, как это сделать правильно.Заранее вам благодарна за помощь!
[Ответить]
Ольга Reply:
31 марта, 2013 at 19:05
Лора, когда пишите комментарий, внизу под формой есть надпись «Ссылка на Вашу последнюю статью», ставите галочку Вам выдает 10 последних статей с Вашего сайта, нажимаете на ту на которую хотите оставить ссылку. Все просто 😉
[Ответить]
Лора Reply:
31 марта, 2013 at 20:58
Благодарю, Ольга, за подсказку! Но я ставила галочку, но почему-то никаких статей не загружалось в тот раз, поэтому спросила! А сейчас все в порядке!! благодарю, что откликнулись!!!
[Ответить]
Ольга Reply:
31 марта, 2013 at 21:27
Не за что, Лора *ROSE* Просто у Людмилы выходной) А мне помочь не сложно
[Ответить]
Людмила Винокурова Reply:
31 марта, 2013 at 22:28
Девочки, я уже здесь!
Лора, Вы сразу статью не увидите, а при обновлении странички — всё появится.
Олечка, спасибо, что ответила! 😉
[Ответить]
Ольга Reply:
1 апреля, 2013 at 00:44
Да мне ж не сложно =) Всегда пожалуйста *IN LOVE*
[Ответить]
Лора Reply:
1 апреля, 2013 at 12:54
Спасибо, Людмила, за ответ!!! Я просто как всегда — торопыга)) Хочется все и сразу, и подождать нету терпения иногда!! теперь буду знать!!!
[Ответить]
Людмила Винокурова Reply:
1 апреля, 2013 at 17:05
Лора, я тоже торопыга — поэтому прекрасно понимаю Вас. Кстати, у многих возникает вопрос — почему не сразу видно 😉
мне пока кнопка не нужна, но с удовольствием позанималась с этой программой! =)
[Ответить]
У меня месяца три назад к кнопкам большая любовь была. уже и не помню зачем делала — ни одна до сегодняшнего дня не сохранилась 😀
[Ответить]
Ольга Reply:
1 апреля, 2013 at 00:45
😀 Ну ты даешь))
А я вот еще не дошла до кнопочек. Где то бы и поставила, желание то есть, но времени разбираться не было. Поэтому ссылками обхожусь
[Ответить]
Людмила Винокурова Reply:
1 апреля, 2013 at 02:22
Теперь-то поняла, что это не сложно!
[Ответить]
Ольга Reply:
1 апреля, 2013 at 09:49
Да, Люд, спасибо за подсказку, да еще с подробными разъяснениями. Теперь буду делать кнопочки 😉
[Ответить]
Юлия Reply:
1 апреля, 2013 at 15:42
Я бы с удовольствием наделала себе таких чудненьких кнопочек, только вот осталось придумать, для чего они мне нужны. 😀
[Ответить]
Людмила Винокурова Reply:
1 апреля, 2013 at 17:03
ну, может когда ещё и пригодятся.
[Ответить]
Ольга Журбенко Reply:
1 апреля, 2013 at 23:45
Да разве это сложно придумать то? Например подписаться 😉
[Ответить]
Людмила Винокурова Reply:
2 апреля, 2013 at 13:21
Или что-нибудь «Скачать»
[Ответить]
Ольга Журбенко Reply:
7 апреля, 2013 at 18:53
Да, для «скачать» кнопо =) чки подходят очень хорошо и внимание привлекают
[Ответить]
Люда, ну ты борец! 8)
[Ответить]
Людмила Винокурова Reply:
1 апреля, 2013 at 02:14
Спорт, он ведь даёт о себе знать!
В апреле я сбавлю активность, так что — дерзайте!
[Ответить]
Ирина Раковец Reply:
1 апреля, 2013 at 02:35
Ну зато мы вроде 2 первых места заняли, да? 😀
[Ответить]
Людмила Винокурова Reply:
1 апреля, 2013 at 02:43
Видимо, так 😉
[Ответить]
Люда, ты прямо он-лайн сервисами радуешь! То логотип создаем, теперь кнопочку. Кнопочки иногда очень нужными бывают, а рисовать их довольно муторно. Поэтому этот сервис отличное решение проблемы. 🙂
[Ответить]
Людмила Винокурова Reply:
1 апреля, 2013 at 17:04
Это точно. А онлайн сервисы -отличные помощники, Юля!
[Ответить]
Кнопочки красные, но вот куда их приспособить? Нужно лоб почесать и придумать) =)
[Ответить]
Людмила Винокурова Reply:
3 апреля, 2013 at 01:22
Татьяна ,может быть какую-то информацию дадите читателям для скачивания и под кнопку спрячете ссылку. Может в рассылку поместите.
Со временем придёт понимание -зачем они нужны! 😉
[Ответить]
Лилия Reply:
9 апреля, 2013 at 18:40
тоже надеюсь что со временем это понимание придёт =)
[Ответить]
Людмила Винокурова Reply:
12 апреля, 2013 at 20:41
Конечно, придёт! =)
[Ответить]
Отличный сервис. А главное можно такие прекрасные кнопки создавать *CRAZY*
[Ответить]
Людмила Винокурова Reply:
6 апреля, 2013 at 20:38
да, думаю ,что может пригодиться.
[Ответить]
Лилия Reply:
9 апреля, 2013 at 18:40
теперь знаем где их взять,если понадобятся
[Ответить]
Какие аккуратные и забавные кнопочки. Сразу сайт приобретает такую индивидуальность! Класс!
[Ответить]
Людмила Винокурова Reply:
12 апреля, 2013 at 20:40
Да, можно сделать очень даже интересные кнопочки 🙂
[Ответить]
Сервис то хорош. Но думаю начальному блогеру он совсем не к чему будет. Куда ему вставлять эти кнопки)
[Ответить]
Людмила Винокурова Reply:
16 апреля, 2013 at 19:40
Например, если он даёт читателям какую-то ссылку для скачивания или в ту же форму подписки
[Ответить]
Ольга Журбенко Reply:
16 апреля, 2013 at 21:44
Для подписки — хорошая идея
[Ответить]
Люда, я сделала кнопочку «Получать статьи»*YAHOO* Прилепила ее в статью :-[ Ой, красота. Заходи,оцени
[Ответить]
Людмила Винокурова Reply:
21 апреля, 2013 at 15:07
Посмотрела! Свои восторженно-восхищённые отзывы оставила у тебя на блоге! 😉
[Ответить]
А я пользуюсь PhotoShop там у меня свободы действий больше и эффектов тоже =)
[Ответить]
Людмила Винокурова Reply:
3 мая, 2013 at 18:18
Я согласна, Александр, что лучше фотошопа пока программы нет, но не все им умеют пользоваться (особенно новички), поэтому на помощь приходят различные сервисы 😉
[Ответить]
Я не знаю, для чего мне нужны кнопки. Пока у меня надобности в них не было, но ведь я могу и не знать, что с ними, кнопками делать, куда их пристроить.
Из статьи поняла, как делать.Подскажите, что с ними делать, пожалуйста.
Не комментарий, одно непонимание…
[Ответить]
Людмила Винокурова Reply:
4 июня, 2013 at 18:34
Вера, кнопку можно поставить на форму подписки, можно сделать её картинкой-ссылкой,чтобы она перенаправляла на другую страницу (например ,кнопка «Скачать», «Посмотреть» и т.д.)
[Ответить]
Очень помогли спасибо ))
[Ответить]
Всё хватит балдеть, иду делать себе кнопку…
[Ответить]
Не могу понять, но у меня не получается создать кнопку… пробовал, пробовал и бесполезно. Вроде саму кнопку делаю, но она на комп не скачивается. Не могу понять почему?
[Ответить]
Людмила Винокурова Reply:
18 октября, 2013 at 16:59
А ты что нажимаешь ,чтоб скачать эту кнопку? Пришли скрин на почту, я посмотрю.
[Ответить]
А русские буквы этот сервис не знает?
[Ответить]
Людмила Винокурова Reply:
23 октября, 2013 at 21:48
Знает, на картинке основной кнопка написана русскими буквами
[Ответить]
Постоянно вижу красивые кнопки и думаю, как же они сделаны? Ведь в нашем деле — только на кнопки и нужно нажимать и других на кнопки привлекать нажимать. Поэтому кнопки должны быть красивыми.
Начну использовать Вашу, Людмила , инструкцию по созданию кнопок.
[Ответить]
Людмила Винокурова Reply:
24 декабря, 2013 at 21:48
Удачи, Ирина! 🙂
[Ответить]
Мне тоже пригодится сервис по созданию кнопочек — хотя обычно стараюсь сам своими руками писать, так как CSS3 на данный момент позволяет сделать кнопку любой сложности!
[Ответить]