Конструктор кнопок для сайта: Создать кнопку онлайн 💚 HTML

Создаем спрайт из кнопок и вставляем Html код на сайт

После того, как все нужные группы и страницы в соцсетях вы создали, а значит получили все необходимые ссылки, можно озадачиваться добавлением кнопок на сайт. Можно, конечно же, в соответствии с моим постом про иконки и значки для сайта, подобрать для каждой соцсети подходящую иконку и при необходимости уменьшить ее размер до необходимого в простенькой программе FastStone Image Viewer и бесплатном онлайн-фотошопе.

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

Я решил не изобретать велосипед (создавать спрайт), а использовал тот, что создает конструктор Шаре42 (ссылка на описание работы с ним приведена чуть выше). В нем можно выбрать те соцсети, иконки которых вам будут нужны, и вместе с кодом вы получите CSS спрайт, т.е. физически один графический файл, на котором будут размещены все нужные вам иконки соцсетей и подписки на RSS ленту (и Емайл, если потребуется).

Я выбрал четыре основных сети и пару иконок для подписки на новости с размером иконок 24 на 24 пиксела, поэтому мой спрайт выглядит так (FriendFeed, правда, туда еще затесался, но это не беда):

Теперь у нас есть все ингредиенты — ссылки на группы или страницы соцсетей и иконки для их отображения на сайте. Осталось все это только правильно приготовить, т.е. сверстать. Мой блог работает на WordPress, поэтому код с кнопками я буду вставлять в один из шаблонов, из которых состоит используемая мною тема оформления. В моем случае он называется sidebar.php. Html код при этом получается крайне простой:

<a rel="nofollow" href="http://feeds.feedburner.com/Ktonanovenkogoru" title="RSS сайта KtoNaNovenkogo.ru" target="_blank"></a>
<a rel="nofollow" href="http://feedburner.google.com/fb/a/mailverify?uri=Ktonanovenkogoru" title="Подписаться по e-mail" target="_blank"></a>
<a rel="nofollow" href="https://vk.com/ktonanovenkogoru" title="KtoNaNovenkogo.ru В Контакте" target="_blank"></a>
<a rel="nofollow" href="http://www.facebook.com/KtoNaNovenkogo.ru" title="KtoNaNovenkogo.ru в Facebook" target="_blank"></a>

На всякий случай я добавил rel=»nofollow», чтобы эти ссылки не учитывали поисковики при распределении весов на сайте. Атрибут Title в теге гиперссылки A служит для отображения заключенного в него текста при подведении курсора мыши к иконке. Я не стал им пренебрегать, ибо не для всех посетителей сайта иконки могут представлять исчерпывающую информацию. Выглядеть это будет примерно так:

Привязываем спрайт к Html коду и оформляем кнопки в CSS

Однако очевидно, что для описанного выше кода нужно будет еще несколько строк в файле стилей добавить (у меня он называется style.css и живет в папке с используемой мною темой оформления — читайте про них по приведенной чуть выше ссылке). У меня получилось примерно так (может быть и корявенько, но работает):

.twit {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -0px 0 no-repeat;}
.vkon {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:18px 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons. png) -24px 0 no-repeat;}
.face {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -48px 0 no-repeat}
.goog {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -96px 0 no-repeat}
.rsskt {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 55px;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -120px 0 no-repeat}
.emailkt {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -144px 0 no-repeat}

CSS свойство display:inline-block позволяет придать тегу гиперссылки A одновременно свойства строчного и блочного элемента. По отношению к внешним и соседним тэгам он будет вести себя как строчный (т.е. рядом с ним могут располагаться и другие строчные элементы), а вот по отношению к вложенным в него тегам он будет вести себя как блочный (т. е. можно будет задавать его размеры как по ширине, так и по высоте, а еще задавать отступы с помощью марджинов и педдингов).

CSS свойство vertical-align:bottom задет выравнивание по вертикали, что наверно понятно из его названия. Практически для всех элементов в Html коде оно означает выравнивание между собой строчных элементов с текстом относительно их базовой линии. Просто поэкспериментируйте и поймете его назначение.

С помощью width и height мы задаем размеры отображаемого блока, который должен совпадать с размером иконки соцсети. Свойство outline:none используется, чтобы в некоторых браузерах при клике на ссылку вокруг нее не появлялась рамка. С помощью margin я задал отступы от верха и от соседних иконок, если не ошибаюсь (года три назад делал, когда CSS активно изучал).

Ну, и самое интересное. С помощью сборного правила background мы определяем, какая именно область нашего спрайта будет отображаться на данном конкретном месте в виде фона (в нашем случае этот фон подкладывается под гиперссылку). Объяснять как так получается очень долго, поэтому читайте приведенную по ссылке статью и все станет понятно (там и наглядные примеры приводятся). Если лень, то просто поэкспериментируйте с циферками, которые, как вы могли заметить, не даром кратны 24.

Да, файл спрайта залейте по ФТП на свой сайт и укажите в background до него путь (в относительном или абсолютном виде). Вот и все. Если не получится, что читайте внимательнее материалы по приведенным выше ссылкам, ну, а если совсем уже ничего не получится, то описывайте вашу ситуацию в комментариях (подробненько — для вставки кода на забудьте его в теги PHP заключить с квадратными скобками).

Как сделать красивую кнопочку самому

Давайте начнем с онлайн сервис Da Button Factory, предназначенного для создания и детальной настройки внешнего вида кнопок для своего сайта.

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

Так же вы сможете создать рамку для кнопочки, включить отбрасывание ею тени, задать точный размер и, наконец, выбрать формат, в котором она будет сохранена (png, gif, jpeg или ico).

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

Теперь давайте поподробнее рассмотрим возможности по редактированию создаваемых на Da Button Factory кнопок. Для начала в поле «Text» можно вписать текст, который будет отображаться на ней, а в поле «Font» — выбрать из выпадающего списка тип шрифта (не все имеющиеся там шрифты поддерживают русский язык). Для текста можно будет также задать жирное или курсивное начертание, просто оставив галочки в полях «Bold» и «Italic».

Размер шрифта можете выбрать из выпадающего списка в поле «Size», а щелкнув по квадратику с текущим цветом рядом с надписью «Color», у вас появится возможность выбрать из открывшейся палитры нужный оттенок текста на создаваемой вами кнопке.

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

В области «Output type» можете выбрать, в каком именно виде будет сохраняться создаваемая вами кнопка. Можно выбрать из выпадающего списка либо вариант сохранения в виде графического файла, либо в виде CSS свойств. В случае выбора сохранения в графический файл, у вас еще появится возможность выбрать формат (png, gif, jpeg или ico).

В области «Style» выбираете из выпадающего списка один из трех возможных вариантов стилевого оформления углов:

1. rectangular box — кнопка с прямыми углами (квадратными)
2. rounded box — со скругленными углами, причем радиус скругления можно задать в поле «Corners radius»
3. round box — с полукругами по бокам

В области «Background» задаете фоновую заливку создаваемой кнопки одним или несколькими цветами. Из выпадающего списка есть возможность выбрать варианты заливки:

1. unicolored — заливка одним цветом, который можно выбрать в области «Color»
2. two colors — заливка двумя оттенками, которые можно выбрать в области «Color». Цвета будут заливать ровно по половине кнопки. Поменять их расположение можно при помощи «swap»
3. gradient — градиентная заливка двумя оттенками. В этом случае цвета будут плавно перетекать один в другой. Направление перетекания можно задать при помощи «swap»
4. pyramid — вариант градиентной заливки, но при этом один оттенок перетекает в другой, а затем опять осуществляется плавный переход к первому цвету. Ссылка «swap» позволяет менять их последовательность

В области «Border» вы можете задать рамку для кнопки, указав ее толщину и цвет в соответствующих полях. В области «Size» можете задать ее размер по высоте и ширине. После окончания всех настроек загружаете итоговый файл к себе на компьютер, нажав на ссылку «download» в середине страницы. Он будет сохранен в том графическом формате, который вы выбрали в области «Output type».

Но кнопку можно нарисовать и в Фотошопе, если этот редактор имеется в вашем распоряжении (кстати, есть официально бесплатная версия фотошопа, которую несложно скачать):

Как вставить созданную онлайн кнопку в шаблон своего сайта

Для того, чтобы вставить скачанный графический файл с изображением кнопки в нужное место вашего сайта и сделать ее активной (чтобы осуществлялся переход при щелчке по ней мышью), вам нужно для начала загрузить файл картинки на свой сайт по протоколу ФТП, а затем вставить в нужное место шаблона тег картинки IMG (тут еще описана вставка картинок в подробностях), заключив его в тег ссылки A. Ссылка будет вести на ту страницу, которая должна открыться по ее нажатии.

Например, так:

<a target="_blank" href="http://feeds.feedburner.com/Ktonanovenkogoru"><img src="https://ktonanovenkogo.ru/image/button.png" /></a>

Для того, чтобы у вас была возможность позиционировать кнопку относительно соседних элементов дизайна, вы заключаете данный код в открывающий и закрывающий Html теги DIV (создать контейнер). В DIV прописываете атрибут CLASS, а затем прописываете нужные свойства для этого класса в файле CSS вашего шаблона (см. статьи рубрики уроки CSS здесь).

Например, так:

<div><a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=Ktonanovenkogoru&loc=ru_RU"><img src="https://ktonanovenkogo.ru/image/button2.png" /></a></div>

В файле CSS для этого класса imgleft прописать, например, так:

.imgleft {
	float:left;
	margin: 5px 15px 5px 40px;
}

