Генераторы CSS-кода могут быть узкоспециализированными, и одни из них предназначены для создания кнопки CSS. Эти элементы управления позволяют осуществлять определенные действия. Они призывают посетителей к действию, и позволяют понять, что вы хотите от них. При помощи кнопок можно увеличивать эффективность маркетинга и прибыль.
Генератор CSS3-кнопок позволяет создавать кнопки различного типа. Подобные сервисы позволяют сэкономить время и силы, и при этом не связываться с кодом.
В интернете можно найти множество бесплатных генераторов кнопок CSS, и вы вряд ли сразу найдете тот, который вам подходит. Поэтому мы решили отобрать лучшие генераторы, и поделиться этой подборкой с вами.
Генератор CSS3-кнопок Magazine Fuse
Этот генератор позволяет редактировать тени и фон кнопок. Отличный инструмент, который отвечает большинству требований.
Best CSS Button Generator
Генерируйте собственные кнопки и выбирайте подходящие цвета при помощи удобных цветовых схем. Кроме этого инструмент позволяет добавлять тень к тексту, а также оформлять границы.
Генератор кнопок CSS Tricks
Хотите реализовать градиенты и эффекты для кнопки при наведении? Тогда используйте этот конструктор кнопок CSS, который позволяет адаптировать кнопки под любой дизайн сайта.
Генератор Dextronet CSS
Выжмите максимум из собственного сайта, украсив его невероятно красивыми кнопками. Этот генератор позволяет создавать именно такие кнопки.
CSS Portal
Данный генератор кнопок CSS представляет собой не просто мощный инструмент. Он также совместим с большинством современных браузеров.
CSS Button Generator
Теперь у вас будет возможность создавать прекрасные кнопки для собственного сайта. Это быстрый и продуманный генератор кнопок.
External CSS3 Button
Тени, внутренние тени, фоны – все эти параметры доступны для настройки в этом генераторе кнопок.
Da Button Factory
Пусть ваши CSS кнопки будут идеально сочетаться с вашим сайтом. Не дайте некрасивым кнопкам препятствовать вам на пути к успеху!
CSS3 Generator
Данный генератор отлично подойдет для создания кнопок под любой дизайн. Он очень прост в использовании, но при этом предлагает множество различных настроек.
Button Optimizer
Оптимизируйте свои кнопки под любой дизайн сайта. Теперь ваши страницы будут грузиться быстрее, а внешний вид улучшится.
CSS Button Generator
Больше не нужно использовать картинки, чтобы получить красивые кнопки CSS для собственных дизайнов. Теперь можно без труда создавать их при помощи данного генератора.
CSS Cook Button Generator
Если хотите получить утонченные и стильные кнопки для вашего дизайна, то этот инструмент идеально подойдет для данной задачи.
CSS Gradient Button
Теперь вы сможете подобрать идеальные цвета для стилей кнопок CSS. После этого оформите их по своему вкусу, и дополните ими дизайн любого сайта.
CM Buttons Generator
При помощи VML и CSS можно создавать невероятно красивые кнопки для дизайна любого типа и формата.
Dynamic Drive
Планируете создавать миниатюрные кнопки, отвечающие требованиям разметки XHTML? Тогда этот генератор кнопок создан специально для вас!
CSS3 Gen
Этот генератор использует HTML и CSS-код. Идеальный инструмент для создания современных кнопок.
CSS Drive
Этот генератор поможет без труда создавать кнопки CSS для любого дизайна. Все кнопки будут корректно отображаться в любом браузере.
CSS3 Button Generator
Для создания идеальных кнопок можно воспользоваться этим онлайн-генератором.
Перевод статьи “18 Free CSS Button Generator – Easily create CSS3 button” был подготовлен дружной командой проекта Сайтостроение от А до Я.
www.internet-technologies.ru
Онлайн сервис для создания кнопок
Если вам, как и мне, нравятся кнопки в подобном стиле, то читайте до конца. Если же у вас уже стоит подобная кнопка, то проверьте, чтобы она была задана css стилями, а не картинкой. В таком случае кнопка будет грузиться быстрее, что соответственно положительно скажется на загрузке сайта в целом.
Конечно, набросать стили – это дело 5 минут, но есть и такие люди, которым не хочется вникать в структуру и им нужен только результат. А кто-то еще не умеет — в общем, если вам лень самому писать стили, то в этой статье я, как раз, и расскажу о сервисе dabuttonfactory.com, в котором можно быстро получить css оформление подобной кнопки.
Итак, заходим на сайт. Перед нами откроется страничка с полями для редактирования по бокам. И визуальное изображение кнопки, которую мы редактируем – в центре. А также, под ней будет формироваться css код.
Онлайн сервис для создания кнопок– стили для текста
Левое меню, с выбором параметров, предназначено для придания стилей тексту:
В поле “Text” – задаем текст, который будет на кнопке. В “Font” – выбираем шрифт (его всегда можно поменять позже в таблице стилей, как и все остальные элементы). “Bold” и “Italic” – жирность и наклон соответственно. Поле “Textshadow” задает тень тексту. Можно указать расстояние и цвет.
“Outputtype” – как вы уже поняли выставляем CSS background, так как ради этого, мы и обратились к данному сервису.
Онлайн сервис для создания кнопок– стили кнопки
Здесь в поле “Style” – вы можете выбрать какие углы будут у кнопки — скругленные или квадратные, а также задать радиус округления. В “Вackground” – можно задать цвет фона монотонным, либо градиентом. Вкладки “Border” и “Shadow” – позволяют задать обводку и тень. В параметрах тени есть возможность изменить ее направление, цвет и отступ.
В поле “Size” — задается ширина и высота. Она может быть статичной (заданной определенного размера), или динамичной. В таком случае размер кнопки будет формироваться в зависимости от параметров текста и отступов.
Если вы выставили параметры такие же, как я на скриншотах, то у вас получится такая кнопка:
Вот и все. Теперь при помощи онлайн сервиса для создания кнопок вы можете очень быстро создавать этот важнейший элемент дизайна, даже ничего не понимая в css. А на сегодня — все. Пока!
ВИМАНИЕ! Не успел я опубликовать данный пост в социальных сетях, как мне на почту пришло сообщение от одного из читателей о том, что в нем есть недочет.
Дело в том, что фон в данном сервисе задается картинкой, причем не просто картинкой, а прописывается адрес на нее. Само изображение лежит на стороннем сервере.
Конечно, можно оставить как есть, но если вам нужна не просто кнопка, а именно заданная через css, то завтра я расскажу как создать ее самостоятельно и добавим эффект нажатия. Поэтому не буду удалять, пока, статью. Может кому-то пригодиться.
Спасибо за своевременную критику. Если кто-то пользуется подобными сервисами, пожалуйста, поделитесь в комментариях — кому-то они очень пригодятся.
smartlanding.biz
damir-tote
Спасиб NMitra, что подобное искал =) А не можешь еще показать, как сделать вертикальное выпадающее меню, только не вбок, а вниз))
NMitra
См. http://shpargalkablog.ru/2011/07/accordion-css.html
В качестве содержания добавляйте список ol из ссылок.
Дмитрий
Вып. список это просто) Даже просто введя в гугл вып список на цсс можно найти
NMitra
Посмотрите последний пример http://shpargalkablog.ru/2012/04/display-block-inline-css.html с наведением на пункт меню или с постановкой галочки справа. Есть вариант с :focus, но в Хроме нужно подключать картинку, я не стала поэтому расписывать.
Это на CSS, а можно ещё добавить небольшой скрипт.
segur
Как мне нравится этот блог ! Этот сайт давно у меня в "золотых" закладках !
Спасибо за Ваши толковые статьи и примеры !
NMitra
Благодарю за комментарий! Настроение сразу вверх растёт.
Анонимный
Спасибо большое автору, очень помогло на практике.
NMitra
Рада, что мои записи вам пригодились 🙂
Анонимный
Если нахожу что-то полезное на сайте, всегда благодарю автора не словами, а кликами по всем рекламным блокам которые нахожу на странице. В этот раз пришлось искать все рекламные блоки. Спасибо автору.
NMitra
Повеселили по поводу "пришлось искать все рекламные блоки" 🙂 Спасибо, что заботитесь о моём благосостоянии и оценили статью.
dd>
Алексей
А онлаайн генератором можно создать кнопку под свой вкус http://phpguru.com.ua/servis/css3button/ русскоязычный генератор css3 кнопок. Не сочтите за спам но мне понравился!
NMitra
Проглядела много генераторов кнопок и не представляю как с их помощью можно сделать хоть что-то приемлемое. В статье я просто привожу примеры и надеюсь, что их код не будут брать целиком. Можно посмотреть как реализована тень текста на кнопках, как создаётся эффект нажатия, как сделать, чтобы один текст заменялся другим и при этом правильно выравнивался, какие цвета чаще всего используют, как сделать неполные боковые линии и т.п. Это именно черновой вариант, который можно и нужно изменять, как минимум высоту и ширину.
Станислав
Автору поклон за труды! Кладезь полезных решений для любого проекта. Выразил благодарность еще и переходом по рекламе — идея порадовала:)
NMitra
Благодарю, Станислав.
, одно время не могла пройти мимо интересной кнопки, пусть даже нарисованной. Надо код немного доработать, а то в Safari кое-где ерунда получается. Например, из background следует выделить background-color
Анонимный
Итересно автор открывал страницу своего материала хотябы в Safari?
NMitra
Открыл-открыл ))) Добавьте префикры -moz- и -webkit- к таким свойствам как transition, background разбейте на background-color и background-image и всё будет нормально. Или воспользуетесь SCSS, тот автоматом делает тоже самое. Я не нашла причин почему мне нужно было усложнять код.
FOMUVI
Сложно пройти мимо и не поблагодарить. Спасибо! Классная выборка кнопок, а главное много и все разные. Есть с чего выбрать и заточить под себя. Класс!
очень понравилась button4, но некоторые браузеры ее не показывают почему то
Алексей
Хорошая статья с помощью нее сделал нормальную кнопку
Анонимный
Норм та так, спасибо
Анонимный
все супер, но как выставить фиксированные размеры кнопки? а то автоматом подгоняет под текст, т.е. под количество написанных букв.
NMitra
Для ширины указать width и text-align: center; Убрать padding-left и padding-right, например, так: padding: 15px 0.
Для высоты сложнее. Можно указать одинаковую height и line-height, но line-height не поддерживается некоторыми мобильными браузерами, например, Opera Mini. Совсем убрать padding.
Можно добавить дополнительно :before http://shpargalkablog.ru/2012/04/vertical-align.html#inline-before (см. "Ура, оно")
Максим Грачев
Как изменит размер кнопки?
NMitra
padding — это отступ до границы border width — ширина height — высота line-height должна быть равна height, чтобы выравнять текст по центру. См. http://shpargalkablog.ru/2012/03/vyrovnyat-tekst-vertikali.html font-size — размер шрифта
NMitra
Подбирайте значения под себя. В большинстве случаев достаточно изменить padding. Одно значение: отступ от содержимого для каждого края. Два значения: первое для вертикальных, второе — горизонтальных сторон. Три значения для верхней/по бокам/нижней сторон. Четыре значения: вверх/справа/низ/слева. См. http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html#p-m-storona
Регина
Спасибо! Очень круто!
Серж
Благодярю! огромный выбор классных кнопок! все стили подходят, можно выбрать для любого дизайна) Намного ускоряют верстку, отличная заготовка!
Анонимный
спасибо
NMitra
Пожалуйста, очень рада таким отзывам!
Анонимный
Хорошая статья! Подскажите, пожалуйста, как на анимированной кнопке button31 повернуть "стрелку" влево (она там направлена вниз). То, что нужно править второй блок я понял, в частности менять градусы и положения, но получается какая-то несуразица. П. С. К верстке сайтов не имею никакого отношения, html и CSS знаю настолько, насколько мне необходимо — изредка сваять себе хтмл-файлик, как каталог файлов. Но вот на свою голову проблемы нашел — решил сделать себе сайтик и нужна кнопка возврата на предыдущую страницу, которая появляется при адаптации при открытии сайта с моб. устройств, а там стрелочка влево нужна.
Спасибо больше, без воды, с примерами, кратко и по делу.
NMitra
Благодарю за отзыв!
тотр
спасибо, господи
NMitra
:))
Max
Огромное спасибо, сегодня пол дня пытался сделать подобную кнопку без плагина на wordpress, дома вечером с первого запроса в Google попал на Вашу страничку 🙂 Наконец то закрою вопрос с кнопочками! СПАСИБО!
NMitra
Благодарю за отзыв!
Анонимный
Подскажите пожалуйста, как вставить такую кнопку на страницу в вордпресс? Если не сложно, то расскажите по-подробнее, так как я еще не очень хорошо разбираюсь в этом (Пытался несколькими способами, описанными в интернете, не получилось)
NMitra
Смотрите в поиске Яндекса/Google
если планируется кнопка на многих страницах — "как изменить шаблон wordpress". Для кнопки или ссылки в файле php добавляете класс, например, class="button16". А стили — в файл .css, например, .button16 {……}
если для одной страницы, то должна быть кнопка для перехода в "HTML"-режим при написании/редактировании статьи. В нужное место добавляете и стили, и кнопку. Только в этом случае стили нужно вписывать обязательно внутри
<style> … … … </style> Я, к сожалению, не изучала админку WP
Владимир Левыкин
Доброго времени суток ))) Сразу оговорюсь, я тока начинаю юзать joomla. Подскажите как правильно? и где нужно что прописать в шаблоне protostar что бы ваши код css применялся адекватно просто уже 3 день мыкаюсь не могу применить стиль. То шаблон разъезжается то кнопка везде где ненужно появляется )))) печаль беда )))). ( Я не волшебник, я тока учусь )
NMitra
Владимир, доброе время суток. Не осерчайте, но вам сюда http://shpargalkablog.ru/p/comments-blog.html
Эдуард
Столько всего, я прям растерялся…
Анонимный
Поменяла кнопку на форуме php bb 3.0, а текст кнопки пропал, как его восстановить?
NMitra
По-подробнее (пропал — стал прозрачным или был заменён на тот, что между тегами a?) или адрес страницы сайта
Анонимный
Пропал в прямом смысле слова, его совсем не видно, но кнопка работает.
NMitra
Не, так не могу, адрес страницы сайта, пожалуйста
Анонимный
К сожалению сайт на локалке находиться, могу только код переслать, но здесь публиковать сайт не хочет.
NMitra
Добавьте на http://jsfiddle.net/
Анонимный
Вот, готово https://jsfiddle.net/Ltuku5gn/
NMitra
А где HTML?
Анонимный
классный сайт
Анонимный
А можно ваши кнопки сразу ставить на сайт или на форуме вставлять в ком? Они будут работать? (начинающий)
Ирина
Офигенно, спасибище!!!
NMitra
Начинающий, что вы имеете ввиду под "Будут работать"? Ваши кнопки изначально должны работать (перенаправлять куда-то посетителя, отправлять форму и т.п.), а это всего лишь украшение кнопок.
Ирина, благодарю за комментарий!
Анонимный
Понимаете, я в этих кодах не разбираюсь, но… кнопки очень понравились… сайтами не занимаюсь, но красиво подать ссылку на файл попробовал… тупо вставил код кнопки добавил адрес на файл и вроде работает! Пример: http://bogoglasnik.ru/load/88-1-0-1380?l_ZeHf (начинающий)
Анонимный
Добрый день. Подскажите пожалуйста, как сделать кнопку что бы она была ссылкой, вела на другую страницу? Где вписать ссылку А так вроде со всем разобрался и с цветом и размером, а вот как сделать ее ссылкой что бы при нажатии переходить на другую страницу Заранее благодарен.
Спасибо, облазил пол интернета, самая лучшая подборка и описание, спасибо.
NMitra
Благодарю, стараюсь обращать внимание на интересные варианты
Анонимный
Здравствуйте. Отличная статья. Только хотелось бы уточнить у автора поподробнее о том, как скорректировать код (например для — Вдавленная кнопка), чтобы работало в браузере Safari. Я пока не смог понять, как правильно разбить background на background-color и background-image. Может автор показать правильно скорректированный код?
Приветствую, спасибо за статью! Подскажите, как сделать кнопку по всей ширине блока ? a.knopka { color: #fff; /* цвет текста */ text-decoration: none; /* убирать подчёркивание у ссылок */ user-select: none; /* убирать выделение текста */ background: rgb(212,75,56); /* фон кнопки */ padding: .7em 1.5em; /* отступ от текста */ outline: none; /* убирать контур в Mozilla */ } a.knopka:hover { background: rgb(232,95,76); } /* при наведении курсора мышки */ a.knopka:active { background: rgb(152,15,0); } /* при нажатии */
NMitra
Здравствуйте!
a.knopka { display: block; text-align: center; }
Medoti Dorf
Спасибо!
Анонимный
Не знаю, когда я наткнулся на эту статью и добавил ее в немногочисленные закладки — года 2 назад. За это время воспользовался примерами раз 20-30 точно! Спасибо автору, и низкий ей поклон!
Анонимный
По поводу SAFARI — я все сделал, но кнопка все равно показывается некорректно. Не могли бы вы написать полностью обновленный код в ответе для кнопки — button22, тогда все станет понятно. Спасибо.
NMitra
Комментарий 71: спасибо за отзыв, для меня он важен! Комментарий 72: попробуйте так http://jsfiddle.net/NMitra/fyd1nzfk/
Анонимный
добрый день! скажите пожалуйста можно ли чтобы кнопка уже была нажата и была не активной. допустим из этого примера: кнопка "button17" за ранее буду очень признателен! спасибо!
NMitra
Добрый день, вместо a.button17:focus:not(:active) {} напишите a.button17 {} Но обычно её делают более приглушённого цвета (плюс можно попробовать прозрачность http://shpargalkablog.ru/2013/02/opacity-css.html ).
Анонимный
Кто знает как делать, свяжитесь со мной по miheyzih@mail.ru
Анонимный
скопировал и вставил на свой сайт , кнопка не вышла, нужно что либо добавлять еще к этому коду? Объясните как ребенку, т.к еще зелен в этих делах
Привет, спасибо за кнопки!!! Но возникает небольшая проблема. В каждой из кнопок при наведении кроме подсветки и других эффектов всплывает какая-то красная линия. Как ее убрать подскажите плз. Сайт на wordpress , если это важно
Андрей пивоварчик
Заметил,что это происходит только на определенной теме wordpress
NMitra
Попробуйте для :hover дописать outline: none;
sawkow1
Спасибо Мастер, получилось красиво: http://djk-tanzen.de/?mod=anmeld Но на safari, к сожалению не работает….
Unknown
Отличный материал спасибо, но есть вопрос, возможно ли сделать например в кнопке button31, такой эффект, чтобы после нескольки секунд анимация заменялась на другую кнопку автоматически?
NMitra
Можно. Спасибо за идею! Но ваш вопрос требует несколько большего времени, чем я располагаю. Извините. http://shpargalkablog.ru/p/comments-blog.html
Михаил Евсеев
Лучшие! В закладки!
Анонимный
СПАСИБО ЗА ВАШ ТРУД!!!!
Анонимный
Здравствуйте NMitra.Я новичок. Делаю сайт с помощью корсофтовского комплекса. Делать начал из "спортивного интереса". С текстами как то все сложилось а вот оформление хотелось бы улучшить. Задумал интерактивные кнопки. Воспользовался генераторами кнопок, потому как познания в НTML и CSS нулевые. Генератор выдал два кода НTML и CSS. Не могу объединить.Не хватает познаний. Буду признателен за помощь.Cпасибо.HTML: a href='#' class='button'>Talia Screen Orizzontale</a СSS .button { border: 4px solid #ff6619; background: #f7f7f7; background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#f7f7f7)); background: -webkit-linear-gradient(top, #fafafa, #f7f7f7); background: -moz-linear-gradient(top, #fafafa, #f7f7f7); background: -ms-linear-gradient(top, #fafafa, #f7f7f7); background: -o-linear-gradient(top, #fafafa, #f7f7f7); background-image: -ms-linear-gradient(top, #fafafa 0%, #f7f7f7 100%); padding: 3.5px 7px; -webkit-border-radius: 19px; -moz-border-radius: 19px; border-radius: 19px; -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; text-shadow: #2c2e30 0 1px 0; color: #11c217; font-size: 17px; font-family: helvetica, serif; text-decoration: none; vertical-align: middle; } .button:hover { border: 4px solid #11c217; text-shadow: #2c2e30 0 1px 0; background: #f7f7f7; background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#f7f7f7)); background: -webkit-linear-gradient(top, #fafafa, #f7f7f7); background: -moz-linear-gradient(top, #fafafa, #f7f7f7); background: -ms-linear-gradient(top, #fafafa, #f7f7f7); background: -o-linear-gradient(top, #fafafa, #f7f7f7); background-image: -ms-linear-gradient(top, #fafafa 0%, #f7f7f7 100%); color: #ff6619; } .button:active { text-shadow: #2c2e30 0 1px 0; border: 4px solid #ff6619; background: #f7f7f7; background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#f7f7f7)); background: -webkit-linear-gradient(top, #fafafa, #f7f7f7); background: -moz-linear-gradient(top, #fafafa, #f7f7f7); background: -ms-linear-gradient(top, #fafafa, #f7f7f7); background: -o-linear-gradient(top, #fafafa, #f7f7f7); background-image: -ms-linear-gradient(top, #fafafa 0%, #f7f7f7 100%); color: #11c217; }
Очень помогло в работе ибо начинающий. Однако, как отцентровать текст относительно иконки, что стоит перед кнопкой height:40px; (высота кнопки) line-height:40px; (незнамо что, но если равно высоте кнопки, то текст выравнивается по высоте относительно иконки слева) Узнал только прочитав форум, надо чтобы height=line-height
Вот сейчас опять перечитываю в поисках как убрать подчёркивание.
Очень не хватает просто подробного описания, какой параметр что значит.
Огромное спасибо Автору странички, без информации выше было бы очень тяжко.Спасибо.
Анонимный
Извиняюсь, но никак не получается создать кнопку например, высотой 24 пикселя с иконкой (24х24). так чтобы текст на копке и иконка слева от текста были по середине кнопки. По горизонтали всё ок , Но то что иконка или текст постоянно съезжают куда то по вертикали, удручает.
Всякие комбинации служебных слов перепробовал, но понять так и не смог.
пример https://jsfiddle.net/NMitra/533605pm/ теория http://shpargalkablog.ru/2012/04/vertical-align.html
Анонимный
NMitra — спасибо огромное за внимание и заданное направление. Иконка у меня 24х24, у вас в примере 16х16 и в итоге когда я подставляю своё то у меня всегда съезжает вниз текст. Иконка стоит правильно, текст начинается где-то с её середины. Пока разбираюсь.
Спасибо за участие и заданное направление.
За отклик и направление Огромное Спасибо.
NMitra
Высота-то указана фиксированной height:24px;
Анонимный
Однако, нашёл ответ который мне подошёл.
в HTML Кнопка с иконкой и текстом выравненные по середине кнопки: Кнопка
Тоже но без иконки: Кнопка
(слово "класс" — поменять на английское а то тут не печаталось)
Тут приятно, что класс кнопки, отвязан от класса иконки. Значит используем один класс на все кнопки приложения и лишь меняем классы иконок по надобности.
Спасибо вы натолкнули на верный путь, с уважением sharpionok
Анонимный
Вместо HTML кода напечаталась ссылка чёрти куда. Как показать код в HTML не понимаю.=(
NMitra
Длинный код удобней смотреть на https://jsfiddle.net/ — сразу результат виден Или чтобы код опубликовать в комментарии, можно воспользоваться формой из http://shpargalkablog.ru/2010/12/napisat-kod-tekstom.html
shpargalkablog.ru
Привет, друзья! Решила затронуть тему кнопок, поскольку размещаю на своем блоге довольно много статей с обзорами и рекомендациями партнерских продуктов. Но, до недавнего времени, как-то, не использовала в них эти привлекающие внимание графические элементы.
И, безусловно, зря…
А добавив кнопку в один из последних обзоров, заметила, что кликают по ней гораздо чаще, по сравнению с теми постами, где ссылка размещалась просто в тексте и выделялась жирным шрифтом.
Так что, моя копилка полезных инструментов теперь пополнилась несколькими сервисами, позволяющими создавать любые кнопки для сайта онлайн. Которыми я сегодня хочу поделиться с вами.
Поскольку в Фотошопе или др. подобном редакторе мне сделать кнопку сложнее и дольше, онлайн-конструкторы – это оптимальный вариант. С ними все быстрее и проще любому новичку.
Сам процесс работы с этими генераторами я подробно показываю в видео чуть ниже, а сейчас просто расскажу об особенностях каждого из них.
Первый и, на мой взгляд, самый удобный редактор – это dabuttonfactory.com. Вот так выглядит его интерфейс:
«>
Он обладает самым нужным функционалом: позволяет редактировать текст, размеры, цвет, стиль кнопки, а на выходе загружать ее в png, jpeg, gif, ico форматах или использовать специальный CSS-код.
Помимо того, что здесь можно изготовить кнопочку полностью с нуля, сервис предлагает также несколько интересных заготовок, которые можно быстро отредактировать под себя.
Второй онлайн-конструктор – As Button Generator имеет похожие возможности редактирования, с некоторыми своими особенностями. Выглядит он вот так:
«>
Например, здесь есть опция загрузки готовой картинки в качестве фона кнопки, фильтры, позволяющие настраивать разные эффекты, прозрачные переливы, полосы, тень, граница и т.д.
Важный нюанс в работе с редактором – фильтры нужно использовать после добавления на кнопку текста или загрузки изображения. Так как, после них эти элементы уже не редактируются.
И еще один сервис – cooltext.com – интересен тем, что предлагает разные дизайнерские заготовки, в том числе с анимированными эффектами. Их можно менять слегка, либо переделывать полностью. Конструктор подходит для изготовления кнопок, надписей, логотипов.
«>
Минус в том, что не все шрифты в нем поддерживают русский текст, и менять их не очень удобно, так как открываются они, почему-то, на новой странице без предпросмотра. Готовые кнопки скачиваются в png или gif формате, а также для них можно сгенерировать код (если зарегистрироваться).
Посмотрите небольшой обзорный урок по работе с данными сервисами и выберите подходящий для себя:
Кстати, друзья, если вы хотите сделать для своего сайта более эффектные анимированные кнопки, рекомендую посмотреть видеоурок на блоге моего коллеги Максима Зайцева. Этот урок прекрасно дополняет мой.
Если у вас появятся какие-либо вопросы, задавайте их в комментариях. Всегда рада ответить.
Желаю успехов!
С уважением, Виктория Карпова
o-zarabotkeonline.ru
Вообще, в сети можно найти два-три десятка онлайн генераторов кнопок для сайтов. Принцип действия их практически одинаков, и основное отличие заключается в удобстве использования интерфейса и в возможностях самого сервиса. Под возможностями я подразумеваю количество и нужность различных инструментов, при помощи которых можно делать красивые кнопки.
Как сделать кнопки для сайта в графическом онлайн генераторе кнопок Cooltext.
По моему мнению, этот онлайн сервис вполне заслуживает внимания. Из предложенных на этом сервисе образцов кнопок можно выбрать понравившийся вариант и, перейдя РІ редактор Cooltext, внести различные изменения. Так как этот онлайн генератор англоязычный, для тех, у кого не стоит в браузере автоматический переводчик, я разместил скриншот внешнего вида редактора с переводом.
Любой, даже неопытный пользователь сможет без особого труда разобраться с этим сервисом. Хочу сказать, что, кнопка «рендер кнопки» нажимается чтобы увидеть результат (откроется новое окно), только после внесения изменений в текст. Затем можно вернуться обратно для последующего редактирования. Все остальные изменения, которые вы будете делать в настройках кнопки, будут происходить автоматически прямо в окне этого редактора. Из большого количества шрифтов (есть те, которые поддерживают и кириллицу) можно выбрать любой, который вам понравился. Достаточно навести курсор на образец шрифта под надписью «шрифт» и нажать левую кнопку мыши. В открывшемся окне выбрать нужный вам шрифт и нажать «использовать» (Use). Все остальные манипуляции с размером и цветом шрифта, а также формой кнопки делаются, как угодно душе. Хочу добавить лишь несколько нюансов.
Когда в окне «размер» кнопки установлены галочки «автоматический» для ширины и высоты, размер кнопки будет подгоняться под высоту и ширину текста. Убрав галочки, можно самостоятельно задавать размер кнопки.
Следующий, довольно интересный момент – это функция «Mouse Over», которая добавляет эффект кнопке, когда нанее наводят курсор мыши.Выбрав один из предлагаемых вариантов, нажимаем «рендер кнопки» и смотрим, что получилось.
В открывшемся окне будет три изображения кнопки для сайтов. Самая нижняя, третья кнопка при наведении на нее курсора будет показывать заданный вами ей эффект «Mouse Over». Для того чтобы кнопка сохранилась с таким эффектом, надо загрузить две верхние кнопки себе на компьютер и скопировать Html код внизу кнопок в любой текстовой редактор. В моем случае получились вот такие две кнопки и Html код.
Для того чтобы разместить кнопу на сайте, достаточно забросить эти два изображения в корневой каталог сайта, к примеру в папку images, и указать до них путь. В своем примере я для удобства переименовал даже кнопки, получилась вот такая картина.
Теперь, если кликнуть по этой кнопке, вы перейдете на страницу бесплатного генератора кнопок для сайтов Gooltext. Думаю, как сделать кнопки для сайта с помощью этого онлайн сервиса, разберется даже начинающий пользователь. Хочу добавить, что на этом же онлайн сервисе кроме кнопок для сайтов можно создавать логотипы (как Рё РЅР° сервисе баннеров Banner Fans), включая анимированные. Принцип создания логотипов такой же простой, как и при создании кнопок.
Как создать кнопки для сайта в редакторе Da Button Factory.
Следующий онлайн сервис генерации кнопок, которым предлагаю воспользоваться моим читателям, – это Da Button Factory. Как и на сервисе Cooltext, сделать оригинальные и красивые кнопки в генераторе Da Button Factory не представляет никаких трудностей. Не могу сказать почему, но этот генератор у меня вызывает больше симпатий. Возможно, из-за его удобного и большого интерфейса. К тому же, скорость редактирования кнопок происходит намного быстрее, чем на сервисе Cooltext. А основной принцип создания кнопок для сайтов на этом генераторе практически ничем не отличается от его конкурента. Хотя отличия, конечно же, есть. К примеру, при выборе вида сохранения изображения кнопки в окне «Output type» (Тип выхода) можно выбрать и сохранить изображение в виде файла таблиц стилей CSS. А при выборе сохранения в виде графического изображение появится возможность выбрать и формат png, gif, jpeg и ico.
Количество шрифтов в этом генераторе уступает сервису Cooltext. Но, на мой взгляд, это не так принципиально. Также в этом генераторе отсутствует функция «Mouse Over» как в сервисе Cooltext. Но если мои читатели поняли принцип создания и оформления кнопки с эффектом наведения курсора мыши, то они без труда смогут создать кнопку онлайн двух разных видов. Возможностей оформления внешнего вида кнопки на этом генераторе вполне достаточно.
Напоследок хочу предложить самый, на мой взгляд, лучший онлайн сервис, на котором можно создать РєРЅРѕРїРєРё для сайтов: генератор As Button Gen. Попробуйте сами сделать на нем кнопки, и вы в этом убедитесь.
В качестве содержания добавляйте список ol из ссылок.
Это на CSS, а можно ещё добавить небольшой скрипт.
Спасибо за Ваши толковые статьи и примеры !
dd>
, одно время не могла пройти мимо интересной кнопки, пусть даже нарисованной. Надо код немного доработать, а то в Safari кое-где ерунда получается. Например, из background следует выделить background-color