Как самому сделать кнопку для сайта? Обзор онлайн генератора кнопок
Если Вы занимаетесь созданием сайтов либо у Вас есть собственный блог, то Вам наверняка время от времени приходится делать кнопки, различные баннеры, фавиконы, и пр. Особой хитрости в том, как сделать такие вещи конечно нет, если Вы хорошо владеете Corel, Gimp либо Photoshop. Но что делать в случае, когда не знаком с графическими пакетами?
На выручку как всегда приходят онлайн сервисы. Об одном из таких я Вам сегодня и расскажу.
Da Button Factory – бесплатный онлайн сервис, при помощи которого Вы сможете сделать кнопки для сайта по своему вкусу, которые будут выглядеть на достойном уровне! Для этого есть весь необходимый набор инструментов. Вот некоторые из примеров, созданных в данном генераторе:
Все настройки внешнего вида кнопок доступны в четырех рабочих окошках. Расскажу о функциональности каждого из них, поскольку английский знают далеко не все.
Кстати, для исправления этой ситуации очень рекомендую онлайн визуальный словарь английского языка.
В окошке, представленном на скриншоте выше, можно ввести текст, который будет отображаться на кнопке, выбрать шрифт, его стиль, размер и цвет.
Надписи можно придать объем за счет тени, у которой можно настроить цвет и степень отдаления от текста.
Здесь можно настроить форму кнопки: прямоугольник, прямоугольник с закругленными краями либо прямоугольник с круглыми краями. Выбирайте различный фон: однородная заливка, двухцветная либо градиентная. Также в этом окошке можно добавить контур для кнопки (границу), а также тень.
В данном окне устанавливайте фиксированный либо относительный размер кнопки.
При помощи этого окошка можно выбрать формат Вашей кнопки: картинка, либо CSS-background. И конечно же тип файла изображения: png, gif, jpeg либо ico.
Все вносимые при помощи редактора настроек изменения сразу же отображаются на создаваемой кнопке, так что Вы можете контролировать их в режиме реального времени. После того, как Вы окончательно настроите внешний вид, копируйте адрес кнопки и вставляйте в нужное место на Вашем сайте. Её можно также скачать себе на компьютер и самостоятельно прописать в коде все необходимые пути.
Друзья, с помощью данного генератора сделать кнопку онлайн для своего сайта не составит для Вас абсолютно никакого труда. Поэтому смело заносите его в себе в закладки, чтобы при случае не мучаться в фотошопе ). Желаю удачи!
Автор статьи: Сергей Сандаков, 40 лет.
Программист, веб-мастер, опытный пользователь ПК и Интернет.
Бесплатные кнопки для сайта-Создание в онлайн генераторе кнопок Создать кнопку онлайн просто — 2 Мая 2014
Бесплатные кнопки для сайта-Создание в онлайн генераторе кнопок-Создать кнопку онлайн просто. И что бы у вам не возникало вопросов в этой статье я расскажу вам как её сделать бесплатно в онлайн.
Кнопка – графический элемент, без которого дизайн некоторых сайтов трудно представить. Это красиво в оформлении, информативно для пользователя и полезно в продвижении бизнеса, как возможность управления поведением посетителей на сайте (побуждая его например, зарегистрироваться или подписаться на рассылку).
Кнопки для сайта
Существуют разные способы создания кнопки для сайта, но в нашем случае описываются лишь бесплатные сервисы — онлайн генераторы кнопок, которые позволяют сделать графические кнопки для сайта самостоятельно и без использования специальных программ.
Бесплатные онлайн генераторы кнопок можно считать оптимальной возможностью создать кнопку для сайта, когда требования к дизайну невысоки, и деньги на это тратить не планируется.
Сервисы предлагают своим пользователям готовые кнопки для сайта. Их можно редактировать, используя различные приемы и эффекты. Создание кнопок для сайта в онлайн генераторе заключается буквально в 2-х шагах: выбор стиля кнопки и шрифта для текста, и их последующее «украшение» при помощи различных настроек сервиса.
Используя онлайн генератор кнопок, можно создавать разнообразные 3d и 2d кнопки и настраивать при этом элементы кнопок – текст, свет, тип границ, форму, использовать текстуры, которые смогут придать кнопке вид какого-нибудь материала и другие эффекты. Вы можете изменять цвета заливки, создавая различные цветовые варианты кнопок.
Фильтры и эффекты можно применять и к тексту: делать его объемным, накладывать тень, заливать градиентом и т.д. Всё, кнопка готова, осталось только загрузить и сохранить ее на своем компьютере. Созданные кнопки представляют собой графические файлы в форматах gif, jpg, png. Бывает, что онлайн генератор кнопок поддерживает только один их этих форматов. Многие сервисы предлагают автоматическую генерацию html-кода для вставки на страницы сайта.
Можно создать кнопку для сайта, меняющуюся при наведении на нее курсора мышки. Например, при наведении курсора кнопка плавно меняет свой цвет на более яркий, а когда курсор «уходит» с кнопки — она также плавно меняет цвет на исходный. В таких случаях для отображения кнопки на сайте используется два изображения: при наведении мышки первое изображение заменяется вторым, а как только посетитель убрал мышку, второе изображение снова меняется на первое. Такие анимационные (меняющиеся) кнопки часто используются для создания системы навигации сайта.
Однако использование анимационных кнопок в навигации имеет ряд недостатков. Каждый графический элемент увеличивает размер страницы, что может не лучшим образом отразиться на скорости ее отображения, ведь чем больше размер, тем медленнее загрузка. К тому же у некоторых посетителей сайта может быть отключен просмотр графики в браузере, и если дополнительно к кнопкам нет текстовых ссылок, человек просто не будет знать, как ему перемещаться по вашему сайту. Желательно наряду с графическими кнопками навигации иметь и их текстовую версию. Тем самым для просмотра сайта пользователь сможет выбрать удобный для него вариант.
Если рассматривать сайт с точки зрения бизнеса, его внешнее оформление должно, в первую очередь, способствовать повышению эффективности сайта и получению прибыли его владельцем. Поэтому используя кнопки в качестве ссылок или просто графических элементов, помните о юзабилити сайта.
Ссылка на генератор — http://onservis.ru/pages/cooltext-buttons.html
CoolText — бесплатный онлайн генератор кнопок
CoolText — простой онлайн генератор кнопок из готовых шаблонов подойдет тем, кому нужно быстро без сложных настроек и бесплатно сделать кнопку для сайта.
В базе сервиса более 1200 различных шрифтов, есть которые поддерживают кириллицу. Можно будет использовать русские буквы в названии кнопки.
К готовому стилю можно добавить различные эффекты для текста и самой кнопки. Доступно применение эффекта геля, стекла и 3d, наложение тени. Онлайн генератор кнопок CoolText позволяет создать кнопку, изменяющуюся при наведении курсора.
Кстати, кнопки, которые нумеруют пункты на этой странице, сделаны в CoolText. Попробуйте тоже создать свою кнопку.
Создание кнопки для сайта в онлайн генераторе CoolText:
Создание кнопки для сайта в онлайн генераторе CoolText:
1.Перейдите на сайт сервиса CoolText. Выберите стиль кнопки (Choose a Button Design), нажав на понравившееся изображение.
2.На следующей странице происходит непосредственно создание кнопки на основе выбранного шаблона. Укажите название кнопки и желаемые параметры.
Text – задает параметры текста, написанного на кнопке
Text – название кнопки
Font – в этом блоке задаются параметры шрифта
Поле-образец шрифта — предназначено для выбора шрифта. Выбирается также как опция Font в генераторе логотипов.
Color – цвет
Size – размер
Bold, Italics – делает шрифт жирным или курсивом. Если эта опция нужна, поставьте галочку.
Outline – обводка (контур) текста
Thickness – толщина
Color – цвет
Shadow – тень текста
Type – вид тени
Color – цвет
Offset – смещение текста
X — по горизонтали
Y – по вертикали
Button – задает параметры самой кнопки
Shape – форма кнопки
Fill – заливка
Gradient – тип градиента (вертикальный, горизонтальный, радиальный и др.)
Color 1 — цвет начальной точки
Color 2 — цвет конечной точки
Outline — обводка (контур) кнопки
Thickness – толщина
Color – цвет
Shadow – тень кнопки
Type – вид тени
Color – цвет
Other – другие опции
Effect – эффекты
Mouse Over – эффект при наведении курсора мыши
Size – размеры кнопки
Width – ширина
Auto – автоматическое установление размера кнопки по тексту. Если эта опция нужна, поставьте галочку.
Чтобы изменить параметр, нажимайте на черную стрелочку для вызова меню.
По ходу редактирования смотрите на результат, предпросмотр полученной кнопки перемещается вместе с курсором, очень удобно.
3.После того как определитесь с параметрами, нажмите на кнопку Render Button (создать кнопку) для отображения результата ваших действий. Откроется страница с изображением сделанной кнопки. Скачайте его, перейдя по ссылке Download Image.
Если вы использовали эффект при наведении курсора, откроются три картинки: 1 — внешний вид кнопки, 2 — вид кнопки при наведении на нее курсора, 3 — предпросмотр. Первое изображение при наведении на нее мышки заменяется вторым. Если полученный результат вам нравится, скачивайте первые две картинки (нажатием на ссылку Download Image).
В поле Mouse Over HTML Code располагается html-код сгенерированной кнопки. Чтобы редактировать это изображение, перейдите по ссылке- Edit this logo. Email Image — отправка изображения в электронном письме на любой адрес (для этого потребуется регистрация на сайте). Чтобы выбрать новый стиль, нажимайте на раздел Buttons в верхнем меню и начинайте все сначала.
С помощью этого онлайн генератора можно еще создать логотип для сайта. Также все просто, как и создание кнопки.
Перейти на сайт сервиса CoolText
Создать красивую кнопку для сайта на CSS3 онлайн
Обзор онлайн сервисов генерации кнопок для вашего сайта на чистом CSS.
Кнопка – один из элементов сайта, стиль оформления которого может активно повлиять на решение пользователя о выполнении какого-либо действия. Или об отказе от него.
Я встречал немало экспериментов в интернете, которые показывали значительный рост конверсии лишь только благодаря изменению дизайна кнопки.
На сегодняшний день существует достаточно много способов сделать красивые кнопки. Можно покопаться в интернете и найти готовые. Можно создать самому с помощью графического редактора Photoshop (или его аналога). Либо же воспользоваться услугами онлайн конструкторов кнопок, о которых и пойдет речь в этой статье.
Раньше при создании кнопок для моего сайта я использовал упомянутый Photoshop. Делал 2 исходника, 1 – в дефолтном состоянии, 2-й при наведении. Но при знакомстве с CSS3 надобность в использовании изображений для создания кнопок напрочь отпала.
Однако далеко не у всех есть возможность и время изучать CSS. Тут то и приходят на помощь онлайн генераторы кнопок, которые позволяют сделать стильные кнопки без знаний CSS.
Все сервисы, перечисленные ниже, имеют простой пользовательский интерфейс. Используя визуальный редактор, вы в несколько кликов сделаете красивую кнопку, которая будет радовать глаз.
У вас будет 2 области: 1 — в которой вы будете делать настройки, 2 – поле, где можно увидеть в реальном времени результат этих настроек.
Среди настроек:
- Размер кнопки;
- Размер текста;
- Настройка цвета кнопки;
- Скругление углов;
- Создание градиента;
- Фон;
- Выбор шрифта;
- Обводка;
- Отступы;
- Тень;
- Оформление кнопки при наведении;
- Оформление кнопки при нажатии;
Генераторы кнопок на чистом CSS3
Подборка 5 онлайн сервисов генераторов (конструкторов) кнопок на CSS3:
Генератор кнопок Cssdrive
Очень хороший генератор кнопок с большим количеством настроек. Среди возможностей есть поворот и искажение кнопок.
Перейти на сайт
Конструктор кнопок Uiparade
Данный сервис имеет чуть меньше настроек. Но так же с легкостью справится с базовыми задачами.
Перейти к конструктору
Генератор кнопок Css-tricks
Еще один очень простой онлайн генератор кнопок.
Перейти к генератору кнопок
Конструктор кнопок Bestcssbuttongenerator
У данного конструктора имеется множество готовых шаблонов кнопок.
Перейти на сервис
Button Generator Coveloping
Еще 1 генератор кнопок, с небольшим количеством готовых шаблонов.
Перейти к генерации кнопок
Ваша кнопка для сайта в бесплатном онлайн генераторе As Button Generator: красиво, быстро и эффектно!
Приветствую вас, уважаемые читатели блога Rabota-Vo.ru! Думаю, не ошибусь, если графический генератор кнопок As Button Generator (как сгенерировать кнопку) назову самым удобным бесплатным онлайн редактором, где можно создавать красивые кнопки для сайта. Надеюсь, со мной согласятся многие, когда увидят, как легко и быстро в этом генераторе можно создавать кнопки, меняющие свой вид прямо у вас на глазах.
Не хочу обижать разработчиков и создателей онлайн генераторов Da Button Factory и Сooltext, но, по моему мнению, они уступают редактору кнопок AsButtonGen по своим возможностям. Об этом свидетельствуют высокие оценки и популярность генератора AsButtonGen в зарубежном интернете (буржунете). К сожалению, в русскоязычном интернете об этом генераторе, где можно создать кнопки для сайта за считанные минуты и к тому же бесплатно, ничего нет. А если и есть, то упоминается о нем очень скромно, ссылка и все.
А ведь весь процесс создания кнопки в этом графическом онлайн редакторе происходит так быстро и эффектно, что у любого, даже неопытного пользователя в момент создания кнопок, может проявиться творческая «жилка» и азарт. Не ошибусь, если скажу, что создание сайта бесплатно – процесс довольно сложный, но очень увлекательный. И самостоятельное создание кнопки для сайта или блога в этом генераторе, может стать хорошей обучающей площадкой для многих начинающих Web мастеров. Хочу отметить, что специальных знаний, как сделать кнопку для сайта в онлайн редакторе AsButtonGen, не потребуется. И каждый, кто попробует создавать кнопки в этом онлайн генераторе, непременно сможет сделать свою кнопку самой красивой и привлекательной. И если добавить немного юмора, любой желающий сможет свою кнопку сделать самой «кнопистой» кнопкой в рунете. Конечно же, это не фотошоп, но и задачи у этого бесплатного онлайн сервиса совсем другие. Самое главное, сделать кнопки для сайтов или блогов в этом редакторе можно быстро и красиво. А творческие личности, освоив несложные инструменты генератора кнопок, смогут воплотить свои фантазии в реально красивые кнопки для сайтов и блогов.
Какие возможности при создании кнопки для сайта можно использовать в бесплатном онлайн сервисе генераторе кнопок As Button Generator.
В онлайн генераторе кнопок As Button Generator вы можете:
- Создать кнопку в стиле Web 2.0 и экспортировать в виде отдельного файла формата PNG.
- Задать размер кнопки до 600px по ширине и 200px по высоте. Если перевести в сантиметры, это примерно 21 х 7см., почти как изображение в начале этой заметки.
- Возможность изменения цвета фона, на котором создается кнопка. По умолчанию установлен прозрачный фон.
- Задавать кнопке границы различной толщины, делать скругления и менять цвет.
- Выбирать тип градации.
- Наносить на кнопку полосы.
- Применять фильтры скашивание и тень, как на кнопке, так и на тексте.
- Вставлять изображения на кнопку и удалять (в онлайн редакторах кнопок Da Button Factory, Сooltext и многих аналогичных такая возможность отсутствует).
- Редактировать текст на кнопке.
- Всплывающая палитра цвета с возможностью перемещения ее в окне браузера онлайн сервиса.
- Создавать кнопки и редактировать их с помощью ползунков в простом интерфейсе генератора.
И так далее, и тому подобное. Но, как говориться, лучше один раз увидеть, как этот чудо-генератор «АсБуттонГен» делает кнопки для сайтов, чем читать про него дифирамбы.
Итак, для тех, кого интересуют подробности, как создать кнопку и ознакомиться с описанием всех инструментов генератора, левая кнопка для перехода. А для желающих приступить сразу к созданию кнопки в онлайн генераторе, кнопка справа.
Надеюсь, читатели блога смогут оценить этот полезный онлайн сервис генерации кнопок по-достоинству. Желаю всем творческих успехов в процессе создания своей кнопки и до новых встреч на страницах блога Rabota-Vo.ru.
Вас это может заинтересовать:
Создание кнопки для сайта в онлайн генераторах Сooltext и Da Button Factory
Приветствую вас, уважаемые читатели блога Rabota-Vo.ru! Можно ли утверждать, что онлайн генераторы , на которых можно сделать кнопки для сайта, являются бесполезными ресурсами? Или, наоборот, они очень нужные и полезные? Вопрос, конечно, спорный, и, наверное, нет смысла много рассуждать на эту тему. С одной стороны, генераторы кнопок имеют довольно ограниченные возможности и могут загубить в нас творческую личность. С другой стороны, они упрощают нашу жизнь и экономят наше время.
В любом случае, если кому-то понадобятся создать кнопки для сайта или еще для какой-то другой цели, всегда есть возможность выбора. И неважно, что будет использоваться для достижения цели, онлайн генератор кнопок для сайтов или какая-то графическая бесплатная программа, а, возможно, даже Photoshop. Главное заключается в том, что задачу эту каждый постарается решить быстро и эффективно.
Вообще, в сети можно найти два-три десятка онлайн генераторов кнопок для сайтов. Принцип действия их практически одинаков, и основное отличие заключается в удобстве использования интерфейса и в возможностях самого сервиса. Под возможностями я подразумеваю количество и нужность различных инструментов, при помощи которых можно делать красивые кнопки.
Как сделать кнопки для сайта в графическом онлайн генераторе кнопок Cooltext.
По моему мнению, этот онлайн сервис вполне заслуживает внимания. Из предложенных на этом сервисе образцов кнопок можно выбрать понравившийся вариант и, перейдя в редактор Cooltext, внести различные изменения. Так как этот онлайн генератор англоязычный, для тех, у кого не стоит в браузере переводчик текстов онлайн, я разместил скриншот внешнего вида редактора с переводом.
Любой, даже неопытный пользователь сможет без особого труда разобраться с этим сервисом. Хочу сказать, что, кнопка «рендер кнопки» нажимается чтобы увидеть результат (откроется новое окно), только после внесения изменений в текст. Затем можно вернуться обратно для последующего редактирования. Все остальные изменения, которые вы будете делать в настройках кнопки, будут происходить автоматически прямо в окне этого редактора. Из большого количества шрифтов (есть те, которые поддерживают и кириллицу) можно выбрать любой, который вам понравился. Достаточно навести курсор на образец шрифта под надписью «шрифт» и нажать левую кнопку мыши. В открывшемся окне выбрать нужный вам шрифт и нажать «использовать» (Use). Все остальные манипуляции с размером и цветом шрифта, а также формой кнопки делаются, как угодно душе. Хочу добавить лишь несколько нюансов.
Когда в окне «размер» кнопки установлены галочки «автоматический» для ширины и высоты, размер кнопки будет подгоняться под высоту и ширину текста. Убрав галочки, можно самостоятельно задавать размер кнопки.
Следующий, довольно интересный момент – это функция «Mouse Over», которая добавляет эффект кнопке, когда нанее наводят курсор мыши.Выбрав один из предлагаемых вариантов, нажимаем «рендер кнопки» и смотрим, что получилось.
В открывшемся окне будет три изображения кнопки для сайтов. Самая нижняя, третья кнопка при наведении на нее курсора будет показывать заданный вами ей эффект «Mouse Over». Для того чтобы кнопка сохранилась с таким эффектом, надо загрузить две верхние кнопки себе на компьютер и скопировать Html код внизу кнопок в любой текстовой редактор. В моем случае получились вот такие две кнопки и Html код.
| <img src=»/cooltext590780346.png» onmouseout=»this.src=’/cooltext590780346.png’;»/> |
Как устанавливается кнопка на сайт (блог).
Для того чтобы разместить кнопу на сайте, достаточно забросить эти два изображения в корневой каталог сайта, к примеру в папку images, и указать до них путь. В своем примере я для удобства переименовал даже кнопки, получилась вот такая картина.
| <img src=»http://vorabota.ru/ images/ knopka-1.png» border=»0″ /> |
А для того чтобы эта кнопка для сайта начала работать как ссылка, можно оформить ее примерно вот таким образом:
| <a href=»http://cooltext.com/Buttons» target=»_blank»> <img src=»http://vorabota.ru/ images/ knopka-1.png» border=»0″ /> </a> |
Теперь, если кликнуть по этой кнопке, вы перейдете на страницу бесплатного генератора кнопок для сайтов 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. Попробуйте сами сделать на нем кнопки, и вы в этом убедитесь.
На этом хочу завершить свой рассказ об онлайн генераторах кнопок, которые, буду надеяться, принесут пользу моим читателям. Желаю всем удачи, и до новых встреч на страницах блога Rabota-Vo.ru.
Вас это может заинтересовать:
Кнопки для сайта онлайн за пять минут
Кнопка является обязательным графическим элементом в дизайне любого сайта. Она украшает оформление, весьма полезна при пользовании, помогает активному ведению бизнеса. Ведь кнопка – это прекрасная возможность угадывать каждый шаг посетителя сайта. Чтоб удачно разработать ее внешний вид, надо применять режим онлайн. Поэтому, вашему вниманию будет представлено рассмотрение наиболее приемлемых и практичных сервисов, при помощи которых можно делать кнопки для сайта.
Где сделать кнопки?
Если разобраться, то путей создания кнопок есть очень много. Но лучшим будет обратить внимание на сервисы бесплатные, то есть, являющиеся онлайн-генераторами. С их помощью можно сформировать кнопки за минимальное количество времени, самостоятельно и без употребления специально предназначенных программ. Такого типа сервисы сочетают в себе огромные возможности в функционировании, доступность использования и отличное качество полученного результата.
Сервисами предложены сделанные шаблоны кнопок – их можно слегка проредактировать, употребляя различные функции и эффекты. На подобных сайтах кнопки делаются в два этапа. Первый этап – это выбор соответствующего стиля кнопки и шрифта текста. Второй этап — редактирование и обеспечение нужного внешнего вида при помощи функций. Хочется рассмотреть два, довольно продуктивных сервиса для делания кнопок.
Da Button Factory
dabuttonfactory.com
Сайт является весьма удобным для любого пользователя. На первой странице отражается комплект инструментов, при употреблении которых, можно вводить текст кнопки, определиться с видом и размером шрифта, выбрать нужный цвет и многое другое. Кроме этого, имеется возможность настройки всяческих эффектов кнопки – можно определить нужный параметр, сменить оттенок. В общем, сделать кнопку для онлайн сайта на Da Button Factory, не составляет особого труда.
В ходе делания кнопок отражается пример окончательного результата, поэтому можно легко отрегулировать цвет и форму. Сервис является англоязычным, но это нисколько не усложняет поставленную задачу. Все является очень простым, к примеру, «Size» — это размеры кнопки, «Color» — цвет, «Text» — это внутренний текст, «Font» — нужный шрифт. При помощи «Style» выбирают стиль уголков кнопки. «Border» предназначается для того, чтоб определить рамки кнопки, а «Download» позволяет загрузить сделанную кнопку на компьютер в выбранном вами расширении. Если дать оценку сервису, то это будет твердая четверка. Единственный минус – незамысловатость оформления и не особо широкие возможности в функционировании.
Cool Text
cooltext.com
Этот сервис тоже весьма прост и понятен для любого пользователя. Делание в нем кнопок для сайта, предполагает простейшие действия с графическими редакторами и имеющимися шрифтами. База сервиса включает больше, чем 1200 разного рода шрифтов, способных поддерживать кириллицу. Надписи на создаваемых кнопках можно производить и на русском языке.
Кроме всего перечисленного, здесь есть доступ ко всяческим эффектам, предназначенным для оформления внешности кнопок. Существуют эффекты стекла, геля, накладывания теней и образование изображений 3D. Можно создать кнопку, которая бы меняла собственный оттенок при наведении на нее курсора. Все клавиши, которые здесь имеются, работают согласно принципу, описываемому выше (предыдущий сервис). В ходе работы не предполагается особых затруднений. Этой программе также можно поставить твердую четверку. Кнопки красиво выглядят, функционируют очень просто. Вся программа располагает эргономичным дизайном, а ее широкие возможности разрешают производить обычные и, одновременно, красивые кнопки.
5 Веб-сервисов позволяющих создать кнопку online
Tweet
1. Button Maker
Button Maker бесплатный инструмент для создания CSS кода для кнопок. Слева предпросмотр кнопки, а справа, собственно настройки вида кнопки. Редактируем настройки под себя и нажимаем кнопку что бы посмотреть CSS код…
2. Da Button Factory
Сервис выглядит довольно интересно и позволяет изменять размер, текст, тени и т.п. на кнопке. Выходной формат кнопки на ваш выбор: PNG, JPEG, GIF или ICO.
3. Buttonator
Как правило удовлетворяет все основные потребности. Можно выбрать кнопку из предлагаемых и потом ее начать редактировать. Кнопки могут быть загружены в формате GIF изображений.
4. Free Flash Button Generator
Простенький сервис для генерации кнопок на flash-е… Вещь специфическая — но может кому-нибудь пригодится 🙂
5. Cool RGB
Интересный сервис, с помощью которого можно создавать логотипы, банеры, кнопки… Интерфейс этого олнайн-сервиса имеет множество настроек: цвет, шрифт, градиент и т.д.
Спонсором написания данной статьи выступил сайт посвященный иконкам и векторной графике для веб-дизайна.
P.S. в следующей статье познакомлю еще с 5 онлайн сервисами создания кнопок 😉
Спасибо Вам за добавление статьи «5 Веб-сервисов позволяющих создать кнопку online» в:
Если данная публикация вам понравилась, предлагаю вам подписаться на получение материалов centavrus-opti.ru через RSS ленту, и при желании присоединиться ко мне в Twitter
Da Button Factory — Бесплатный генератор кнопок CTA
Что случилось со старой «фабрикой Da Button Factory»?
Da Button Factory была приобретена ClickMinded! Инструмент был обновлен и останется бесплатным. Теперь это генератор кнопки с призывом к действию для наших студентов, изучающих цифровой маркетинг, которые учатся писать в блоге, способствующие конверсии.
Мы рекомендуем вам использовать последние версии Chrome, Firefox, Edge или Safari для использования этого инструмента. У вас могут возникнуть проблемы, если вы используете Internet Explorer — в этом случае просто загрузите один из рекомендуемых браузеров.
Как добавить кнопку к веб-сайту, электронной почте или сообщению в социальных сетях
Есть несколько способов сделать это.
Вариант №1: Загрузить файл изображения кнопки
Это самый простой способ. Просто выберите нужный тип файла и нажмите кнопку загрузки.
Затем просто загрузите изображение кнопки на свой веб-сайт, у поставщика услуг электронной почты или используйте его в изображениях в социальных сетях.
Вариант № 2: реализовать кнопку как HTML + CSS
Da Button Factory также является бесплатным генератором кнопок CSS.Для этого варианта требуется немного больше знаний HTML и CSS, но в результате веб-страница или электронное письмо будут работать быстрее (поскольку нет необходимости загружать изображение).
Для этого создайте элемент HTML, например «div» или «button», напишите копию CTA и назначьте ей класс. В этом примере мы назовем класс my-cta-button.
Затем скопируйте код CSS, предоставленный инструментом в разделе «Встроить», и добавьте его либо в свой файл CSS, либо на страницу с помощью тегов «style».
Вот и все! Теперь вы разработали и реализовали свою собственную кнопку HTML.
Как создавать призывы к действию с высокой конверсией
Вот несколько рекомендаций, которым вы можете следовать, чтобы убедиться, что ваши призывы к действию побуждают пользователей к действию.
- Используйте выделяющийся дизайн кнопок. Убедитесь, что между текстом кнопки и фоном, а также между кнопкой и фоном страницы достаточно контраста.
- Сообщите своим пользователям, что они получают, нажав на ваш CTA. Вместо того, чтобы использовать что-то общее, например «Нажмите здесь», сделайте описательный текст, например «Купить сейчас» или «Загрузить».
- При написании CTA-копии используйте от первого лица. Лучше использовать «Просмотреть мою учетную запись» вместо «Просмотреть свою учетную запись».
- Сделайте ваш CTA-текст кратким и по существу. Избегайте создания излишне многословных призывов к действию.
- Сделайте свое предложение более привлекательным, включив такие термины, как «Сейчас», «Бесплатно» или «Сохранить». Например, «Загрузите СЕЙЧАС», «Получите БЕСПЛАТНУЮ электронную книгу» или «Сэкономьте 10 $».
Ваша очередь
Da Button Factory от ClickMinded — это онлайн-разработчик кнопок, который позволяет быстро и бесплатно создавать красивые кнопки с призывом к действию с высокой конверсией для веб-сайтов, почтовых кампаний или публикаций в социальных сетях.
Начните с модели, показанной выше, настройте стиль в соответствии с вашими потребностями и реализуйте созданные вами кнопки для развития вашего бизнеса или веб-сайта.
После того, как вы создали свои кнопки и готовы приступить к своей первой цифровой маркетинговой кампании, обязательно ознакомьтесь с библиотекой шаблонов цифрового маркетинга ClickMinded, которая включает полезные шаблоны по всему, от написания описаний на Youtube до показа рекламы Google.
Онлайн-генератор кнопок для веб-приложений и мобильных приложений
Премиум-форма и значки доступны в нашей библиотеке
Маленькая витрина Купить сейчас и поиск кнопок для вашего веб-сайта или приложения электронной коммерции, загрузка кнопка, создание закладок в социальных сетях с помощью кнопок Twitter и Facebook.
- 3d форма
- Размеры до 270 x 120
- Текст высокого качества
- Самая горячая кнопка, которую вы можете создать
- Размеры до 300 х 90
Функция генератора спрайтов CSS
Мы выпустили инструмент для создания кнопок опрокидывания для вашего меню с эффектами наведения без использования Javascript.Попробуй:
Последний генератор значков
Значок и наклейка онлайн-генератор, имеющий следующую форму: круглый , звездочка и волна .
- 3 форма
- Текст высокого качества
- Размеры до 200 х 200
Сделайте ваш сайт крутым!
Здесь 3D и генераторы кнопок ленты, с высококачественным текстом особенность.
Создать изображение с прозрачным фоном
- Форма высокого качества
- Круглый угол
- Размеры до 310 x 85
- Поддержка Unicode
- Дизайн формы высокого качества
- Текст в две строки
- Размеры до 250 х 100
- Поддержка Unicode
Торопитесь! Весенняя сделка
Неограниченное скачивание для нашей премиальной подписки.Купить сейчас
Создание стилей кнопок HTML и CSS
Этот генератор кнопок CSS — это бесплатный онлайн-инструмент, который позволяет создавать стили кнопок CSS в разных браузерах за секунды.
Как создать кнопку?
Просто выберите кнопку css из библиотеки и воспроизведите ее стили css. После заполнения кнопки css нажмите кнопку предварительного просмотра или кнопку «Получить код», чтобы просмотреть сгенерированные коды CSS и HTML.
Какие свойства CSS доступны для редактирования?
Вы можете изменить следующие свойства CSS:
В дополнение к этим свойствам вы также можете изменить текст кнопки и имя класса.
Какие браузеры вы поддерживаете?
Сгенерированный код будет включать префиксы поставщиков для следующих браузеров; Google Chrome, Firefox, Safari, Opera, Internet Explorer и Edge. Вы также можете отключить префиксы поставщиков, чтобы получить более чистый код. Для этого просто снимите флажок «префикс» над сгенерированным кодом css.Все современные браузеры должны правильно отображать вашу кнопку css .
Нужно ли мне добавлять на свой сайт какой-либо код javascript или jQuery?
Абсолютно нет. Вам нужно только включить сгенерированные коды CSS и HTML, чтобы отобразить кнопку . С другой стороны, если ваша кнопка должна выполнить действие, скажем, запрос ajax, вам нужно написать этот фрагмент кода. Такого рода задачи выходят за рамки генератора кнопок.
Могу ли я использовать эти кнопки при загрузке Twitter?
Ага.Чтобы добавить кнопку на веб-сайт Bootstrap, вам просто нужно ввести одно из имен классов, перечисленных в документации Bootstrap, в поле «имя класса» под текстовыми настройками. Как вы знаете, кнопка начальной загрузки имеет имена классов css, такие как btn-primary, btn-secondary и т. Д. Допустим, если вы введете «btn-primary», код сгенерирует код css с этим именем класса. И, наконец, если вы переопределите одно из этих имен классов, включив сгенерированный код css на свой веб-сайт, все должно работать нормально, как ожидалось.
Онлайн-генератор кнопок. Дизайнер кнопок начальной загрузки для веб-сайтов. Создатель кнопок
Онлайн-генератор кнопок. Дизайнер кнопок начальной загрузки для веб-сайтов. Создатель кнопки Главная > Онлайн-генератор кнопок для веб-дизайна и разработкиInicio — Утилиты и веб-инструменты — Онлайн-генератор кнопок для веб-дизайна и разработки
ScrollНастройки коробки для печенья
Настройки коробки для печенья
La configuración de privacidad
Decide qué cookies quieres permissionir.
Puede cambiar esta configuración en cualquier momento. Sin embargo, esto puede provocar que algunas funciones ya no estén disponibles. Para obtener información sobre cómo ellear las cookies, consulte la función de ayuda de su navegador.
Obtenga más información sobre las cookies que utilizamos.
CON EL DESLIZADOR PUEDE HABILITAR O DESHABILITAR DIFERENTES TIPOS DE COOKIES:
Этот веб-сайт будет
- Essential: запомнить настройки разрешений для файлов cookie
- Essential: разрешить сеансовые файлы cookie
- Essential: собрать информацию, которую вы вводите в информационный бюллетень контактных форм и другие формы на всех страницах
- Essential: отслеживать то, что вы вводите в корзине покупок
- Essential: подтвердите, что вы вошли в свою учетную запись пользователя
- Essential: запомните языковую версию, которую вы выбрали
Этот веб-сайт не будет
- Запомнить ваши данные для входа в систему
- Функциональность: запомнить настройки социальных сетей
- Функциональность: запоминание выбранного региона и страны
- Аналитика: отслеживание посещенных страниц и выполненного взаимодействия
- Аналитика: отслеживание вашего местоположения и региона на основе вашего IP-номера
- Аналитика: отслеживание времени, проведенного на каждой странице
- Аналитика: Повышение качества данных статистической функции s
- Реклама: адаптируйте информацию и рекламу к вашим интересам на основе e.грамм. контент, который вы посещали раньше. (В настоящее время мы не используем файлы cookie для таргетинга или таргетинга)
- Реклама: сбор личной информации, такой как имя и местонахождение
Этот веб-сайт будет
- Essential: запомнить настройки разрешений для файлов cookie
- Essential: разрешить сеансовые файлы cookie
- Essential: собрать информацию, которую вы вводите в информационный бюллетень контактных форм и другие формы на всех страницах
- Essential: отслеживать, что вы вводите в корзине покупок
- Essential: подтвердите, что вы вошли в свою учетную запись пользователя
- Essential: запомните языковую версию, которую вы выбрали
- Функциональность: запомните настройки социальных сетей
- Функциональность: запомните выбранный регион и страну
Этот веб-сайт выиграл ‘ t
- Аналитика: отслеживайте посещенные страницы и выполненное взаимодействие
- Аналитика: отслеживайте свое местоположение и регион на основе вашего IP-номера
- Аналитика: отслеживайте время, проведенное на каждой странице
- Аналитика: увеличивайте качество данных статистических функций
- Реклама: Tailor inform деятельность и реклама в соответствии с вашими интересами на основе e.грамм. контент, который вы посещали раньше. (В настоящее время мы не используем файлы cookie для таргетинга или таргетинга)
- Реклама: сбор личной информации, такой как имя и местонахождение
Этот веб-сайт будет
- Essential: запомнить настройки разрешений для файлов cookie
- Essential: разрешить сеансовые файлы cookie
- Essential: собрать информацию, которую вы вводите в информационный бюллетень контактных форм и другие формы на всех страницах
- Essential: отслеживать то, что вы вводите в корзине покупок
- Essential: Подтвердите, что вы вошли в свою учетную запись пользователя
- Essential: запомните языковую версию, которую вы выбрали
- Функциональность: запомните настройки социальных сетей
- Функциональность: запомните выбранный регион и страну
- Analytics: Отслеживайте посещенные страницы и выполненное взаимодействие
- Аналитика: отслеживайте свое местоположение и регион на основе вашего IP-номера
- Аналитика: отслеживайте время, проведенное на каждой странице
- Аналитика: повышайте качество данных статистических функций
Сайт не будет
- Реклама: Tailor inform деятельность и реклама в соответствии с вашими интересами на основе e.грамм. контент, который вы посещали раньше. (В настоящее время мы не используем файлы cookie для таргетинга или таргетинга)
- Реклама: сбор личной информации, такой как имя и местонахождение
Этот веб-сайт будет
- Функциональность: запомнить настройки социальных сетей
- Функциональность: запомнить выбранный регион и страну
- Аналитика: отслеживать посещенные вами страницы и выполненное взаимодействие
- Аналитика: отслеживать свое местоположение и регион на основе вашего IP-адреса номер
- Аналитика: Отслеживайте время, потраченное на каждую страницу
- Аналитика: Повышайте качество данных статистических функций
- Реклама: Подбирайте информацию и рекламу в соответствии с вашими интересами на основе e.грамм. контент, который вы посещали раньше. (В настоящее время мы не используем файлы cookie для таргетинга или таргетинга)
- Реклама: Соберите личную информацию, такую как имя и местонахождение
Этот веб-сайт не будет
- Запомните ваши данные для входа в систему
Как создать собственную веб-кнопку | Small Business
Как бы трудно ни было привлечь клиентов на веб-сайт вашей компании, еще сложнее заставить их щелкнуть ваши объявления или другие ссылки на информацию о продуктах и услугах.Веб-кнопки — это гиперссылки, содержащие графические изображения, призванные привлечь внимание посетителей к вашим ссылкам и побудить их щелкнуть. Вы можете создать свою собственную графическую веб-кнопку с помощью инструмента редактирования изображений, такого как Windows Paint, и вставить его на веб-страницу с помощью тега «» языка HTML.
Щелкните шар Windows. Введите «Paint» в поле поиска и нажмите «Paint» в списке результатов.
Создайте новое изображение или отредактируйте существующее, чтобы создать веб-кнопку.
При необходимости измените размер изображения с помощью инструмента «Изменить размер» в Paint.Щелкните вкладку «Главная», затем значок изменения размера на панели изображений и нажмите «Изменить размер в пикселях». Установите флажок «Сохранить соотношение сторон», если у него нет флажка. Введите новую ширину изображения в поле ввода «По горизонтали», если вам нужно, чтобы изображение было определенной ширины, или введите новую высоту изображения в поле «По вертикали». Paint автоматически поддерживает правильное пропорциональное соотношение между высотой и шириной изображения, чтобы оно не выглядело искаженным.
Нажмите кнопку «Paint», затем «Сохранить как» и выберите «JPEG» в качестве формата файла.
Введите имя изображения в поле «Имя файла» и нажмите кнопку «Сохранить».
Щелкните сферу Windows и введите «Блокнот» в поле поиска. Щелкните Блокнот в списке результатов.
Щелкните меню «Файл» и пункт меню «Открыть». Используйте проводник, чтобы найти HTML-файл, в который вы хотите добавить свою веб-кнопку. Дважды щелкните имя файла, чтобы открыть его.
Прокрутите вниз до раздела веб-страницы, где вы хотите добавить кнопку «Интернет».
Вставьте тег HTML «».Тег «» указывает браузеру загрузить и отобразить изображение, найденное по определенному веб-адресу или URL. При использовании с атрибутами «ширина» и «высота» он также может указывать высоту, ширину и альтернативный текст изображения. Используйте тег «», чтобы превратить ваше изображение в гиперссылку, которая ведет пользователя на веб-страницу, указанную URL-адресом, присвоенным атрибуту «href».
Например, следующий код веб-кнопки указывает браузеру пользователя загрузить и отобразить файл JPEG Buttonimage.jpg, который имеет ширину 800 пикселей и высоту 100 пикселей:.Если пользователь щелкнет это изображение, браузер загрузит веб-страницу по URL-адресу myweb.com. Если браузер не может отобразить JPEG, вместо этого он покажет текст «Щелкните для выгодных покупок».
Нажмите «Ctrl-S», чтобы сохранить вашу работу.
Ссылки
Ресурсы
Советы
- Если в вашей компании нет художника-графика, воспользуйтесь онлайн-сервисом, например CoolText, Button Maker или Da Button Factory, чтобы создать для вас изображения веб-кнопок. Эти сайты проведут вас через процесс выбора нужного типа кнопки; его размер, форма и цвет; плюс формат и внешний вид текста кнопки.
Предупреждения
- Избегайте использования изображений, которые вы найдете в Интернете, в качестве веб-кнопок, если у вас нет явного письменного разрешения от правообладателя изображения. Вы также можете избежать проблем с нарушением авторских прав, используя изображения из Open Clip Art Library. Эти изображения находятся под лицензией Creative Commons Public Domain Dedication, и вы можете использовать их любым удобным для вас способом.
Writer Bio
Аллен Бетеа пишет статьи по программированию, веб-дизайну, операционным системам и компьютерному оборудованию с 2002 года.Он имеет степень бакалавра наук UNC-Chapel Hill и степень AAS в области офисных технологий, машиностроения / черчения и интернет-технологий. Аллен имеет обширный опыт работы с настольным и системным программным обеспечением для операционных систем Windows и Linux.
9 бесплатных онлайн-инструментов для создания кнопок
В этом посте вы увидите 9 бесплатных веб-инструментов для создания кнопок или навигации по сайту. Все эти инструменты можно использовать бесплатно.
1. Устройство для изготовления пуговиц
Инструмент для изготовления пуговиц предоставлен Адамом Калси.Просто выберите цвета, введите текст, и вы получите кнопку, которую можно скачать для своего сайта.
2.Button Maker Online
Используйте этот бесплатный онлайн-инструмент для создания кнопок, чтобы легко и наглядно создавать популярные микрокнопки «допустимый XHTML» (80–15). Вы также можете выбрать вместо нее большую кнопку 88Ö 31.
3. Устройство для изготовления пуговиц
Button Maker — замечательный бесплатный инструмент для создания кодов CSS для ваших кнопок. У вас есть доступ к разным цветам для разных частей кнопки.Ползунки над переключателями цвета позволяют изменять размер и форму кнопки, которую вы видите слева. Чтобы получить код, вы нажимаете на кнопку.
4. Завод кнопок Da
Создавайте кнопки онлайн быстро. Вы можете создавать кнопки разных размеров и загружать результат в формате PND, JPEG, GIF или ICO.
5. бесплатный генератор кнопок Flash
Если вы ищете источник для создания кнопок Flash, то Free Flash Button Generator отлично справится с этой задачей.Вы начинаете с выбора стиля кнопки. Цвета можно изменить с помощью значений HEX. Нижняя панель позволяет добавлять ссылки на кнопку и имена ссылок. Нажатие последней кнопки создает вашу кнопку и соответствующий ей HTML-код.
6.Web 2.0 и генератор кнопок Grudge Style
Этот онлайн-генератор кнопок делает немного больше, чем просто генерирует недовольство и кнопки Web 2.0. Он также генерирует систему меню из ваших кнопок.
7.Стеклянные Пуговицы
Сгенерируйте глянцевые кнопки онлайн и загрузите заархивированный файл кнопок. Как вы можете видеть на изображении ниже, существует множество вариантов для создания кнопок.
8. Как генератор кнопок
Используя As Button Generator, вы можете создавать кнопки, редактируя их через интерфейс с вкладками. Параметры настройки охватывают множество областей и удовлетворят все ваши требования к созданию кнопок.
9. Генератор кнопок со скругленными углами HTML и CSS
Этот сайт предназначен для разработчиков, которым нужен очень простой, но интерактивный инструмент для создания кнопок «2 в 1».С помощью HTML и генератора кнопок со скругленными углами CSS вы можете создавать кнопки, но изменяя их цвета и получая ZIP-архив, который содержит файл изображения кнопки PNG, а также код HTML и CSS.
Как создать и написать красивую веб-кнопку
Интернет пугает, дезорганизован и своеобразен. Веб-дизайнеры должны постараться сделать путешествие пользователя максимально простым и приятным. Более того, существуют определенные действия, которые веб-мастера хотят, чтобы посетители выполняли — например, переход на страницу, отправка некоторой информации.По этим причинам знание того, как создавать и кодировать красивую веб-кнопку, является важным навыком для веб-дизайнеров.
Иногда мы сначала создаем макет веб-страницы в Photoshop, а затем создаем его с помощью кода и разметки. Эти две операции совершенно разные, но имеют одинаковый эффект. Во-первых, я покажу вам, как сделать веб-кнопку в Photoshop. А затем я объясню, как воспроизвести тот же визуальный эффект с помощью HTML и CSS.
Как сделать кнопку в фотошопе
Прежде всего создайте новый документ в Photoshop, убедившись, что выбран цветовой режим RGB и 72 ppi.
Затем на панели инструментов (обычно слева) выберите инструмент Rounded Rectangle Tool.
Затем на панели параметров (обычно вверху) установите Радиус на 5 пикселей. Чем больше радиус, тем больше изогнуты углы. Вы укажете это значение позже в CSS.
Теперь вы можете нарисовать свою кнопку, щелкнув и перетащив (с выбранным инструментом «Прямоугольник со скругленными углами»). Не беспокойтесь о том, какой это цвет, мы зададим его с помощью эффектов стилей слоя в палитре слоев.
Итак, когда вы довольны формой, с выбранным слоем прямоугольника с закругленными углами, щелкните значок эффектов в нижней части палитры слоев, который выделен полужирным шрифтом в нижнем регистре курсивом fx . Выберите любой из вариантов в появившемся раскрывающемся меню, и это откроет диалоговое окно «Стиль слоя», в котором хранится целая куча возможностей Photoshop!
Неважно, над каким стилем вы работаете в первую очередь, но давайте начнем с градиента. Щелкните Gradient Overlay в левой части диалогового окна.
Установите градиент, щелкнув, э, градиент, а затем выбрав два цвета в редакторе градиентов .
Нажав на «остановки цвета» в начале и в конце градиента, а затем щелкнув «Цвет» внизу, вы можете в конечном итоге выбрать цвета из палитры цветов. (Может быть, здесь слишком много щелчков, Adobe!) Здесь важно щелкнуть по очень похожим оттенкам одного цвета, чтобы градиент не был слишком крутым.
Теперь давайте сделаем Stroke или border. После того, как все в порядке, нажмите «Обводка» в левой части диалогового окна «Стиль слоя», и, к сожалению, вы получите красную границу по умолчанию в 3 пикселя. (Как насчет того, чтобы установить по умолчанию 1 пиксель, Adobe !?)
Итак, измените ширину на 1 пиксель и выберите цвет обводки или границы. Иногда бывает приятно сделать его того же цвета, что и начало или конец градиента. В данном случае более темный из двух цветов.
Наконец, мы хотим сделать кнопку тонкой однопиксельной подсветкой вверху, под рамкой. Это можно сделать, сделав выделение высотой в один пиксель на другом слое, но вы также можете сделать это в диалоговом окне «Стиль слоя». Нажмите на Inner Shadow слева.
Обычно стили теней темные, но они могут давать свечение или блики. Нажмите на черный прямоугольник после раскрывающегося списка «Режим наложения» и измените цвет с черного на белый.Выберите Нормальный для Режима наложения (вы не увидите белого в Умножении). Убедитесь, что угол составляет 90º, а расстояние и размер — 1 пиксель.
Это действительно незаметно, и вы едва можете увидеть это на этом более светлом примере (левая кнопка в верхней части этой статьи. Но на более темной кнопке она более заметна. В любом случае, этот однопиксельный блик на верхняя часть кнопки дает легкий трехмерный эффект, который заставит посетителей с удовольствием нажимать на нее, а ваш клиент будет рад снова нанять вас!
На этом мы завершаем оформление кнопки, теперь теперь текст.
Возьмите инструмент «Текст» (T) на панели инструментов и щелкните документ Photoshop в том месте, где вы хотите разместить текст. Введите текст: в этом примере «Щелкните меня».
Используйте панель параметров, чтобы выбрать шрифт, цвет и размер текста.
Чтобы придать темному тексту свечение под ним, а светлому тексту — тень под ним, мы можем выбрать Drop Shadow в диалоговом окне Layer Styles.
Опять же, в примере слева вверху, мы хотим слегка выделить текст под ним, чтобы он выглядел так, как будто текст слегка вдавлен в кнопку.Для этого мы меняем режим наложения на Нормальный и меняем цвет с черного на белый. Убедитесь, что угол составляет 90º, а расстояние и размер — 1 пиксель. (В примере справа, режим наложения будет Умножение, а цвет будет очень темно-синим.)
Вот как это делается в Photoshop. После того, как ваш клиент одобрил дизайн кнопок, вам не следует просто сохранять изображение в формате JPG и загружать его в HTML. Вы должны использовать CSS для стилизации элемента (который может быть input или p class или a class ).
Как стилизовать кнопку с помощью CSS
Здесь я дам вам стили для кнопки ниже, которая похожа на кнопку вверху, но с немного меньшим текстом. (Если вы читаете это в RSS-фидере, по электронной почте или на сайте парсера, вы не увидите следующую кнопку, поэтому вам лучше проверить это на веб-сайте).
Вот кнопка, стилизованная под CSS
Вот HTML-код для примера текста, приведенного непосредственно выше. Однако в большинстве случаев кнопки помечены тегом input .
Прежде чем вы сможете начать работу с CSS, вам нужно вернуться к документу Photoshop. Увеличьте масштаб до кнопки и выберите с помощью инструмента «Прямоугольная область» (M) выделение шириной в один пиксель. Высота будет конечной высотой кнопки. Вы можете удалить обводку для этого, так как это может усложнить ситуацию, и вы будете устанавливать это в CSS.
Cmd / Ctrl-Shift-C для копирования Объедините спрайт и затем создайте новый документ в Photoshop (Cmd / Ctrl-N).
Размер нового документа будет размером только что скопированного спрайта, если для параметра «Предустановка» установлено значение «Буфер обмена».
Вставьте фоновый градиент шириной 1 пиксель в новый документ и сохраните для Интернета и устройств (Cmd / Ctrl-Opt / Alt-Shift-S) как JPG достаточно хорошего качества, чтобы избежать полос.
Другая информация, которую вы хотите получить из документа Photoshop для визуального элемента кнопки, — это шестнадцатеричное значение обводки или границы кнопки и шестнадцатеричное значение цвета текста.
А вот и CSS.
p.button {
background: url ("path / to / 1px-wide-background.jpg") repeat-x # C2CBF4;
граница: сплошная 1px # C2CBF4;
радиус границы: 5 пикселей;
moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
font-weight: жирный;
отступ: 5 пикселей;
выравнивание текста: по центру; Семейство шрифтов
: Helvetica, Arial, Tahoma, без засечек;
font-size: 15 пикселей;
font-weight: жирный;
line-height: 24px;
ширина: 350 пикселей;
}с.кнопка a {
text-shadow: 0px 1px 1px белый;
цвет: # 4E5FAB;
оформление текста: нет;
}
Обратите внимание, что фон имеет цвет, а также фоновое изображение (градиент), это для людей, которые просматривают без изображений.
Каждая кнопка должна иметь состояние наведения
Каждая ссылка или кнопка на веб-сайте должны визуально изменяться, когда пользователь наводит на них указатель мыши. Это создает у пользователя впечатление, что это «живая» или «активная» область экрана и, следовательно, при нажатии будет что-то делать, в противном случае это просто неактивный текст или изображения.
Поэтому убедитесь, что вы установили стили для состояния наведения.
p.button a: hover {
text-decoration: none;
цвет: # 6E80D0;
тень текста: 1px 1px 1px #fff;
}p.button: hover {
border: 1px solid # 8b9be4;
}
В этом конкретном примере градиент фона кнопки не меняется при наведении курсора, но должен меняться. Вы можете сделать это, удвоив высоту фонового спрайта, создав более светлую или темную полосу пикселей под ней и изменив координату y фонового изображения, чтобы отобразить разные пиксели.
p.button: hover {background-position: 0 40px; }
Здесь фоновое изображение будет перемещаться вверх на 40 пикселей при наведении указателя мыши, показывая более светлые или более темные пиксели. 36 пикселей — это высота кнопки.
Но я сделаю правильный урок по спрайтам в другой день!
Другие учебные пособия
У меня есть еще один урок о более выпуклых, блестящих, желеобразных пуговицах. Вот одна для классной блестящей кнопки Web 2.0.
А вот еще один урок о том, как создавать крутые блестящие кнопки только в Illustrator.
Дайте мне знать, что вы думаете
Есть ли другие полезные советы для веб-кнопок? Я хотел бы услышать, что вы думаете, в комментариях ниже. Кроме того, не стесняйтесь голосовать за эту статью с помощью твита, лайка или плюса!
.