В результате получим кнопку расположенную следующим образом:

Поясню строки свойства для класса imgleft:

1. float:left; — заставляет данный блок с кнопкой прижаться к соседнему элементу дизайна расположенному слева
2. margin: 5px 0px 5px 40px; — задает отступ в пикселях данного блока с кнопкой относительно соседних. Отступы перечисляются в таком порядке: сверху, справа, снизу, слева

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

Конструктор кнопок работающий прямой на вашем сайте

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

Если вы недостаточно хорошо разбираетесь в таблицах стилей CSS и PhotoShop (здесь описан онлайн вариант этого фоторедактора) для того, чтобы самостоятельно создать красивую кнопку для своего сайта, то предложенный автором онлайн сервиса набор уже готовых к использованию красивых и бесплатных кнопочек, придется очень даже кстати.

Набор вариантов очень велик и способен перекрыть потребности практически любого вебмастера. Вот пример красивостей, созданных при помощи него:

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

Какая именно надпись и рисунок будут на кнопке, сможете задавать в строке кода, которую нужно будет прописать в нужном месте шаблона вашего веб ресурса для отображения данного шедевра в нужном месте вебстраницы. Т.е. кнопочка получается составная: контур (изменяющийся при наведении мыши), надпись (задаете сами) и рисунок(выбираемый из полутора тысяч вариантов), который может быть расположен до или после надписи.

Если вы решили испробовать данный бесплатный конструктор кнопок на своем ресурсе, то для начала необходимо скачать набор с онлайн сервиса автора. На странице загрузки скачайте последнюю версию (на данный момент это SB v1.2).

Скачали? Теперь распакуйте архив с файлами и посмотрите, что находится внутри. Папка IMAGES содержит две подпапки: ICONS и SKINS. В папке ICONS находится каталог SILK, в котором содержатся иконки для ваших будущих шедевров размером 16 на 16 пикселей.

Именно эти изображения будут добавляться при создании вами кнопок до или после надписи. Изображений этих много, около полутора тысяч. Что бы не загружать все изображения на сервер хостинга, вы можете предварительно просмотреть эти иконки и оставить только те, которые будете использовать в дальнейшем (хотя можно, конечно же, оставить все как есть).

Теперь вам нужно подключиться к серверу вашего хостинга по протоколу FTP и скопировать на сервер всю папку SexyButtons (можно не копировать файлы changelog.txt и index.html). В какое именно место вы скопируете эту папку не так важно. Я, например, разместил папку с кнопками по следующему адресу: wp-content/themes/SexyButtons.

Копирование файлов займет какое-то время, особенно если вы оставили все иконки в папке SexyButtons\images\skins\, не удалив те, которые не планируете использовать в дальнейшем для оформления вашего сайта.

Как поставить кнопку на сайт?

Давайте перейдем непосредственно к тому, как добавить эти кнопочки на сайт. Следующим шагом после окончания копирования содержимого папки SexyButtons на сервер, будет прописывание в код шаблона строки, предписывающей браузерам при загрузке любых страниц веб ресурса вместе с HTML кодом подгружать еще и файл каскадных таблиц стилей sexybuttons.css.

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

Теги HEAD всегда находятся в самом верху кода любой HTML странички и между ними прописываются различные мета-теги, которые призваны сообщать определенную информацию браузерам, в которых открывается данная страница, и поисковым системам.

Нам нужно будет прописать между открывающим и закрывающим тегами HEAD путь до файл CSS, который позволит сделать красивыми наши бесплатные кнопки:

<link rel="stylesheet" href="https://ktonanovenkogo. ru/wp-content/themes/SexyButtons/sexybuttons.css" type="text/css" />

Только, естественно, вы должны будете заменить ссылку https://ktonanovenkogo.ru/wp-content/themes/SexyButtons/sexybuttons.css на ваш вариант.

В случае блога на WordPress для вставки данной строки кода вызова CSS свойств, вам нужно будет открыть на редактирование файл header.php (делается это обычно с помощью FTP клиента, например, описанного тут FileZilla) из папки с используемой вами темой оформления WordPress (тут раскрыты все их секреты): wp-content/themes/Папка_с_вашей_темой_оформления.

Открываете файл header.php в редакторе (например, Notеpad++) и в самом его начале находите открывающий Html тег HEAD, который в моем случае выглядит так:

<head profile="http://gmpg.org/xfn/11">

В любом месте за ним, но до закрывающего тега HEAD:

</head>

прописываете строчку с кодом подключения файла стилевого оформления:

В случае сайта на Joomla, нужно будет открыть на редактирование файл index. php из папки используемого вами шаблона Joomla (тут все их секреты раскрыты): /templates/Папка_с_вашей_темой_оформления.

В начале данного файла вы найдете открывающий и закрывающий теги HEAD, между которыми вами и надо будет вставить строку:

<link rel="stylesheet" href="http://Ваш_путь_до_папки_SexyButtons/SexyButtons/sexybuttons.css" type="text/css" />

В случае форума на SMF, нужно открыть на редактирование index.template.php из папки используемой вами темы оформления SMF. Если у вас на форуме используется тема по умолчанию (дефолтная), то путь к папке будет следующий: Themes/default.

С помощью встроенного поиска лучшего Html и PHP редактора (тут читайте что это за редактор такой) находите, например, этот участок кода:

и добавляете между этими двумя строками свою строку кода для подгрузки файла sexybuttons.css, который сделает кнопки SexyButtons красивыми и соответствующими названию (ну, во всяком случае, разработчики именно так считают):

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

Как сделать ее красивой и информативной?

Теперь переходим к самой интересной части. Для создания кнопочки с надписью, но без рисунка, вы можете использовать либо Html тег ссылок A (здесь читайте про гиперссылки), либо Html тег для создания кнопки BUTTON.

При этом пространство между открывающими и закрывающими тегами (A или BUTTON) должно быть заполнено текстом, который вы хотите видеть на создаваемой кнопке. Причем, этот текст должен быть заключен в двойные открывающие и закрывающие Html теги SPAN. Звучит устрашающе, не правда ли?

Но на деле, все довольно просто. В случае тега A мы используем такой код:

<a href="#"><span><span>Просто красивая штучка</span></span></a>

и получаем такую кнопочку:

Просто красивая штучка

Причем, это реально рабочая кнопка. Нажав на нее вы попадете в начало страницы. Это задается атрибутом HREF тега A. Там прописан переход к началу страницы «#» (хеш).

В случае с тегом BUTTON, код и получаемая кнопочка будут выглядеть так:

<button><span><span>Красивая кнопочка для сайта</span></span></button>

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

Для вставки иконки нужно будет добавить еще один открывающий и закрывающий тег SPAN, причем, в нем нужно прописать CSS класс соответствующий определенной иконке, которая появится на нашей красивейшей кнопочке. Например:

<button><span><span><span>KtoNaNovenkogo.ru</span></span></span></button>

Видите, у нашей кнопки перед надписью появилась галочка, которая соответствует классу OK, прописанному во внутреннем теге SPAN. А как сделать так, чтобы иконка была на кнопочке не перед надписью, а после нее?

Довольно просто. Нужно добавить через пробел к названию CSS класса, прописываемого в Html теге SPAN, слово AFTER. В результате мы получим такую вот красотищу:

<button><span><span><span>KtoNaNovenkogo.ru</span></span></span></button>

Но встает вопрос, а откуда взять название CSS класса, с помощью которого можно будет отобразить на создаваемой кнопке нужную вам иконку. Сразу оговорюсь, что все полторы тысячи иконок вы не сможете использовать с помощью заранее прописанных автором классов. Автор прописал только базовые иконки и соответствующие им классы.

Все это вы сможете посмотреть, открыв файл sexybuttons.css в редакторе Notepad++. В самом низу этого файла вы увидите группу свойств, описывающих соответствие названия класса и иконки (прописан путь до файла иконки), которая будет выводиться кнопке от SexyButtons при использовании данного класса. Вот начало этой группы свойств:

Добавление на них красивых иконок

Если вы захотите добавить иконку на кнопочку не описанную в этих CSS свойствах, то вам придется добавить к этой группе строку с новым названием нового класса для тега SPAN и Урлом файла нужной иконки, например так:

.sexybutton span.ktonanovenkogo		{ background-image: url(images/icons/silk/application_form_edit.png) !important; }

Теперь можно будет использовать класс KTONANOVENKOGO для добавления красивой иконки:

<button><span><span><span>Кнопочка для сайта с иконкой</span></span></span></button>

Кроме описанного выше способа добавления на создаваемые кнопки иконок, не описанных в файле sexybuttons.css, можно воспользоваться альтернативным способом. В этом случае, вместо третьего SPAN используется Html тег IMG с прописанным Урлом нужной иконки, который добавляется внутри двух SPAN до или после надписи на кнопочке.

Например, красотища, ведущая на предыдущую страницу, можете выглядеть так:

<button><span><span><img src="https://ktonanovenkogo. ru/wp-content/themes/SexyButtons/images/icons/silk/resultset_previous.png" />Back</span></span></button>

Если нужно поместить иконку после надписи, то нужно будет добавить в IMG атрибут и прописать сам IMG после надписи на кнопке:

Как сделать кнопки с разными цветами и размерами шрифтов

По умолчанию имеется возможность создать красоту со шрифтами следующих размеров: нормальный, средний и большой. Для использования среднего и большого размера шрифта вам нужно будет дописать через пробел в коде к CSS классу SEXYBUTTON, соответственно, классы SEXYMEDIUM и SEXYLARGE.

Нормальный шрифт надписи на кнопочке будет выглядеть так:

Добавить кнопку на сайт со средним размером шрифта можно с помощью такого вот кода:

Добавить кнопочку с большим шрифтом можно с помощью такого кода:

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

В конструкторе SexyButtons предусмотрены две дополнительные цветовые схемы кнопок- оранжевая и желтая. Для их применения, точно так же как и при изменении размера шрифта, вам нужно будет дописать через пробел в коде к CSS классу SEXYBUTTON, соответственно, CSS классы SEXYORANGE и SEXYYELLOW. Оранжевая кнопочка будет формировать и выглядеть так:

<a href="#"><span><span>Оранжевый шедевр</span></span></a>

Желтая — так:

<a href="#"><span><span>Желтый шедевр</span></span></a>

Оформление под названием Simple отличается от оформления стандартных кнопок. Для использования Simple достаточно будет дописать через пробел в коде к CSS классу SEXYBUTTON, соответственно, CSS класс sexysimple:

<button>KtoNaNovenkogo.ru</button>

Simple имеет еще восемь возможных цветов (по умолчанию кнопка будет черной). Цвет кнопочки Simple можно задать, дописав через пробел к CSS классам SEXYBUTTON SEXYSIMPLE еще и CSS класс, отвечающий за цвет. Имеется возможность использовать один из этих CSS классов: SEXYBLACK (можно не добавлять, т.к. он идет по умолчанию и без добавления третьего класса), SEXYTEAL, SEXYMAGENTA, SEXYRED, SEXYORANGE, SEXYGREEN, SEXYBLUE, SEXYPURPLE, SEXYYELLOW.

В результате получим, например, такие красивые и разноцветные кнопки на сайте:

Вот такой вот светофор получился. Можно еще изменять размер кнопочек Simple, дописывая по аналогии с цветами следующие классы: SEXYSMALL, SEXYMEDIUM (это размер используется по умолчанию), SEXYLARGE, SEXYXL, SEXYXXL, SEXYXXXL.

В результате получим такие кнопки разного размера:

Замечательный, на мой взгляд, конструктор или же фреймворк.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Дизайн кнопок для веб-сайтов и мобильных приложений

Мы используем файлы cookie, чтобы обеспечить вам максимальное удобство на нашем веб-сайте. Для получения дополнительной информации нажмите здесь. Понятно

Кнопки являются фундаментальным компонентом любого UX-дизайна и поэтому заслуживают надлежащего планирования. Ознакомьтесь с основными правилами идеального дизайна кнопок

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

Создавайте кнопки для веб-приложений и мобильных приложений с помощью Justinmind. Это бесплатно. Неограниченное количество проектов!

Но как сделать так, чтобы дизайн вашей кнопки был максимально удобен в использовании, но при этом вызывал творческое волнение на экранах пользователей? Все дело в том, чтобы помнить о деталях при использовании вашего любимого инструмента прототипирования. Читайте дальше, чтобы узнать, как улучшить дизайн кнопок.

ПС. Если вы хотите прочитать о создании настоящих игр, ознакомьтесь с нашим постом об игровом интерфейсе.

• Основные правила дизайна кнопок
• Дизайн мобильных кнопок в приложениях для Android и iOS
• Тестирование дизайна кнопок
• Наборы пользовательского интерфейса, которые помогут вывести дизайн кнопок на новый уровень

Основные правила дизайна кнопок

Все в жизни имеет несколько основных правил, которые следует учитывать. Дизайн кнопок типичен тем, что он выглядит довольно просто, но включает в себя множество, казалось бы, незначительных факторов, которые дизайнер должен учитывать. Вот несколько рекомендаций, которым вы должны следовать в своем следующем UX-дизайне.

1. Сделайте его интерактивным

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

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

Итак, попробуйте использовать формы и стили кнопок, с которыми мы все знакомы. Это включает в себя квадратные кнопки, закругленные квадраты или другие формы кнопок, которые люди могут найти в других распространенных интерфейсах. Мы понимаем, что каждый дизайнер хочет быть оригинальным в своей работе, но бесполезно создавать что-то действительно уникальное, если люди не могут это использовать.

Мы рекомендуем закругленные квадраты с тенями. Нам нравится добавлять тени к кнопкам, потому что это добавляет ощущение глубины, которое показывает пользователю, что кнопку можно щелкнуть. Вы также можете добавить микровзаимодействие, чтобы при наведении курсора на кнопку происходила какая-то реакция. Это может быть небольшое изменение цвета или небольшое движение вверх — важно, чтобы пользователь знал, что на этот элемент можно нажать.

Откройте заново классический шаблон пользовательского интерфейса, который часто недооценивают: список интерфейсов.

2. Упростите поиск и прогнозирование

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

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

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

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

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

У вас должен быть согласованный дизайн кнопок, который просвечивает на каждом экране вашего веб-сайта, независимо от того, к какой функции они относятся. Как только у вас появится стиль, который вы сможете воспроизвести во всех своих кнопках, установите стандартное место для кнопок на вашем веб-сайте. Следуйте логике и обычным ожиданиям пользователей — например, столкнувшись с кнопками «предыдущий» или «следующий», большинство пользователей ожидает, что «предыдущий» будет слева, а «следующий» — справа.

Эта дополнительная четкость особенно важна при работе с большими объемами данных, например при разработке форм или разработке информационных панелей.

3. Расскажите пользователям, что делает каждая кнопка. Не заставляйте их гадать.

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

Текст, который находится внутри вашей кнопки, не должен ограничиваться «ОК» и «Отмена». На самом деле, ваше удобство использования улучшится, если отложить в сторону эти общие термины и сосредоточиться на действии, которое выполняет каждая кнопка. Наличие кнопок с надписью «Удалить навсегда» или «Отменить бронирование» может гарантировать, что ваши пользователи поймут каждую кнопку, и даже улучшит удобство использования, уменьшив вероятность ошибок пользователей.

Еще один полезный совет по дизайну кнопок — запретить всплывающие окна, в которых есть только классические кнопки «Продолжить» или «Отмена». Вместо этого попробуйте создать поля, содержащие хотя бы одну строку текста, объясняющую, какое действие предпринимается и что оно означает для пользователя.

Хотите изучить другие классические компоненты дизайна пользовательского интерфейса? Ознакомьтесь с этим руководством по раскрывающимся пользовательским интерфейсам.

4. Размер имеет значение: есть кнопки, на которые люди могут на самом деле нажимать

Дизайн кнопок также означает принятие решения о том, насколько большой должна быть каждая кнопка. Это кажется мелочью, хотя на самом деле это совсем не поверхностно.

Размер кнопки особенно важен для мобильного дизайна. Слишком большая кнопка приведет к визуальному перегружению экрана, а слишком маленькая кнопка не может быть нажата обычным пальцем. Лаборатория Touch Lab Массачусетского технологического института еще в 2003 году опубликовала исследование, которое показало, что большинство кончиков пальцев имеют ширину 8-10 мм.

Очевидный вывод заключается в том, что вы не хотите, чтобы кнопка была меньше 10 мм, если только вы не готовы рисковать удобством использования вашего дизайна из-за того, что у пользователей очень маленькие пальцы. Стремитесь установить визуальную иерархию. в вашем дизайне кнопки. Это означает, что самые важные функции, основное преобразование любого экрана, должны быть самой большой кнопкой в ​​поле зрения. Это также применимо, когда у вас есть две противоположные кнопки — сделайте так, чтобы кнопка положительного результата казалась более важной, сделав ее немного больше, чем отрицательная.

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

5. Не иметь кнопки для всего

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

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

Дизайн кнопок — это не только то, как кнопки выглядят или что они делают, но и то, как вы представляете их пользователю. Будьте логичны и не торопите людей — создавайте пути, по которым людям будет легко следовать, устанавливая каркас дорог, которые ведут ко всем ключевым точкам вашего продукта.

6. Всегда предоставляйте обратную связь или рискуйте гневом пользователя

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

Ваш продукт должен всегда своевременно информировать пользователей о том, что команда зарегистрирована. Пусть пройдет слишком много времени, прежде чем сигнал будет передан пользователю, и пользователь может даже не понять, с чем связан этот сигнал. Хороший способ убедиться, что при переводе ничего не потеряно, — определить состояния кнопок в дизайне кнопок.

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

Кстати говоря, микровзаимодействия также являются отличным способом сообщить пользователю о состоянии системы, как мы рассмотрели в предыдущем сообщении в блоге. С помощью интеллектуального микровзаимодействия вы можете сгладить общение между пользователем и программным обеспечением — тот факт, что вы можете получить массу удовольствия от разработки этих крошечных взаимодействий, — это просто бонус.

Создавайте кнопки для веб-приложений и мобильных приложений с помощью Justinmind. Это бесплатно. Неограниченное количество проектов!

Дизайн мобильных кнопок в приложениях для Android и iOS

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

Так как же нам разработать кнопки мобильного пользовательского интерфейса, которыми пользователи не смогут насытиться? Ознакомьтесь с нашими семью советами по созданию потрясающих кнопок, которые реагируют на взаимодействие с пользователем и обеспечивают полезную и действенную обратную связь. Не забудьте держать под рукой свой любимый инструмент для создания прототипов приложений!

1. Придерживайтесь основных принципов дизайна пользовательского интерфейса

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

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

Когда «касание» является основным методом ввода для вашего мобильного приложения, принципы Android Material Design рекомендуют, чтобы сенсорные объекты имели размер не менее 48 x 48 dp с расстоянием между ними не менее 8 dp (или более). Это необходимо для обеспечения сбалансированной плотности информации и удобства использования.

Форма зависит от того, для чего вы разрабатываете дизайн. Например, в дизайне пользовательского интерфейса Android плоские и приподнятые кнопки материала должны иметь высоту 36 dp, минимальную ширину 88 dp и угловой радиус 2 dp (плоский)/высоту по умолчанию 2 dp (приподнятый).

Отступы

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

2. Используйте цвет, чтобы сделать дизайн кнопок пользовательского интерфейса действенным

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

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

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

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

iOS имеет светлые и темные цветовые схемы, используя контраст и полупрозрачность, чтобы элементы интерфейса не становились подавляющими или не впечатляющими.

3. Помогите пользователям расставить приоритеты задач, устранив помехи на экране

Когда речь идет о приоритетных задачах, вы должны устранить любые помехи, которые замедляют прогресс пользователя, чтобы они могли выполнить задачу. Сочетая цвет и контраст с умным наслоением, рельефом и тонкими тенями, вы можете создать иллюзию 3D на плоском экране. Это привлекает внимание к продвигаемым или основным действиям и отличает их от окружающих элементов пользовательского интерфейса. Точно так же тени и блики помогают пользователям интерпретировать визуальную иерархию и понимать, какие компоненты являются интерактивными.

«Тени — бесценные подсказки, сообщающие человеческому мозгу, на какие элементы пользовательского интерфейса мы смотрим».

 Эрик Д. Кеннеди  — UX-дизайнер 

Рассмотрите возможность добавления выделения между наиболее важными кнопками, чтобы различать основные и второстепенные кнопки. Правильное использование слоев и теней вместе с правильным расположением элементов поможет вам достичь более высокой конверсии целевой страницы, потому что пользователи, скорее всего, заметят кнопку призыва к действию (CTA) и вовлекаются.

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

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

4. Поощряйте пользователей визуальной обратной связью в дизайне кнопки пользовательского интерфейса

Обратная связь должна учитываться на каждом этапе пути пользователя. Будучи порождением привычки, он побуждает пользователей знать, что они делают что-то правильно или что система признала их действия. Дизайнеры могут формировать это взаимодействие с помощью полезной обратной связи.

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

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

Создавайте кнопки для веб-приложений и мобильных приложений с помощью Justinmind.

Тестирование дизайна кнопки

Пользовательское тестирование любого дизайна — это тема, которая заслуживает отдельного руководства, поэтому мы создали его для вас! Если вы хотите более подробно ознакомиться с теорией и практикой тестирования, ознакомьтесь с нашим руководством по пользовательскому тестированию. Для более обобщенного чата давайте рассмотрим несколько отличных способов проверить, как пользователи взаимодействуют и реагируют на ваши кнопки.

Навигационный тест

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

Мы всегда выступаем за создание быстрых макетов скелета вашего продукта и начинаем тестировать навигацию и информационную архитектуру. Вооружившись каркасом, вы можете приступить к пользовательскому тестированию, чтобы ответить на такие основные вопросы, как: 9.0003

• Могут ли пользователи найти все основные функции?
• Сколько времени им требуется в среднем на каждую функцию?
• Понимают ли пользователи, как каждая функция связана с другими в важных вопросах?
• Логична ли навигация для пользователей?

A/B-тестирование

Когда дело доходит до тонкой настройки дизайна кнопок, возможно, немногие методы являются столь же информативными, как A/B-тестирование. Особый фаворит среди маркетологов для кнопок CTA, этот вид тестирования заключается в тестировании двух разных версий одной и той же кнопки и сравнении их производительности. Если ваша команда хочет протестировать множество разных дизайнов кнопок одновременно, многовариантное тестирование может оказаться более быстрым и практичным вариантом.

Тепловые карты

Хотя тепловые карты могут не дать нам столь же прямых ответов по сравнению с A/B-тестами, этот метод пользовательского тестирования все же может оказать огромное влияние на ваш продукт. У него очень наглядный способ сообщить нам, на чем больше всего сосредоточено внимание пользователей, что может очень пригодиться, когда дело доходит до тестирования дизайна вашей кнопки.

Наборы пользовательского интерфейса, которые поднимут дизайн кнопок на новый уровень

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

Material Design

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

Как и другие наборы пользовательского интерфейса в Justinmind, набор пользовательского интерфейса для iOS состоит из сотен современных компонентов, готовых для вашего следующего проекта. Наслаждайтесь всеми кнопками, которые вы могли бы захотеть, и все они полностью масштабируемые и настраиваемые. Компоненты также поставляются с базовыми, но классическими взаимодействиями, которые отражают ощущение и внешний вид iOS.

Создавайте кнопки для веб-приложений и мобильных приложений с помощью Justinmind. Это бесплатно. Неограниченное количество проектов!

Библиотека веб-каркасов

Благодаря простым кнопкам сплошной формы с острыми краями этот набор пользовательского интерфейса является идеальной отправной точкой для большинства проектов каркасов. Возьмите простой и классический дизайн кнопки и поверните его, чтобы он соответствовал вашему стилю и стилю вашего проекта. Помимо кнопок, вы найдете все основные строительные блоки, которые нужны UX-дизайнерам, чтобы сдвинуть с мертвой точки идею. Все это в одном наборе пользовательского интерфейса!

Этот комплект пользовательского интерфейса уже предустановлен в Justinmind, но, если хотите, загляните в компоненты библиотеки Web Wireframing.

Bootstrap

Более разнообразный и увлекательный набор пользовательского интерфейса, Bootstrap поставляется с кнопками разных цветов с закругленными краями. Дизайн кнопки более молодой и предлагает больше возможностей для тех, кто ищет немного ярких цветов для своего дизайна. Кнопки включают в себя всю классику и несколько выпадающих альтернатив.

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

Kendo UI kit — это забавный инструмент, которым можно пользоваться. Он поставляется с кнопками для всех размеров, как основных, так и дополнительных. Благодаря нескольким вариантам размера создание вашего следующего UX-дизайна с Kendo будет намного проще и быстрее. Не говоря уже о том, что нам просто нравится дизайн кнопок в группе кнопок!

Завершение

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

Создавайте кнопки для веб-приложений и мобильных приложений с помощью Justinmind. Это бесплатно. Неограниченное количество проектов!

Ребека Коста

Штатный SEO-менеджер, энтузиаст юзабилити и покровитель всех недосыпающих дизайнеров

Сделать пуговицы | Пин-кнопки | Пользовательские кнопки | Булавки для бейджей

ЛЕГКО СОЗДАВАЙТЕ СВОИ СОБСТВЕННЫЕ КНОПКИ ОНЛАЙН

Проявите творческий подход с помощью нашего простого в использовании интерактивного конструктора кнопок

Бесплатный графический дизайн

Нет минимальной суммы заказа

Доступна ночная доставка

Кнопки для заказа никогда не были более захватывающими!

От вечеринок и сборов средств до корпоративных мероприятий и семейных пикников, Wacky Buttons — это место для покупок кнопки онлайн. Наш инвентарь содержит тысячи забавных дизайнов из самых разных категорий или Создавайте полностью настраиваемые кнопки за считанные минуты с помощью нашего интерактивного инструмента дизайна.

• Возможна доставка в ночное время и в тот же день
• Небольшие заказы отправляются на следующий день
• Ничего не платите, пока не одобрите дизайн
• Мы отправляем локально, по стране и по всему миру

• Все кнопки напечатаны в США
• Реселлеры и дропшипперы Добро пожаловать!
• Размеры кнопок варьируются от 1 до 3 дюймов.
• Заказать онлайн или по телефону

СТАНДАРТНЫЕ КНОПКИ

СТАНДАРТНЫЕ КНОПКИ

Мы предлагаем один из самых больших вариантов пинбэк-кнопок различных форм и размеров.

Исследовать

КНОПКИ С ПОДСВЕТКОЙ

КНОПКИ С ПОДСВЕТКОЙ

Наши мигающие и подсвеченные кнопки идеально подходят для вечеринок, мероприятий в помещении и в ночное время.

Исследовать

МАГНИТЫ НА ХОЛОДИЛЬНИК

МАГНИТЫ НА ХОЛОДИЛЬНИК

Придайте вашему холодильнику индивидуальность с нашим огромным выбором магнитов на холодильник.

Исследовать

МАГНИТЫ ДЛЯ ОДЕЖДЫ

МАГНИТЫ ДЛЯ ОДЕЖДЫ

Украсьте свой гардероб или корпоративную одежду магнитами для одежды на любой случай.

Исследовать

ОТКРЫВАЮЩИЕ БУТЫЛКИ

ОТКРЫВАЮЩИЕ БУТЫЛКИ

Наши открывалки для бутылок станут отличным подарком и идеально подойдут для любого бара, кухни или патио.

Исследовать

КНОПКИ ЗЕРКАЛА

КНОПКИ ЗЕРКАЛА

Зеркальные задние панели и дизайн передней панели на ваш выбор — зеркальные пуговицы всегда будут хитом!

Исследовать

НИЧЕГО НА СПИНЕ

НИЧЕГО НА СПИНЕ

Хотите, чтобы все было несложно? Все наши пуговицы доступны с обратной стороной без штифтов.

Исследовать

ЗАЖИМНЫЕ КНОПКИ

ЗАЖИМНЫЕ КНОПКИ

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

Исследовать

Купите тысячи потрясающих дизайнов кнопок или создавайте собственные кнопки онлайн!

Wacky Buttons Интерактивный онлайн-конструктор кнопок позволяет легко создавать полностью настраиваемые кнопки. кнопки и рекламные продукты идеально подходят для любой группы, бизнеса, благотворительности или специального мероприятия. Выбрать идеальный размер, форма, цвет и стиль, чтобы придать вашим кнопкам единственный в своем роде вид, сохраните несколько дизайнов для позже или получите бесплатную экспертную помощь от нашей команды талантливых художников-графиков!

Заказ собственного производителя пуговиц

Ищете простой способ сделать пуговицы своими руками дома или в офисе? Все, что вам нужно, это бумаги и немного вдохновения! Узнайте, как создавать собственные кнопки, и просмотрите лучший выбор в отрасли. машин, расходных материалов и деталей кнопок.

Другие забавные товары от Wacky Распечатать!

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

Познакомьтесь с

За последние 20 лет компания Wacky Buttons усердно работала над тем, чтобы стать самой проверенные создатели качественных кнопок и промо-продукции. Посмотрите это видео, чтобы узнать больше о кто мы, что делает нас уникальными и почему клиенты во всем мире любят нашу продукцию и страсть.

Получить предложения! Подпишитесь на нашу рассылку.

Вопросы? Получить помощь здесь!

Читать дурацкие обзоры

Новости и оповещения

• 24 августа 2022 г. — 1,5-дюймовые круглые магнитные пуговицы для одежды снова в наличии!
• 11 августа 2022 г. — Мы запустили новый продукт! — 2-дюймовые квадратные магнитные кнопки на спине для одежды
• 8 августа 2022 г. — Магнитные кнопки для открывания бутылок снова в наличии!
• 1 января 2022 г. — Это новый год, и поэтому у нас новый вид! Мы все та же замечательная компания, на которую многие полагаются каждый день, чтобы заказать пуговицы. Мы просто делаем кнопки в течение долгого времени, почти 20 лет, поэтому мы должны идти в ногу со временем. Прошло 5 лет с момента нашего последнего обновления веб-сайта, поэтому мы подумали, что пришло время сделать еще один.
• 28 декабря 2021 г. — Мы перешли на использование более качественных чернил для печати кнопок. Это изменение улучшило качество большинства продаваемых нами пуговиц. Для любых продуктов с пуговицами, которые мы печатаем на бумаге, покрытой пластиковым майларом, новые чернила, которые мы используем, более устойчивы к выцветанию в ультрафиолетовом свете. Таким образом, срок годности этих продуктов теперь более продолжительный.

дизайнов веб-кнопок, тем, шаблонов и загружаемых графических элементов на Dribbble

1. Посмотреть 🌟 Элементы пользовательского интерфейса банка

   🌟 Элементы банковского интерфейса

2. View Nexudus — Система дизайна

   Nexudus — система проектирования

3. Просмотр компонентов пользовательского интерфейса UserWise

   Компоненты пользовательского интерфейса UserWise

4. Просмотр изучения элементов пользовательского интерфейса

   Исследование элементов пользовательского интерфейса

5. Просмотр компонента календаря пользовательского интерфейса

   Компонент календаря пользовательского интерфейса

6. Просмотр компонентов пользовательского интерфейса SafePal

   Компоненты пользовательского интерфейса SafePal

7. Просмотр Justuno — система веб-дизайна

   Justuno — Система веб-дизайна

8. Просмотр Nexudus — Система интервалов

   Nexudus — система распорки

9. Просмотр элементов пользовательского интерфейса CSS

   Элементы пользовательского интерфейса CSS

10. View Connect & Play — набор иллюстраций

    Connect & Play — набор иллюстраций

11. Просмотр токенов дизайна — Lytho

    Жетоны дизайна — Lytho

12. Просмотр компонентов пользовательского интерфейса LMS | Тематическое исследование

    Компоненты пользовательского интерфейса LMS | Практический пример

13. Посмотреть дизайн-систему

    Дизайн-система

14. View Figma Material Design UI kit — Freebie — Библиотека шаблонов приложений

    Figma Material Design UI kit — Freebie — Библиотека шаблонов приложений

15. View Multiply — руководство по стилю

    Multiply — Руководство по стилю

16. Редизайн View Listables — руководство по стилю

    Редизайн списков — Руководство по стилю

17. Просмотр переключателей

    Радиокнопки

18. Посмотреть 🐣 целевую страницу с креативным контентом 🐣

    🐣 целевая страница с креативным контентом 🐣

19. Посмотреть обновленную боковую панель GiveForms

    Обновленная боковая панель GiveForms

20. Посмотреть панель мониторинга следующего поколения

    Приборная панель нового поколения

21. Просмотр Настройка, перетаскивание, сохранение

    Настройка, перетаскивание, сохранение

22. Просмотр компонентов видеоредактора

    Компоненты видеоредактора

23. Посмотреть 3D-меню

    3D-меню

24. Посмотреть комплект пользовательского интерфейса для дизайн-системы

    Комплект пользовательского интерфейса для системы проектирования

Зарегистрируйтесь, чтобы продолжить или войдите в

Загрузка больше…

генератор кнопок

Основы

Название кнопки

Открыть в новом окне

Использовать Rel = «nofollow»

URL — загрузите URL-адрес

Текст

Атрибут короткого кода: текст

Шрифт

[Сайт по умолчанию] ArialCourier NewGeorgiaTahomaTimes New RomanTrebuchet MSVerdana

px

Отступы

Цвет текста

Цвет текста Hover

Ширина кнопки

px

Высота кнопки

px

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

Description

Border

Radius

Top Left

Top Right

Style

dasheddotteddoublegrooveinsetoutsetridgesolid

Default:

Width

px

Border Color

Hover

Shadow Offset Left

Shadow Offset Top

Shadow Blur

Shadow Spread

Border Shadow Color

Hover

Background

Используйте градиенты

Start

END

ЦВЕТА ФОНА

ФОНАРИЧЕСКИЙ ПРОТИВ

Нормальная непрозрачность

По умолчанию:

Hover непрозрачность

По умолчанию:

Gradient Stop

Default

Shadow Offset Top

Shadow Blur

Shadow Color

Hover

Container

Use Container

Создает контейнер вокруг кнопки, которая перемещает другой контент

Центр Центра Контейнер

Ширина

PX

Блок ширины

PX

%

Маржина в той же строке

Внешний CSS

Если для этой кнопки включена опция «Использовать внешний CSS», скопируйте и вставьте приведенный ниже код CSS в таблицу стилей вашей темы.

Пожалуйста, сохраните кнопку сначала

Дополнительно

Добавление !important к стилям кнопок может помочь избежать потенциальных конфликтов со стилями вашей темы.

Используйте !Important

Полезно, когда кнопка нацелена на лайтбокс и/или плагины всплывающих окон, которые используют этот метод

Пользовательский тег Rel

Включение «Использовать внешний CSS» остановит загрузку любого стиля кнопки. Вам нужно будет установить стиль кнопки вручную

Использовать внешний CSS

Предупреждение: Это удалит все стили кнопок!

{«text_color»:{«css»:»color»,»csspart»:»mb-text»},»text_shadow_color»:{«css»:»textShadowColor»,»csspart»:»mb-text»} ,»gradient_start_color»:{«css»:»gradientStartColor»},»gradient_end_color»:{«css»:»gradientEndColor»},»border_color»:{«css»:»borderColor»},»box_shadow_color»:{«css «:»boxShadowColor»},»text_color_hover»:{«css»:»color»,»csspart»:»mb-text»,»pseudo»:»hover»},»text_shadow_color_hover»:{«css»:»textShadowColor «,»csspart»:»mb-text»,»псевдо»:»hover»},»gradient_start_color_hover»:{«css»:»gradientStartColor»,»pseudo»:»hover»},»gradient_end_color_hover»:{«css «:»gradientEndColor»,»pseudo»:»hover»},»border_color_hover»:{«css»:»borderColor»,»pseudo»:»hover»},»box_shadow_color_hover»:{«css»:»boxShadowColor», «pseudo»:»hover»},»url»:{«attr»:»href»},»link_title»:{«attr»:»title»},»button_width»:{«css»:»ширина», «unitfield»:»button_size_unit_width»,»func»:»updateDimension»},»button_height»:{«css»:»height»,»unitfield»:»button_size_unit_height»,»func»:»updateDimension»},»wbutton_size_u nit_px»:{«func»:»updateDimension»},»wbutton_size_unit_perc»:{«func»:»updateDimension»},»button_size_unit_width»:{«func»:»updateDimension»},»hbutton_size_unit_px»:{«func»: «updateDimension»},»hbutton_size_unit_perc»:{«func»:»updateDimension»},»button_size_unit_height»:{«func»:»updateDimension»},»radius_top_left»:{«css»:»borderTopLeftRadius»,»css_unit»: «px»,»func»:»updateRadius»},»radius_top_right»:{«css»:»borderTopRightRadius»,»css_unit»:»px»,»func»:»updateRadius»},»radius_bottom_left»:{«css «:»borderBottomLeftRadius»,»css_unit»:»px»,»func»:»updateRadius»},»radius_bottom_right»:{«css»:»borderBottomRightRadius»,»css_unit»:»px»,»func»:»updateRadius «},»border_style»:{«css»:»borderStyle»},»border_width»:{«css»:»borderWidth»,»css_unit»:»px»},»box_shadow_offset_left»:{«css»:»boxShadowOffsetLeft «,»css_unit»:»px»,»псевдо»:»нормальный,наведение»,»func»:»updateBoxShadow»},»box_shadow_offset_top»:{«css»:»boxShadowOffsetTop»,»css_unit»:»px», «псевдо»: «нормальный, наведение», «func»: «updateBoxShadow»}, «box_shadow_width» :{«css»:»boxShadowWidth»,»css_unit»:»px»,»pseudo»:»normal,hover»,»func»:»updateBoxShadow»},»box_shadow_spread»:{«css»:»boxShadowSpread», «css_unit»:»px»,»псевдо»:»нормальный,наведение»,»func»:»updateBoxShadow»},»gradient_stop»:{«css»:»gradientStop»,»псевдо»:»нормальный,наведение», «func»:»updateGradientOpacity»},»gradient_start_opacity»:{«css»:»gradientStartOpacity»,»func»:»updateGradientOpacity»},»gradient_end_opacity»:{«css»:»gradientEndOpacity»,»func»:»updateGradientOpacity «},»gradient_start_opacity_hover»:{«css»:»gradientStartOpacity»,»pseudo»:»hover»,»func»:»updateGradientOpacity»},»gradient_end_opacity_hover»:{«css»:»gradientEndOpacity»,»pseudo»: «hover», «func»: «updateGradientOpacity»}, «use_gradient»: {«css»: «gradientUseGradient», «псевдо»: «нормальный, hover»}, «font»: {«css»: «fontFamily», «csspart»:»mb-text»},»font_size»:{«css»:»fontSize»,»css_unit»:»px»,»csspart»:»mb-text»},»radio_talign_left»:{«css «:»textAlign»,»csspart»:»mb-text»},»radio_talign_center»:{«css»:»textAlign»,»csspart»:»mb-text»},»radio_talig n_right»:{«css»:»textAlign»,»csspart»:»mb-text»},»text_align»:{«css»:»textAlign»,»csspart»:»mb-text»},»check_fstyle» :{«css»:»fontStyle»,»csspart»:»mb-text»},»font_style»:{«css»:»fontStyle»,»csspart»:»mb-text»},»check_fweight»:{ «css»: «fontWeight», «csspart»: «mb-text»}, «font_weight»: {«css»: «fontWeight», «csspart»: «mb-text»}, «text_shadow_offset_left»: {«css «:»textShadowLeft»,»css_unit»:»px»,»csspart»:»mb-текст»,»псевдо»:»нормальный,наведение»,»func»:»updateTextShadow»},»text_shadow_offset_top»:{«css «:»textShadowTop»,»css_unit»:»px»,»csspart»:»mb-text»,»псевдо»:»нормальный,наведение»,»func»:»updateTextShadow»},»text_shadow_width»:{«css «:»textShadowWidth»,»css_unit»:»px»,»csspart»:»mb-текст»,»псевдо»:»нормальный,наведение»,»func»:»updateTextShadow»},»padding_top»:{«css «:»paddingTop»,»css_unit»:»px»,»csspart»:»mb-text»},»padding_right»:{«css»:»paddingRight»,»css_unit»:»px»,»csspart»: «mb-текст»},»padding_bottom»:{«css»:»paddingBottom»,»css_unit»:»px»,»csspart»:»mb-text»},»padding_left»:{«css»:»paddingLeft «,»css_unit»:»px» ,»csspart»:»mb-text»},»text»:{«func»:»updateAnchorText»},»cwidth_unit_px»:{«func»:»updateContainerUnit»},»cwidth_unit_perc»:{«func»:» updateContainerUnit»},»container_width_unit»:{«func»:»updateContainerUnit»}}

10 бесплатных онлайн-сайтов по производству кнопок

Рейтинги редакторов:

Рейтинги пользователей:

[Всего: 3 Среднее: 2,7]

Вот 10 бесплатных онлайн-сайтов по производству кнопок . Независимо от того, являетесь ли вы дизайнером или владельцем веб-сайта и хотите создать профессионально выглядящую кнопку для вставки на свой веб-сайт или использования в другом месте, эти онлайн-производители кнопок будут очень полезны. Используя эти веб-сайты, вы можете добавить собственный текст, установить размер текста для кнопки, выбрать любой из ваших любимых цветов для фона и текста, шрифт и т. д., а затем получить кнопку выхода. В зависимости от веб-сайта вы сможете получить HTML, код CSS кнопки , а также сохранить кнопку как изображение PNG .

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

Итак, давайте начнем с первого бесплатного онлайн-производителя кнопок, представленного в этом списке.

Buttonoptimizer.com

Buttonoptimizer.com — один из лучших бесплатных онлайн-производителей кнопок в этом списке. Здесь присутствуют все функции, необходимые для создания профессионально выглядящей кнопки. Вы можете выбрать основной цвет кнопки, пользовательский текст для кнопки, выбрать из 9разные шрифты и установите цвет шрифта .

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

Самое приятное то, что вы сможете предварительно просмотреть результат, чтобы получить лучшее представление. Как только ваша кнопка будет готова, вы можете получить ее коды HTML и CSS или сохранить кнопку как изображение PNG . Все эти замечательные функции делают его намного лучшим производителем онлайн-кнопок.

Фабрика пуговиц Da

Фабрика пуговиц Da — еще один фантастический онлайн-производитель пуговиц. Он имеет все необходимые функции для создания красивой и профессиональной кнопки. Вы можете добавить пользовательский текст, выбрать из более 15 шрифтов для этого текста, сделать его полужирным, курсивом и установить размер и цвет шрифта. Вы также можете включить тень текста , а затем установить ее расстояние от текста и выбрать любой из ваших любимых цветов для шрифта.

Он также поставляется с функцией до установить горизонтальное и вертикальное отступы для кнопки . Это помогает правильно настроить кнопку для добавленного текста. Есть еще одна очень полезная функция. Вы можете установить кнопку с закругленными углами или полностью изогнутыми сторонами .

В дополнение ко всем этим функциям, он позволяет вам установить цвет фона как одноцветный, двухцветный, пирамидальный градиент и простой градиент . Цвета фона сверху и снизу также могут быть легко установлены вами. Более того, вы можете показать/скрыть границу для вашей кнопки, а также установите цвет и ширину границы (если включено). Если вы включили границу, вы также можете показать тень для границы , установить цвет, размер и ориентацию (север, юг, северо-восток, юго-запад и т. д.). Используя все эти функции, вы можете создать намного лучшую кнопку. Всякий раз, когда вы вносите какие-либо изменения, вы можете просмотреть эти изменения в предварительном просмотре вывода. Это поможет вам проверить, движетесь ли вы в правильном направлении.

Наконец, вы можете сохранить кнопку в формате JPG, PNG, ICO или GIF , а также получить код CSS , чтобы использовать его где угодно. Это определенно хороший онлайн-производитель кнопок, который вы можете попробовать.

ImageFu.com Button Generator

ImageFu.com — очень хороший конкурент остальным веб-сайтам производителей кнопок, описанным в этом списке. Как и многие другие онлайн-производители кнопок, он также позволяет добавлять собственный текст, выделять его полужирным шрифтом, курсивом, подчеркиванием, устанавливать размер шрифта, шрифт и выравнивание (слева, по центру и справа) для текста кнопки.

Он имеет 3 разных раздела, которые охватывают все его параметры. Существует раздел « Граница и Угловой радиус », который помогает установить ширину и цвет границы кнопки, установить верхний левый, верхний правый, нижний левый и нижний правый углы кнопки, чтобы сделать ее закругленной или плоской. Рядом с ним находится раздел «Фон и Размер ». Очень полезно установить начальный и конечный цвета кнопки, включить эффект волны , установить ориентацию этих цветов и отрегулировать высоту и ширину (горизонтальное и вертикальное отступы) кнопки. С правой стороны у вас есть « Тень » раздел. Используйте его, чтобы включить тень для кнопки, создайте размытие тени , установите ее цвет и отрегулируйте ее горизонтальное и вертикальное смещение. Самое приятное то, что вы можете добавить несколько теней с различными параметрами , что является его преимуществом перед другими онлайн-генераторами кнопок.

Когда кнопка будет готова, вы можете сохранить ее как PNG-изображение . В нем нет возможности получить код CSS или HTML кнопки. Тем не менее, сайт довольно полезный.

CSS Button Creator

CSS Button Creator (домашняя страница) — очень хороший веб-сайт для создания кнопок и хороший конкурент остальным веб-сайтам, представленным в этом списке. У него красивый интерфейс, в котором очень интересно создать кнопку по вашему выбору. В левой верхней части показан предварительный просмотр кнопки вывода, в левой нижней части показан выходной код CSS, а в правой части представлены все параметры, достаточные для создания профессиональной кнопки.

Вы можете добавить собственный текст для кнопки, использовать любой из 3 доступных шрифтов, задать имя класса CSS , установить размер шрифта, толщину шрифта и отступы для кнопки.

Одной из его лучших функций является то, что вы можете включить эффект наведения для кнопки и установить начальный и конечный цвета градиента для эффекта наведения. Кроме того, он поставляется с функциями , позволяющими включить тени текста и блоков для кнопок, установить их цвета, настроить горизонтальное и вертикальное положение и установить уровень размытия для теней . Вы также можете включить границу, чтобы улучшить кнопку вывода. После того, как вы включили границу кнопки, вы можете установить ее ширину, цвет, радиус и цвет границы. Вы также можете установить тип границы как пунктирную, сплошную, двойную, пунктирную, вставку, начало, ребро или канавку . Как видите, вы получаете так много вариантов для типа границы, которых нет на других веб-сайтах производителей кнопок.

Используйте параметры и предварительно просмотрите кнопку вывода. Когда кнопка сгенерируется в соответствии с вашими ожиданиями, просто скопируйте код CSS кнопки вывода и сохраните его.

Генератор кнопок CSS

Генератор кнопок CSS (домашняя страница) имеет удобный интерфейс, и создание собственной кнопки очень интересно. Он имеет 3 раздела для создания кнопки онлайн. Левая секция помогает выбрать цвет и стиль кнопки . Существует 40 различных стилей кнопок и цветов , доступных для использования. Средняя часть помогает предварительно просмотреть кнопку выхода, включить прозрачность , включить/отключить градиент для текста и получить выходной код.

Правильный раздел очень важен, так как здесь вы увидите все параметры текста кнопки, рамки, тени и т. д. Большинство параметров можно установить с помощью ползунков. Вы можете добавить собственный текст для кнопки, установить размер шрифта, использовать любой из 7 различных шрифтов, выделить текст жирным шрифтом и курсивом, установить размер и радиус границы, а также настроить размер кнопки (отступы по горизонтали и вертикали). Также можно включить тень блока и тень текста . Для каждого параметра тени вы можете установить положение по вертикали, положение по горизонтали и радиус размытия с помощью ползунков. Итак, есть довольно неплохие варианты, чтобы сделать очень хорошую кнопку онлайн.

HTML5 Button Maker

HTML5 Button Maker (домашняя страница) имеет так много функций, и именно поэтому он находится в верхней части некоторых других онлайн-производителей кнопок, добавленных в этот список. Он позволяет вам выбрать шаблон кнопки с галочкой (или значком). Цвет значка, ширина, высота и положение (сверху, справа, внизу или вверху) также могут быть легко установлены вами. Каждый шаблон кнопки имеет свой цвет. После выбора шаблона кнопки вы можете добавить собственный текст, установить цвет фона, градиент фона и ориентацию градиента фона. Кроме того, вы также можете выбрать семейство шрифтов (доступно более 10 семейств шрифтов), размер шрифта, цвет, тень текста, цвет тени и направление тени.

Чтобы сделать вашу кнопку более красивой, вы можете добавить границу, положение границы, цвет, тень блока и цвет тени . Все эти функции помогут вам создать очень хорошую кнопку. Какие бы изменения вы ни добавляли, все эти изменения отражаются в предварительном просмотре вывода, чтобы увидеть, как выглядит ваша кнопка. Наконец, вы можете загрузить исходный код кнопки на свой компьютер. Он скачивается в zip-архиве. Извлечение этого архива предоставит кнопку CSS, файл HTML, значок, доступный на кнопке, и файл JavaScript 9.0167 . Если вам нужны все эти функции в онлайн-производителе кнопок, то этот веб-сайт, безусловно, является хорошим выбором.

Android Button Maker

Android Button Maker (домашняя страница) — еще один хороший выбор для создания кнопок онлайн. Одной из его лучших функций является то, что вы можете добавить тень к тексту, а также к окну кнопки . В то время как многие другие производители кнопок имеют функцию добавления тени только к окну, этот веб-сайт является хорошим вариантом, если вы хотите также добавить тень к тексту кнопки. Еще одна хорошая вещь — все его параметры для создания кнопки присутствуют на правой стороне. Таким образом, вам не нужно искать варианты на всей странице.

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

Когда кнопка будет готова, вы можете скопировать ее код в буфер обмена. В нем нет функции сохранения кнопки в виде изображения PNG или JPG, что может вам не понравиться. Но остальные функции делают его удобным онлайн-производителем кнопок.

Бесплатный конструктор веб-кнопок

Бесплатный конструктор веб-кнопок (домашняя страница) поставляется с двумя различными вариантами кнопок. Он позволяет вам создать изображение кнопки и создать кнопку CSS . Для изображения кнопки вы можете добавить пользовательский текст, использовать более 10 стилей шрифта , установить размер шрифта, высоту и ширину, положение текста (вверх, вниз, влево и вправо), добавить тень текста, сделать текст полужирным, курсивом , установите цвет текста и фона и сделайте фон прозрачным. Вы не можете установить ширину границы или сделать углы кнопок закругленными, но есть всего 30 стилей кнопок на выбор. Когда кнопка будет готова, вы можете сохранить ее как изображение PNG на свой компьютер.

Чтобы сгенерировать кнопку CSS, вы можете добавить основной текст, необязательный текст, размер шрифта, цвет, выбрать цвет фона по вашему выбору, настроить радиус границы (чтобы углы были закруглены) и установить отступ кнопки. Когда вывод готов, вы можете получить код CSS вашей кнопки, а затем встроить его куда угодно. Для обоих вариантов кнопки он позволяет предварительно просмотреть вывод, который поможет вам легко создать кнопку. Благодаря этим функциям этот онлайн-производитель кнопок легко занял свое место в этом списке.

Webestools.com Button Maker

Webstools.com предоставляет очень простой онлайн-инструмент для создания кнопок. В нем нет расширенных параметров (например, установка цвета фона и текста, размера, тени и т. д.), но он удобен для быстрого создания красивой кнопки. На выбор доступно множество стилей кнопок . Вам нужно выбрать стиль, добавить текст кнопки, и она сгенерирует вашу кнопку.

Одна интересная особенность: вы также можете добавить URL-адрес, который будет открываться при нажатии на кнопку . Итак, если ваша кнопка должна открывать веб-страницу по щелчку, вы можете добавить URL-адрес веб-страницы по вашему выбору.

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

VerticalResponse

У VerticalResponse есть одна уникальная особенность, которая делает его немного особенным по сравнению с другими веб-сайтами по производству кнопок. Это позволяет вам создавать закругленные, круглые, квадратные и прямоугольные кнопки . Другие веб-сайты позволяют создавать закругленные или прямоугольные кнопки, но для кнопки есть еще две формы. Помимо этого, вы можете установить цвет границы, выбрать шрифт, цвет шрифта, включить тень текста, добавить пользовательский текст и выбрать цвет кнопки .

Вы также можете просмотреть кнопку вывода в реальном времени, что является хорошей функцией. Когда кнопка будет готова, вам нужно будет ввести свой адрес электронной почты, чтобы загрузить кнопку. Кнопку вывода можно сохранить как GIF-изображение . Он не имеет расширенных функций, таких как установка цвета тени, использование любого из ваших любимых цветов для текста и фона, получение кода CSS или HTML и т. д. Тем не менее, я скажу, что все функции, которые присутствуют в этом онлайн-конструкторе кнопок, являются удобно, и результат тоже выглядит хорошо. Если вам нравятся все эти функции, то этот бесплатный веб-сайт для создания кнопок, безусловно, является хорошим вариантом.

Мы также рассмотрели некоторые лучшие бесплатные онлайн-конструкторы логотипов с бесплатным скачиванием логотипа для вас.

Заключение:

На этом я заканчиваю список лучших бесплатных онлайн-сайтов по созданию кнопок. Хотя каждый веб-сайт производителя кнопок очень хорош в предоставлении результатов, сайт, занимающий первое место (Buttonoptimizer.com), является моим любимым и наиболее полезным. Если вам нужны хорошие и бесплатные варианты, чтобы сделать кнопку онлайн, то ваш поиск заканчивается здесь. Попробуйте любой из этих веб-сайтов по созданию кнопок и поделитесь, какой из них вам нравится больше всего.

13 новейших и лучших дизайнов кнопок, которые нельзя пропустить в 2018 году

Кнопки, как один из важнейших элементов дизайна пользовательского интерфейса, могут не только эффективно направлять пользователей через веб-сайт/мобильное приложение, но и побуждать их нажимать на них, чтобы улучшить их качество. продажи. Вот почему, чтобы выделить свои кнопки, дизайнеры UX/UI должны уделять большое внимание дизайну кнопок и читать многочисленные статьи, в которых анализируются и делятся принципами, секретами и способами установки размера, положения, формы, цвета и других факторов.

Однако для опытных профессионалов таких статей/руководств уже недостаточно для создания отличной и полезной кнопки. Вам действительно нужны новые подсказки, идеи или вдохновение, чтобы сделать уникальную и отличительную кнопку для ваших веб-приложений и мобильных приложений?

ОК! Вот 13 последних и лучших практик с кнопками , которые вы не должны пропустить в 2018 году. Надеюсь, они смогут вас как-то вдохновить:

1. FAB Microinteraction

*Дизайнер: Mayur Kshirsagar

*Важно: Очень крутая плавающая кнопка навигации и продуманный дизайн круговой навигации

FAB использует очень крутую плавающую кнопку, которая привлекает внимание пользователей и расширяет функции веб-приложения/мобильного приложения. Хорошо продуманная круговая навигация также очень привлекательна и полезна для ваших пользователей, она позволяет им легко выбирать и переключаться на другие части этого веб/мобильного приложения. В целом, весь этот дизайн кнопки действительно креативен, интересен и может создать очень приятный пользовательский опыт.

*Что вы можете узнать:

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

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

2. Интерактивный дизайн кнопки ввода. пользователи не могут сопротивляться взаимодействию с.

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

*Что вы можете узнать:

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

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

3. Микровзаимодействие для кнопки печати

*Дизайнер: Quovantis

*Важно: используйте функцию «кнопка + анимация», чтобы более наглядно показать функции кнопок печатается. Микровзаимодействие для кнопки печати — это действительно яркий способ показать, как работает функция этой «кнопки печати», и эффективный способ помочь пользователям убить время, пока им приходится ждать печати большого количества файлов. В целом, это отлично подходит для улучшения пользовательского опыта.

*Что вы можете узнать:

Добавляйте к кнопкам яркую анимацию на основе различных меток кнопок, функций и сценариев

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

4. Микроинтерактивность

*Дизайнер：Alvaro Secilla

*Важно: Привлекательные эффекты наведения для кнопок

В микровзаимодействии используются очень привлекательные эффекты наведения. Когда пользователи перемещаются над кнопкой CTA или пересекают ее, границы этой кнопки начинают ритмично дрожать. Как только пользователь уберет курсор мыши, эффект наведения немедленно прекратится, как будто его никогда не было раньше. Такие дизайны действительно интересны и привлекают внимание. Они могут быть очень полезны, чтобы побудить пользователей щелкнуть мышью и перейти к следующему этапу, например к покупке продукта, чтению более подробной информации или заполнению контактной информации и т. д.

*Что вы можете узнать:

Оптимизируйте дизайн кнопок с помощью богатых эффектов наведения или взаимодействия

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

5. Динамическая кнопка загрузки/загрузчик

*Дизайнер: Али Саид загрузка файла будет показана автоматически. Динамический помогает уменьшить разочарование пользователей, пока они ждут загрузки контента. И это действительно мило и впечатляюще.

*Что вы можете узнать:

Улучшите дизайн кнопок загрузки с помощью правильной анимации загрузки

Кнопки загрузки являются обычной частью веб-приложений или мобильных приложений. Анимации загрузки, такие как динамические индикаторы выполнения , эффективно снижают негативные эмоции пользователей во время ожидания. Таким образом, идеальное сочетание кнопок загрузки и анимации загрузки, несомненно, приведет к гораздо более великолепным эффектам.

6. Анимация скользящей кнопки

*Дизайнер: Серхад Илетир

*Важно: Умная скользящая кнопка и цветовой градиент

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

*Что вы можете узнать:

Улучшение скользящих кнопок с изменением цвета, непрозрачности, формы и многих других визуальных свойств 

Кнопка-переключатель — один из самых популярных типов кнопок среди дизайнеров. И вы можете попытаться улучшить свои скользящие кнопки, изменив цвет, непрозрачность, формы, закругленные углы и другие факторы. Эти изменения будут очень эффективны для увеличения кликабельности веб-сайта или приложения.

7. Микроинтерактивность 04

*Дизайнер: Альваро Сесилла

*Важно: материализовать кнопку CTA в сочетании функций кнопки

Microinteraction 04 придает кнопке CTA материализованный вид, динамичный скейтборд вместе с надписью «изучайте новые трюки», что позволяет пользователям более интуитивно и ясно понимать функции и функции этой кнопки. И такие дизайнерские стратегии действительно вдохновляют и достойны подражания в вашем дизайне.

*Что вы можете узнать:

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

8. Футляры для сенсорных кнопок

*Дизайнер: Khalil Hanna

*Важно: Упрощение дизайна кнопок за счет изменения цвета, значков и фоновых фотографий

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

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

*Что вы можете узнать:

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

9. Переключатель Poodle

*Дизайнер: Ванесса Браун

*Изюминка: милая скользящая кнопка и креативные переходы между 2D- и 3D-эффектами

Poodle Switch показывает симпатичные скользящие кнопки с визуальными эффектами. Кнопка с симпатичным значком пуделя трансформируется между 2D и 3D в процессе скольжения с одного конца на другой. А вместе с изменением текстовой метки кнопок весь дизайн становится действительно интуитивно понятным, чтобы пользователи могли четко знать функции этой кнопки.

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

*Что вы можете узнать:

Улучшите дизайн кнопок вашего веб/мобильного приложения с помощью 3D/2D и скользящих эффектов проекты веб-сайтов также могут быть крутыми, чистыми, простыми и привлекательными, если вы добавите соответствующие 2D / 3D / скользящие эффекты и тексты. Визуальные эффекты таких кнопок тоже будут великолепны.

10. Меню

*Дизайнер: Олег Фролов

*Важно: Уникальный переключатель/кнопки меню

В отличие от некоторых обычных кнопок навигации/меню, которые показывают опции с раскрывающимся списком21 Меню использует переключатель меню, который позволяет пользователям переключать различные параметры. И этот эффект наверняка впечатлит пользователей и подарит им довольно интересный опыт.

*Что вы можете узнать:

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

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

11. Кто-нибудь может нажать

*Дизайнер: Мехди Махдлоо

*Важно: Очень заманчивая микрокопия

Может ли кто-нибудь нажать, это эмоциональный дизайн кнопки. На микрокопии кнопки написано: «Кто-нибудь может ее нажать? Пожалуйста…» Это очень остроумный и соблазнительный дизайнерский прием. Прочитав эту копию, я просто не могу не нажать на нее, хотя и не знаю, для чего эта кнопка. А ты?

*Что вы можете узнать:

Добавьте привлекательную микрокопию на свой веб-сайт/кнопки мобильного приложения

Когда вы пытаетесь создать креативную кнопку, не забудьте выбрать и добавить привлекательную микрокопию для вашей кнопки в соответствии с ее особенностями и функциями. Это действительно эффективно для установления эмоциональной связи с пользователями и поощрения их кликов.

. и плоские пуговицы. Когда плоская кнопка используется вместе с кнопкой-призраком, плоская кнопка будет более привлекательной. И макет всего веб-сайта / мобильного приложения будет затронут, когда будет использоваться много контрастных кнопок.

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

*Что вы можете узнать:

Улучшите дизайн вашего веб-сайта/приложения с помощью кнопок-призраков и плоских кнопок

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

13. Реалистичные кнопки

*Дизайнер: Тоби Сантасо

*Основные особенности: Реалистичные кнопки и классный эффект свечения

Реалистичные кнопки используют реалистичный стиль дизайна, добавляя три реальных кнопки с классным эффектом свечения. И эти кнопки настолько похожи на реальные кнопки различных электронных приборов, что люди, конечно же, не могут не нажимать на них. Таким образом, создание таких реалистичных кнопок — очень хорошая идея для повышения кликабельности веб-сайта/мобильного приложения.

*Что вы можете узнать:

Добавьте реалистичные кнопки, чтобы усилить ощущение знакомства

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

Mockplus поможет вам легко и быстро создать и протестировать дизайн кнопок для веб/мобильных приложений

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

Однако проблема в том, что вы просто не знаете, какой инструмент прототипирования подойдет вам лучше всего? Не волнуйся! Mockplus , более простой и быстрый инструмент для создания прототипов с мощными функциями, станет вашим лучшим выбором для тестирования и улучшения дизайна кнопок веб-сайта/мобильного приложения:

Шаг 1. Создавайте различные кнопки с различными компонентами кнопок

Каждому веб-сайту/мобильному приложению требуется множество кнопок с разным внешним видом, формой и стилем. Это, безусловно, потребует, чтобы используемый инструмент прототипирования мог предложить пользователям больше опций или функций для создания всех необходимых типов кнопок для оптимизации их дизайна интерфейса. Mockplus предлагает дизайнерам различные компоненты кнопок:

* Используйте компоненты «Кнопка» для создания основных кнопок, таких как кнопки CTA

* Используйте компоненты «Кнопка со значком» для создания кнопок со значками

* Используйте компоненты «Значок и метка» для создания кнопок со значками и метками

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

Кроме того, Mockplus предлагает мощную библиотеку иконок с более чем 3000 векторных иконок, которые позволят вам поиграть с гораздо большим количеством вариантов дизайна.

Шаг 2. Добавьте кнопки со специальными фоновыми фотографиями с помощью компонента «Изображение»

Нужно добавить несколько хорошо обработанных фоновых фотографий, чтобы создать уникальный дизайн для ваших кнопок? В Mockplus вы можете легко использовать компоненты «Кнопка» и «Изображение» вместе для достижения этой цели.

Кроме того, если вам нужно создавать кнопки со специальными фоновыми фотографиями в пакетном режиме, вы можете использовать Repeater для быстрого и простого создания таких кнопок.

Шаг 3. Добавьте привлекательный микротекст с помощью компонентов «Ярлык» и «Текстовая область»

Привлекательный микротекст играет важную роль в привлечении внимания пользователей и привлечении их к клику. С Mockplus вы можете легко добавлять компоненты «Ярлык» и «Текстовая область», чтобы настроить идеальные тексты для дизайна кнопок.

Шаг 4. Сохраняйте, повторно используйте и делитесь стилями кнопок с помощью «Стиля компонента»

В дизайне веб-сайтов/мобильных приложений дизайнеры обычно повторно используют стили разных кнопок. Это не только экономит драгоценное время дизайнеров, но и позволяет им создавать более качественные мировоззрение. В Mockplus вы можете использовать « Component Style », чтобы свободно сохранять, повторно использовать и делиться стилями кнопок одним щелчком мыши.

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

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

Кроме того, Mockplus предоставляет функцию Interaction State , которая может помочь дизайнерам добавлять эффекты наведения для своих кнопок. Это тоже стоит попробовать.

Шаг 6. 8 способов протестировать дизайн кнопки и поделиться им

Mockplus предлагает 8 способов протестировать дизайн кнопки и поделиться им. Они чрезвычайно полезны для дизайнеров, которые хотят получать отзывы от других дизайнеров/пользователей и улучшать свои проекты.

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

управление командой из недавно выпущенных Team и Enterprise Edition и т. д.

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

Резюме

Таким образом, как важный элемент мобильного/веб-приложения, кнопки также могут быть сложными, даже если они могут выглядеть очень простыми и незамысловатыми.

No related posts.