Картинки для кнопок для сайта: ⬇ Скачать картинки D0 ba d0 bd d0 be d0 bf d0 ba d0 b8 d0 b4 d0 bb d1 8f d1 81 d0 b0 d0 b9 d1 82 d0 b0, стоковые фото D0 ba d0 bd d0 be d0 bf d0 ba d0 b8 d0 b4 d0 bb d1 8f d1 81 d0 b0 d0 b9 d1 82 d0 b0 в хорошем качестве

кнопки и формы для ввода информации — Дизайн на vc.ru

58 122 просмотров

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

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

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

Кнопки

Кнопки могут иметь несколько состояний:

• Кнопка в спокойном состоянии.
• Кнопка при наведении.
• Кнопка, подсвеченная при навигации по странице при помощи таба.
• И неактивная кнопка.

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

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

Базовый (родительский) компонент кнопки с использованием Auto Layout

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

С помощью Text Tool (T) пишем название кнопки. Задаем стиль текста, зарезервированный в нашей дизайн-библиотеке специально для кнопок (смотри предыдущую статью).

Применение текстового стиля в Figma Татьяна Маслакова

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

​Настройка центрирования текста в кнопке в Figma Татьяна Маслакова

Далее выравниваем слой с текстом относительно прямоугольника по центру. Для этого, выделив оба слоя, последовательно жмем две иконки вверху в правой панели:

​Выравнивание объектов в Figma Татьяна Маслакова

Затем выделаем оба слоя и запаковываем в компонент, задаем компоненту имя.

Сразу поговорим об именовании компонентов: чтобы слева на вкладке Assets наши компоненты расположились в одной группе, их следует именовать через слеш. Например я хочу, чтобы все кнопки у меня попали в папку Button. Для этого я использую в именах префикс button /. Например button /blue и так далее. Таким же образом можно создавать подпапки. Заранее продумайте, как вы хотите объединить создаваемые вами компоненты и придумайте названия для папок.

Чтобы объединить компоненты в одну группу, назначаем всем им грамотные имена с использованием / Татьяна Маслакова

Это удобно также и при замене компонентов в instance. Они там также объединяются в группы.

Чтобы объединить компоненты в одну группу, назначаем всем им грамотные имена с использованием «/» Татьяна Маслакова

Итак, мы задали имя новому компоненту кнопки. Далее, не снимая выделения с компонента в панели справа ищем вкладку Auto Layout и жмем плюс. Теперь, если мы захотим отредактировать текст кнопки, ее размер будет изменяться вместе с этим текстом.

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

Доработка функционала кнопки

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

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

Иконки​ для кнопок Татьяна Маслакова

Внимание: размеры компонентов должны быть одинаковыми. У меня получилось поле 20×20 пикселей. Иконка внутри компонента может не занимать все это поле, но сами компоненты иконок должны быть идентичны по размеру.

Копируем одну из иконок и помещаем ее экземпляр внутрь компонента с кнопкой, у меня иконка встанет перед текстом.

​Помещаем иконку в кнопку с Auto Layout в Figma Татьяна Маслакова

Остальные иконки пока оставляем в покое. Позже я покажу, как можно легко манипулировать кнопками.

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

Базовый компонент готов.

Другие состояния кнопки

Наведение

Создаем экземпляр компонента кнопки (Contrl+d или Comand+d самого компонента или перетащить новую кнопку из панели Assets).

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

Я изменила стиль заливки кнопки, у меня кнопка будет чуть чуть темнеть при наведении.

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

Компонент кнопки при наведении в Figma Татьяна Маслакова

Активность по табу и неактивная кнопка

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

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

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

Компоненты различных состояний кнопки в Figma Татьяна Маслакова

Кнопки без Auto Layout, которые можно масштабировать

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

Начинаем так же, как в пред. варианте: создаем прямоугольник, текст, центрируем их и создаем компонент. Но в этот раз вместо Auto Layout мы будем задавать Constraints: Center, Center:

Создание компонента кнопки в Figma без Auto Layout Татьяна Маслакова

Если в кнопках нужны иконки, то нужно сгруппировать текст и иконку и применить Auto Layout только на саму эту группу.

А далее уже центрировать с помощью Constraints всю группу внутри кнопки.

Constraints для фонового прямоугольника: Left+Right, Top+Bottom.

Состояния масштабируемой кнопки: создаем экземпляр компонента масштабируемой кнопки, настраиваем внешний вид. Запаковываем все в еще один компонент с настройками Constraints: Left+Right, Top+Bottom.

Auto Layout в данном случае не используется.

Кнопки могут состоять не только из прямоугольника и текста. Очень интересно смотрятся разного рода кнопки, построенные шейпах с различными настройками Constraints или Auto Layout:

Нестандартный дизайн кнопок в Figma Татьяна Маслакова

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

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

Управление всеми кнопками через базовый​ компонент в Figma Татьяна Маслакова

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

Гибкое манипулирование кнопками​ Татьяна Маслакова

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

Инпуты (поля ввода)

Вспомогательный компонент form_stroke/simple

Далее мы рассмотрим различные формы ввода информации. Для их создания нам понадобится небольшой вспомогательный компонент form_stroke/simple.

Обратите внимание на именование компонента — я заранее его задаю с использованием /, чтобы позднее добавить в группу компонентов form_stroke другие вспомогательные компоненты

Компонент form_stroke/simple будет содержать в себе стиль оформления самого прямоугольника формы ввода. Я сделала обычный прямоугольник со сругленными углами, с заданными параметрами заливки и обводки. Constraints прямоугольника: left+right и top+bottom.

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

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

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

Активность по табу и ошибочное состояние базового компонентаИтак, компонент готов. Я вынесла его отдельно, чтобы у нас была единая точка редактирования стиля для всех форм и чекбоксов — это довольно удобно.

Активность по табу и ошибочное состояние базового компонента

Также нам потребуютсся два унаследованных компонента от form_stroke/simple для активных состояний по табу и состояний ошибки ввода. Для этого делаются 2 новых экземпляра form_stroke/simple, настраивается их вид и эти экземпляры запаковываются в компонента. Имена компонентам я задала по тем же правилам, что и базовый компонент, чтобы Оби объединились в группу

Вспомогательные компоненты для различных состояний подложки у формы ввода в Figma​ Татьяна Маслакова

Создаем само поле ввода (инпут)

Для создания поля ввода нам может понадобиться:

• Ранее созданный базовый компонент
• Отдельный текстовый слой с названием формы
• Отдельный текстовый слой для вводимого текста
• Текст ошибки

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

Создадим новый компонен на основе базового form_stroke/simple и поместим внутрь компонента также перечисленные выше текстовые слои:

Создаем компонент поля ввода в Figma Татьяна Маслакова

Не забываем для вложенного компонента и текстов настраивать constraints. Например вводимый текст в форме и компонент form_stroke/simple имеют настройки left+right и top+bottom. Название и ошибка форм в нарисованном мною варианте привязаны к верхнему краю.

А вот так легко можно менять состояние ошибки и активность поля ввода:

​Меняем экземпляр базового компонента через Instance Татьяна Маслакова

Создаем дополнительные компоненты для форм ввода в этих двух состояниях

В моем варианте был использован Auto Layout на названии формы и тексте ошибки, чтобы текст ошибки мог сдвигаться, правее от названия.

​3 состояния поля ввода Татьяна Маслакова

Выбрала такие имена компонентов:

• form/simple_form
• form/simple_form_error
  
• form/simple_form_active
  

Выпадающие списки

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

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

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

Иконки для раскрытия и закрытия выпадающего списка​ Татьяна Маслакова

Обратите внимание на имена иконок. они находятся в группе icon, подгруппе arr.

Создаем экземпляр компонента form/simple_form, размещаем в нем первую иконку, запаковываем в компонент form/dropdownlist.

Constraints для иконки: right и center.

Constraints для form/simple_form: left+right и top+bottom.

компонент выпадающего списка в Figma Татьяна Маслакова

Открытый выпадающий список

Нарисуем открытие выпадающего списка.

Элементы списка

Создадим вот компонент как на картинке:

​Вспомогательный компонент для элемента списка Татьяна Маслакова

Constraints текстового слоя: left+right и top+bottom.

Для линии left+right и bottom.

Это будет один итем списка, который будет появляться при открытии выпадушки.

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

Компонент для элемента списка при наведении Татьяна Маслакова

Прокрутка

Нам также понадобится компонент для прокрутки. Это 2 прямоугольника, совмещенные друг с другом.

Constraints нижнего прямоугольника: left+right и top+bottom. Верхнего left+right (либо center в зависимости от того, какой эффект нужен при масштабировании) и top.

​Компонент прокрутки в Figma Татьяна Маслакова

Сам список

Теперь из экземпляров двух компонентов элементов списка собираем конструкцию:

​Собираем выпадающий список в Figma Татьяна Маслакова

Используйте Auto Layout, чтобы быстро выровнять элементы.

Для каждого внутреннего элемента списка Auto Layout в левой панели должна быть выбрана такая опция:

Для всего списка Auto Layout выделяем иконку fixed width:

И ставим всему списку constraints: left+right, top.

Таким образом мы задали масштабирование нашей выпадушки по-горизонтали.

Вспомним, что в первой статье мы делали компонент плашки. Пришло время его применить. Совмещаем нашу конструкцию с компонентом плашки и запаковываем в новый компонент selectlist/all. У плашки делаем видимой треугольник-стрелку сверху.

Для плашки настраиваем constraints: left+right, top+bottom.

Список дополнительно засовываем во фрейм с активно галочкой Clip Content. Для фрейма настраиваем constraints: left+right, top+bottom, а для списка внутри фрейма left+right, top. Таким образом лишняя часть списка будет скрываться за счет масштабирования всего компонента.

Добавляем сверху полосу прокрутки с constraints: right, top+bottom.

Собираем выпадающий список в Figma​ Татьяна Маслакова

Компонент открытого состояния выпадающего списка

Наконец-то собираем полностью весь компонент открытого выпадающего списка:

Берем компонент form/dropdownlist, при помощи instance заменяем в нем иконку на перевернутую. Запаковываем этот компонент в новый list/dropdownlist_open. Настраиваем constraints: left+right, top+bottom.

Создаем экземпляр компонента выпавшего списка selectlist/all — переносим его и ставим под новый компонент.

Далее в палитре слоев переносим слои компонента form/dropdownlist внутрь компонента list/dropdownlist_open.

Создание компонента открытого выпадающего списка в Figma Татьяна Маслакова

Списку настраиваем left+right, bottom.

Ошибка и активность выпадающего списка

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

​Компоненты для разных состояний выпадающего списка Татьяна Маслакова

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

​Использование компонентов форм ввода и выпадающих списков в Figma Татьяна Маслакова

Чекбокс/радиобокс

Cоздадим новый компонент для чекбоксов и радиобоксов.

Будем создавать 4 состояния:

• чекбокс активен
• чекбокс неактивен
• радиобокс активен
• радиобокс неактивен

Вспомогательные иконки

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

Иконки для компонентов чекбоксов и радиобоксов Татьяна Маслакова

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

В качестве основы мы будем использовать компонент form_stroke/simple и form_stroke/active для активных состояний, чтобы их стиль наследовался самими чекбоксами и радиобоксами.

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

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

Базовый компонент чекбокса

Создаем компонент для чекбокса. Он будет базовым других состояний чекбокса и для всех вариантов компонента радиобокса. Называем его form/checkbox_select.

​Создание компонента для чекбокса в Figma Татьяна Маслакова

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

Активный чекбокс и чекбокс со снятым выделением, а также все вариации компонентой раддиобокса получаются при помощи компонента form/checkbox_select наследованием. Для этого мы создаем 2 экземпляра компонента form/checkbox_select, далее помощью Instance заменяем иконки на нужные нам заранее подготовленные компоненты:

​Создание компонентов для чекбоксов и радиобоксов в Figma Татьяна Маслакова

Подведем итог

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

​Компоненты кнопок, инпутов, чекбоксов, радиобоксов в Figma Татьяна Маслакова

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

​Гибкие компоненты в Figma. Наследование компонентов. Татьяна Маслакова

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

Читайте продолжение здесь.

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

Behance — мои лучшие работы

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

Кнопки / иконки — Скрипты и Дополнения

Виды материалов

Представляю вашему внимаю новый рейтинг для uCoz. Данный рейтинг может выводить + и — отдельно, соответственно теперь пользователи могут ставить лайк и дизлайк по отдельности. Данный скрипт подойдет для сайта любой тематики, дизайн можно подогнать под любой дизайн.

+ DEMO

Кнопки / иконки

Просто круговое меню, в котором элементы меню располагаются вокруг кнопки-переключателя при переключении.

+ DEMO

Кнопки / иконки

LC Switch — это крошечный плагин jQuery и Vanilla JS, который преобразует checkbox и radio по умолчанию в красивые переключатели или кнопки переключения с плавными эффектами скольжения, основанными на переходах CSS3.

Кнопки / иконки

Необычный, учитывающий направление, эффект наведения, который появляется в зависимости от направления, в котором указатель мыши входит в элемент. Идеально подходит для создания интерактивной кнопки призыва к действию с использованием небольшого количества JavaScript и CSS/CSS3.

Кнопки / иконки

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

+ DEMO

Кнопки / иконки

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

Кнопки / иконки

Ladda — это библиотека загрузки JavaScript для создания кнопок со встроенными индикаторами загрузки (счетчик и панель загрузки).

Кнопки / иконки

Heed сделан из чистых анимационных эффектов css3, которые помогут вам привлечь внимание пользователя к конкретному значку для определенных задач. Благодаря css3 он предоставляет вам плавные и легкие взвешенные анимационные эффекты.

Кнопки / иконки

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

Кнопки / иконки

Iconscout недавно выпустила Unicons, очень полный набор более 1000 бесплатных векторных иконок. Иконки доступны в верхних категориях (например, «Интерфейс пользователя», «Бизнес», «Покупки», «Медицина»), и они тщательно обработаны в сетке 24 пикселя, чтобы обеспечить согласованность на всех видах отображения.

Кнопки / иконки

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

Кнопки / иконки

Mybutton — это современные коллекции кнопок CSS3. У этого есть 24 + кнопки и 3 социальных стиля кнопки. Используется стандартная технология CSS3 для огромных комбинаций. Вы можете легко использовать эту кнопку в своем проекте.

Кнопки / иконки

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

Кнопки / иконки

Facebook Messenger, WhatsApp, Skype, Slack, Viber, Telegram, Обратный звонок, электронная почта и другие каналы! Пусть клиенты выбирают свой любимый метод для того, чтобы связаться с вами одним щелчком мыши и следить за разговором в любое время и в любом месте!

+ DEMO

Кнопки / иконки

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

+ DEMO

Кнопки / иконки

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

Кнопки / иконки

Social-likes — кнопки популярных социальных сетей: вконтакте, twitter, google, facebook. Идеальная форма и стильный дизайн кнопок с применением css и js, великолепно впишутся в полную новость вашего сайта.

+ DEMO

Кнопки / иконки

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

+ DEMO

Кнопки / иконки

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

+ DEMO

Кнопки / иконки

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

какими должны быть кнопки на сайте

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

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

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

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

Как отличить важное действие от менее важного? Задайте себе вопрос: «Влияет ли предполагаемое действие на мой бизнес или мой сайт?»

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

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

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

Создавая кнопки, помните:

• Человек воспринимает кнопку, освещенную в верхней части и затемненную в нижней, как выпуклую.
• Человек воспринимает кнопку, освещенную в нижней части и затемненную в верхней, как вогнутую или нажатую.

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

Как сделать кнопку убеждающей

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

• Используйте градиенты, тени и закругленные углы, чтобы сделать кнопку реалистичной

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

• Используйте контрастные цвета

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

• Сделайте кнопку достаточно большой, но не неестественно огромной

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

• Используйте слова, создающие эффект срочности

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

• Смягчайте CTA

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

• Правильно используйте заглавные и строчные буквы

Если ваш CTA состоит из двух слов, пишите оба с заглавной буквы. Заглавные буквы делают текст побуждающим. Если ваш CTA состоит из трех слов и более, пишите с заглавной буквы первое слово, а остальные пишите со строчных. В этом случае текст воспринимается в качестве диалога. Формулы выглядят так: жесткий CTA = одно или два слова + каждое слово с заглавной; мягкий CTA = три слова и более + с заглавной только первое.

• Иллюстрируйте призывы к действию

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

• Используйте эффекты при наведении

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

Почему кнопки OK больше не о’кей

Разработчики интерфейсов часто используют кнопки типа «OK», «Cancel», «Да», «Нет» и т.п. Если вы пользуетесь ПК, то видите такие кнопки каждый день.

Эти кнопки никак не связаны с действием, которое совершает пользователь. Чтобы ваш сигнал был более ясным и убедительным, связывайте CTA с желаемым/планируемым действием пользователя.

Почему конверсионные кнопки лучше располагать в правой нижней части страницы

Ответить на этот вопрос можно после изучения диаграммы Гутенберга.

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

Почему в диалоговых окнах кнопка желаемого действия должна находиться справа

В диалоговых окнах кнопки желаемого действия («Купить», «Оформить», «Да», «ОК» и т.п.) работают лучше, когда расположены справа. Обратите внимание на следующую иллюстрацию:

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

Когда кнопка желаемого действия находится справа, путь к конверсии сокращается на один шаг:

Когда кнопка желаемого действия находится справа, внимание пользователя сначала останавливается на второстепенной опции, а затем переходит к желаемой опции.

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

Как выделить кнопку желаемого действия

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

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

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

Почему иконки должны иметь прозрачный фон

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

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

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

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

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

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

Многоточия на кнопках и в меню указывают на доступность дополнительных опций и незаконченность действия.

Стрелки и многоточия делают кнопки и меню интуитивно понятными.

Кнопки должны быть заметными и убедительными

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

Адаптация материалов с сайта UX Movement.

Читайте также:

• Как улучшить сайт с помощью SEO и юзабилити: 4 мини-кейса
• Как повысить коэффициент конверсии: пошаговый план
• 10 интересных решений для увеличения конверсии на коммерческих сайтах

Website Buttons — Bilder und Stockfotos

174. 776Bilder

• Bilder
• Fotos
• Grafiken
• Vektoren
• Videos

AlleEssentials

Niedrigster Preis

Signature

Beste Qualität

Durchstöbern Sie 174.776

website buttons Stock- Фотографии и фотографии. Oder starten Sie eine neuesuche, um noch mehr Stock-Photografie und Bilder zu entdecken.

попробуй. leeres, abgerundetes blaues zeichen. leer — кнопки веб-сайта сток-графика, -клипарт, -мультфильмы и -символ

слушать Вкус. leeres, abgerundetes blaues Zeichen. leer

schaltfläche » — веб-кнопки stock-grafiken, -clipart, -cartoons und -symbole

Schaltfläche »

kaufen sie jetzt schaltfläche nset und verschiedene mausklick-cursor — кнопки веб-сайта stock-grafiken, -clipart, -cartoons und -symbole

Kaufen Sie jetzt Schaltfläche nset und verschiedene Mausklick-Curs

вектор-символ — веб-кнопки сток-графика, -клипарт, -мультфильмы и -символ

вектор-символ

jetzt registrieren. registrieren sie nun ein gerundetes rotes zeichen. jetzt registrieren — веб-кнопки сток-графика, -клипарт, -мультфильмы и -символ

jetzt Registrieren. registrieren Sie nun ein gerundetes rotes…

weiße e-mail und e-mail-symbol mit langem schatten isoliert. umschlagsymbol электронная почта. электронная почта-nachrichtenzeichen. roter kreis-вкус. vektor-illustration — веб-кнопки Stock-grafiken, -clipart, -cartoons und -symbole

Weiße E-Mail und E-Mail-Symbol mit langem Schatten isoliert….

вектор ein satz von vintage bunte aufkleber für begrüßungen und aktionen. — кнопки веб-сайта сток-графика, -клипарт, -мультики и -символ

Vektor ein satz von vintage bunte Aufkleber Für Begrüßungen und…

Vektor-Set von bunten Vintage-Etiketten für Grüße und Werbung. Premium-Qualitätsgarantie, Bestseller, Beste Wahl, Verkauf, Sonderangebot

набор иконок, мультифарбиген, ручка в стиле flachem. — веб-кнопки стоковые графики, -клипарты, -мультфильмы и -символы

Icon-Set multifarbigen Knopf in flachem Stil.

Symbolsatz mehrfarbige Schaltfläche im flachen Stil. Einfach редактирует векторную иллюстрацию.

джетц-кнопка потрачена. тратит jetzt gerundetes blaues zeichen.

jetzt-Кнопка потрачена. потратить gerundetes blaues Zeichen….

eine frau ist dabei, digitale inhalte auf ihrem computer mit liniensymbolen zu erstellen — кнопки веб-сайта стоковые фотографии и изображения

Eine Frau ist gerundetes, digitale Inhalte auf ihrem Computer mit…

vorlagenschnittstelle video -игрок. социальные медиа-концепт. mockup-видеоканал. веб-проигрыватель Windows. видеоингаляция, блогген. векториллюстрация. eps 10 — кнопки веб-сайта сток-графика, -клипарт, -мультфильмы и -символ

Видео-плеер Vorlagenschnittstelle. Social-Media-Konzept. Mockup-V

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

leere Taste. leeres Vorzeichen. Шлюссель. Дрюкен.

Moderne glänzenden knopf — веб-кнопки Stock-grafiken, -clipart, -cartoons und -symbole

Moderne glänzenden Knopf

Moderne graue Schaltfläche mit blauem glänzendem Bereich für das Symbol. Регистрационный номер

jetzt. registrieren sie nun abgerundetes Orangefarbenes zeichen. jetzt registrieren — веб-кнопки сток-графика, -клипарт, -мультфильмы и -символ

jetzt Registrieren. registrieren Sie nun abgerundetes…

liniensymbole und schaltflächen für die benutzeroberfläche. медвежий барер строгий. — кнопки веб-сайта сток-графика, -клипарт, -мультфильмы и -символ

Линиисимволы и изображения для значков….

blaues rundes informationssymbol, schaltfläche auf weißemhintergrund — кнопки веб-сайтов сток-графика, -клипарт, -мультфильмы и -символы

Blaues rundes Informationssymbol, Schaltfläche auf weißem…

набор иконок mehrfarbige schaltfläche im flachen stil. — кнопки веб-сайта сток-графика, -клипарт, -мультики и -символ

Icon Set mehrfarbige Schaltfläche im flachen Stil.

Symbolsatz mehrfarbige Schaltfläche im flachen Stil. Einfach редактирует векторную иллюстрацию.

берлин-ауфклебер. berliner rotes quadrat schäler zeichen — веб-кнопки сток-графика, -клипарт, -мультфильмы и -символ

Berlin-Aufkleber. Berliner rotes Quadrat Schäler Zeichen

neumorphic interface gui design elemente — кнопки веб-сайта stock-grafiken, -clipart, -cartoons und -symbole

Neumorphic Interface GUI Design Elemente

Neumorphismus Schnittstelle GUI Interaktive Designelemente.

Такой список для векторной графики для элемента дизайна пользовательского интерфейса — веб-кнопки стоковой графики, -клипарта, -мультфильмов и -символов Elemente der Webdesign-Benutzeroberfläche

нажмите, чтобы увидеть его на символе в ярком стиле. Нажмите, чтобы увидеть мит дем mauszeiger на векторную иллюстрацию на изолированном фоне. geschäftskonzept für web-button-zeichen. — кнопки веб-сайта сток-графика, -клипарт, -мультики и -символ

Klicken Sie hier auf das Symbol im flachen Stil. Klicken Sie mit…

струйная кнопка потрачена. потратить gerundetes rotes zeichen.

jetzt-Кнопка потрачена. тратит jetzt gerundetes rotes Zeichen….

бизнес-команда, das beim webseitendesign zusammenarbeitet. personen, die eine Website-schnittstelle auf dem computer erstellen. webentwicklung, teamarbeit, — кнопки веб-сайта, графика, -клипарт, -мультфильмы и -символ

Business-Team, das beim Webseitendesign zusammenarbeitet….

Business-Team arbeitet gemeinsam am Webseiten-Design. Люди, умирают eine Website-Schnittstelle auf dem Computer erstellen. Webentwicklung, Teamarbeit, neues Internetprojekt. Характер в модном стиле. Flache Vektorillustration

таких простых векторных элементов, таких полных UI vorlage на прозрачном фоне. вектор — веб-кнопки стоковые графики, -клипарты, -мультфильмы и -символы

0003 pfeil und handcursor clicken sie auf das symbol. векторный рисунок. — кнопки веб-сайта графика, клипарт, мультфильмы и символы

Pfeil и Handcursor нажмите Sie auf das Symbol. Векторраббилдунг.

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

кликните по символу руки с контурным изображением медвежонка

мы начнем собирать информацию с курсора в разных стилях. flaches design und farbverlauf mit schatten. satz der digitalen webschaltfläche auf Transparentem Hintergrund — веб-кнопки стоковые графики, -клипарты, -мультфильмы и -символы

Weitere Informationen Schaltflächensammlung mit Cursorzeiger in…

клика на веб-кнопках. satz der Aktionsschaltfläche klicken sie hier mit pfeilzeiger. векториллюстрация. — веб-кнопки сток-графики, -клипарт, -мультфильмы и -символ

Нажмите здесь, на веб-кнопки. Satz der Aktionsschaltfläche…

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

Handklick-Symbol в трендовом стиле Umriss-Stil-Design. Vektorgrafik-Ill

suchleistenkonzept — кнопки веб-сайта стоковые фотографии и изображения

suchleistenkonzept

символы для электронной почты, телефона и информационного бюллетеня на holzblöcken, синий фон — кнопки веб-сайта стоковые фотографии и изображения

Symbole für E-Mail, Telefon und Newsletter auf Holzblöcken ,. ..

выше. suchleiste für ui festgelegt. такой лейстенвекторсимвол в дизайне flachem, isoliert auf Transparentem Hintergrund. вектор-иллюстрация — кнопки веб-сайта сток-графика, -клипарт, -мультфильмы и -символ

Сучэн Зиер. Такой лист для пользовательского интерфейса festgelegt….

кликов здесь. satz von web-tasten mit aktion des mauszeigers und handzeiger. Нажмите здесь, ui-button-konzept — веб-кнопки, графика, клипарт, мультфильмы и символы

Нажмите здесь. Satz von Web-Tasten mit Aktion des Mauszeigers…

markieren sie liniensymbole. вектор-dünnlinien-дизайн. zulassung, verifiziert, garantie, test, online-umfrage, qualitätskontrollkonzepte. премиум-качество. Moderne lineare elemente, einfache umrisssymbole sammlung. пиксель идеальный. vektor-häkchen-symbole — кнопки веб-сайта сток-графика, -клипарт, -мультфильмы и -символ

Markieren Sie Liniensymbole. Вектор-Дюннлиниен-Дизайн. Zulassung,

leeresuchleiste — веб-кнопки стоковые фото и фотографии

leersuchleiste

3D-Darstellung der leersuchleiste

реалистичный видеоплеер glasbildschirm isoliert auf Transparentem Hintergrund. vektor-illustration — веб-кнопки стоковые графики, -клипарты, -мультфильмы и -символы

Реалистичный видеоплеер Glasbildschirm isoliert auf…

satz vonsuchleistemitfalldemschatten. — кнопки веб-сайта сток-графика, -клипарт, -мультики и -символ

Satz vonsuchleiste mit falldem Schatten.

Satz dersuchleiste mit falldem Schatten. Vector Konzeptelement для веб-дизайна, приложений, программного обеспечения и дизайна интерфейса. Fertigesuchleiste для веб-сайта.

blaues phone-symbol oder kontakt-website mobiles symbol isoliert auf klassischem kommunikationsstelefon weißen undergrund mit service-support-hotline-konzept. 3D-рендеринг. — кнопки веб-сайта стоковые фотографии и изображения

Синий телефон-символ или контакт-веб-сайт мобильные символы…

Минимальный текст на синем фоне — кнопки веб-сайта стоковые фотографии и изображения

Минимальный текст на синем фоне

Сатц от современного материала, стильный для веб-сайта, мобильного приложения и инфографики. verschieden farbverlaufsfarben. современный вектор-иллюстрация flachen stil — веб-кнопки сток-графика, -клипарт, -мультфильмы и -символ

Satz von modernen Material Stil Tasten für Website, mobile App…

Set von modernen Materialstil-Buttons für Website, mobile App und Инфографик. Verschieden Verlaufsfarben. Современный стиль векторной иллюстрации.

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

Комплект пользовательского интерфейса мобильного приложения Wireframe. Подробнее Wireframe для…

Wireframe-UI-Kit для мобильных приложений. Detaillierter Drahtrahmen для прототипирования schnelles. Установите von mobilen Konzept-Bildschirmen Design-Mock-up. Большая мобильная компания Vector-Satz.

курсор мыши на компьютере нажмите на кнопку — веб-кнопки сток-графика, -клипарт, -мультфильмы и -символ

Der Cursor der Maus am Computer, нажмите на кнопку

benutzeroberflächenelemente для мобильного финансового приложения. neues trendiges neumorphes design — веб-кнопки сток-графика, -клипарт, -мультфильмы и -символ

Benutzeroberflächenelemente für die Mobile Finanz-App. Новые…

клика, чтобы нажать на кнопку с изображением вручную, — веб-кнопки, графика, клипарт, -мультфильмы и символ

, нажать на кнопку, на которой можно скачать документ с помощью Handzeiger, нажмите на кнопку

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

Компьютер-Maus нажмите Sie auf Cursor Grauen Pfeil Symbole…

maus-klick-zeiger-icon-set и компьютер maus flashe bauweise. — веб-кнопки со стоковой графикой, -клипартом, -мультфильмами и -символами

Maus-Klick-Zeiger-Icon-Set и Computer Maus flashe Bauweise.

ретро-браузер computerfenster im 90er jahre steamwave стиль с улыбкой gesicht hipster aufkleber. Retrowave pc-desktop mit meldungsfeldern und popup-benutzeroberflächenelementen, vektorillustration von ui und ux — веб-кнопки сток-графика, -клипарт, -мультфильмы и -символ

Retro Browser Computerfenster в стиле 90-х Jahre Vaporwave с. ..

Retro-Browser-Computerfenster в 90-х годах Jahre-Vaporwave-Stil с Smile-Face-Hipster-Aufklebern. Retrowave PC-Desktop mit Meldungsfeldern und Popup-Benutzeroberflächenelementen, Vektorillustration UI und UX.

значки контактов — веб-кнопки стоковые графики, клипарты, мультфильмы и символы

значки контактов

weiß kontobildschirmsymbol mit langem schatten isoliert erstellen. roter kreis-вкус. вектор-иллюстрация — кнопки веб-сайта сток-графика, -клипарт, -мультфильмы и -символ

Weiß Kontobildschirmsymbol mit langem Schatten isoliert erstellen.

pfeile große schwarze набор-символ. pfeil-symbol isoliert auf weißem hintergrund vektor-illustration — веб-кнопки сток-графика, -клипарт, -мультфильмы и -символ

Pfeile große schwarze Set-Symbole. Pfeil-Symbol isoliert auf weiße

wischen sie icon set isoliert im hintergrund. wischen sie nach oben набор историй кнопка вектор-дизайн. — кнопки веб-сайта графика, клипарт, мультфильмы и символы

Wischen Sie icon Set Isoliert im Hintergrund. Wischen Sie nach…

Векторная иллюстрация EPS 10 Datei.

pfeilset, isoliert, vektordarstellung, pfeilsymbol — кнопки веб-сайта stock-grafiken, -clipart, -cartoons und -symbole mausklick, handtippen, pfeilzeiger, type hier, scrollen, sanduhr, минимальная векторная иллюстрация пальца. einfaches gliederungszeichen zur auswahl. 30×30 пикселей идеальное редактирование хаба — веб-кнопки сток-графика, -клипарт, -мультфильмы и -символ

Cursor-Liniensymbol gesetzt. Mausklick, Handtippen, Pfeilzeiger,…

Cursorliniensymbol gesetzt. Mausklick, Handtippen, Pfeilzeiger, Hier Tippen, Scrollen, Sanduhr, Finger minimale Vektorillustration. Einfaches Umrissschild zur Auswahl. 30×30 пикселей идеальное изображение Стрих.

freigabe-schaltflächenlinien-symbol gesetzt. ссылка, gebrochenhyperlink, herunterladen, veröffentlichen, цепочка минимальных векторных иллюстраций. einfache gliederungszeichen für webanwendungs-url. 30×30 пикселей идеально. Bearbeitbare striche — кнопки веб-сайта сток-графика, -клипарт, -мультфильмы и -символ

Freigabe-Schaltflächenlinien-Symbol gesetzt. Ссылка,…

Symbolsatz für die Schaltflächenzeile freigeben. Ссылка, дефект гиперссылки, Herunterladen, Veröffentlichen, Anhängen von Kette minimale Vektorillustrationen. Einfache Gliederungsschilder для URL-адреса Webanwendung. 30×30 пикселей идеально. Медвежья полоска.

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

значки кнопок набраны — Multi-Serie

Значки кнопок воспроизведения мультисерии вектор EPS Datei.

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

Weiße Runde Kunststoff Knopf auf grauem Hintergrund.

набор иконок heim und haus. вектор-иллюстрация-билд. — кнопки веб-сайта сток-графика, -клипарт, -мультики и -символ

Heim und Haus-Набор икон. Вектор-Иллюстрация-Билд.

современных векторных наборов веб-элементов для мультимедийных проектов. — веб-кнопки сток-графика, -клипарт, -мультфильмы и -символ

Современный векторный набор веб-элементов для мультимедийного проекта

информационная папка с 4 датами. векторная иллюстрация абстрактного фона. kann für workflow-layout, business-schritt, broschüre, flyer, banner, web-design verwendet werden. — кнопки веб-сайта сток-графика, -клипарт, -мультики и -символ

Infografik-Kreispapier mit 4 Datenvorlagen. Вектор-Иллюстрация…

из 100

Бесплатная веб-кнопка Фото и картинки

апельсин галстук бизнес

Оранжевый костюм 20

апельсин галстук бизнес

Оранжевый костюм 17

апельсин галстук бизнес

Оранжевый костюм 19

апельсин галстук бизнес

Оранжевый костюм 16

апельсин галстук бизнес

Оранжевый костюм 14

клавиатура компьютер технологии

Клавиатура

солнце стакан солнце

Обсуждение

значок кнопка красный

Красный значок и отражение

мальчик девочка малыш

Девушка

глава Телефон Телефон

Головной телефон

мальчик девочка малыш

Джентльмен

глянцевый кнопка бар

Набор глянцевых полос и кнопок

апельсин галстук бизнес

Оранжевый костюм 6

Интернет Концепции и темы Фотоэффекты

Кнопка ввода

сеть веб-дизайн баннеры

Набор красочных веб-баннеров

значок иконки компьютер

Набор мультимедийных иконок

почта Отправить www

Напишите мне по электронной почте 🙂 пожалуйста

почта Отправить www

Опубликуйте меня, пожалуйста: P

Информация значок Информация

Значок информации 2

дискеты дискета дискета

Дискета

распродажа сеть кнопка

Веб-кнопка «Распродажа»

значок символ кнопка

Набор квадратных иконок в стиле web 2.

0 1

кнопка вектор сеть

Кнопка

кнопка вектор сеть

Кнопка

кнопка вектор сеть

Кнопка

дизайн сеть кнопка

Квадратная кнопка 1

Интернет Нажмите Кнопка

Гелевый шарик 1

значок сеть кнопки

Пластиковые или стеклянные пуговицы 5

сеть Веб-сайт кнопки

Синие и хромированные кнопки веб-сайтов 2

Веб-сайт сеть кнопки

Синие кнопки веб-сайта 2 4

Веб-сайт сеть кнопки

Синие кнопки веб-сайта 2 2

Сила назад кнопка

Мощность

Примечание назад кнопка

Примечание

назад кнопка назад

Кнопка возврата

Малыш люди ребенок

Малыш

долина долина графика

Долина

график Деньги финансы

График

Молодые мужчины Интернет Нетбук

Мужчина Оплата онлайн кредитной картой

Молодые мужчины План — Документ Люди

Элегантный мужчина с аккордеоном

Интернет Цифровой дисплей Маркетинг

Набор значков линии видеоблогинга [пÑеобÑазованнÑй]

Интернет Цифровой дисплей Социальные проблемы

Женское сообщество смартфонов онлайн пузырьковая речевая графика

Интернет Цифровой дисплей Информационный носитель

Рука держит смартфон, изображение онлайн-сообщества

Интернет Презентация — Речь Информационный носитель

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

Пейзажи — Природа Тень Интернет

Триста шестьдесят по кругу

Пейзажи — Природа Тень Интернет

Триста шестьдесят букв

Корона — головной убор Прямоугольник Тень

Флаг Сан-Марино

Прямоугольник Тень Белый фон

Флаг Норвегии

Прямоугольник Тень Отрезать

Флаг Италии

Прямоугольник Тень Отрезать

Флаг Европейского Союза

Прямоугольник Тень Отрезать

Флаг Австрии

Прямоугольник Тень Бельгия

Флаг Бельгии

Интернет Панорамный Черный цвет

Набор иконок видеоконтента, мультимедиа, плеера, экрана, ТВ-линии

Интернет Бдительность Безопасность

Значок сайта для ноутбуков в разработке

Интернет Цифровой дисплей Информационный носитель

Набор значков меню настроек

Интернет Цифровой дисплей Информационный носитель

Рисунок значка мобильного телефона с паролем безопасности

Цифровой дисплей Музыка СМИ

Плоский изолированный значок медиаплеера

Интернет Цифровой дисплей Информационный носитель

Социальные сети связаны с мировыми иконами медиа

Интернет Цифровой дисплей Социальные проблемы

Электронная почта сообщения в социальных сетях

Интернет Цифровой дисплей Информационный носитель

Загрузить значки информации для общения в социальных сетях

Интернет Цифровой дисплей Социальные проблемы

Электронная почта сообщения в социальных сетях

2 556 379 Web Buttons Стоковые фото, картинки и изображения

Set of vector modern material style button. PREMIUM

Набор цветных пуговиц. блестящие 3d стеклянные прямоугольники иконки. векторные иллюстрации на белом фоне. PREMIUM

Красные 3d стеклянные кнопки. векторная иллюстрация на белом фоне. PREMIUM

Набор шаблонов формы панели поиска неоморфного интерфейса. кнопки глянцевые, кнопки сайта графическая этикетка и кнопки сайта интернет-шаблон баннер. кнопки веб-сайта, меню, отражение, навигация. ПРЕМИУМ

Векторные кнопки со стрелками — надписи на белом фоне — illustrationPREMIUM

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

Золотая кнопка и значок веб-контактаPREMIUM

Читать подробнее продолжить кнопкуPREMIUM

Зарегистрируйтесь здесь веб-кнопкиPREMIUM

Набор элементов дизайна, веб-стикеры, теги, баннеры, коллекция наклеек и векторная иллюстрация лент. PREMIUM

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

Закругленные веб-кнопкиPREMIUM

Набор цветных веб-кнопокPREMIUM

Зеленый красный синий многоцелевые шаблоны веб-сайтов и элементы инфографики плоский дизайн набор для рекламыPREMIUM

Набор красочных кнопокPREMIUM

Классический набор значков кнопок медиаплеера.PREMIUM

Современная кнопка баннера с вариантами оформления социальных иконок.PREMIUM

Пустые темно-синие кнопки для веб-сайта или приложения.PREMIUM

Красивая и свежая коллекция кнопок для загрузки. вектор set.PREMIUM

Коллекция кнопок продаж «купить сейчас». красочный плоский стиль дизайна.PREMIUM

Набор из 10 элегантных золотых пуговиц различной формыPREMIUM

Черные светящиеся пуговицыPREMIUM

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

Шаблон векторного дизайна инфографикиPREMIUM

Веб-кнопкиPREMIUM

Начать синий квадрат 3d реалистичная изолированная веб-кнопкаPREMIUM

Прямоугольные пустые веб-кнопки блестящий стеклянный красочный наборPREMIUM

RE Веб-сайт UM

Набор глянцевых кнопок, изолированных на беломPREMIUM

Кнопки, переключатели, панели темных веб-элементов пользовательского интерфейса. ПРЕМИУМ

Хромированная глянцевая кнопка с зеленым центром. векторные элементы бизнес-дизайна.PREMIUM

Прозрачные векторные стеклянные баннеры или пластиковые глянцевые знаки. веб-кнопка прямоугольной формы, глянцевые красочные кнопки с закругленными углами illustrationPREMIUM

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

Набор веб-кнопокPREMIUM

Присоединяйтесь к бесплатным веб-кнопкамPREMIUM

Длинные и короткие прямоугольные кнопки. для вашего дизайнаPREMIUM

Красивая и свежая коллекция веб-кнопок для многих целей. хорошо смотрятся как на белом, так и на темном фоне. векторный набор.ПРЕМИУМ

Набор баннеров для продажи.ПРЕМИУМ

Значок кляксы со стрелкой. vector illustration.PREMIUM

Ассорти из символов значков всплескаPREMIUM

Скачать французские веб-кнопкиPREMIUM

Набор красочных веб-кнопок светится значок свечения векторPREMIUM

Простая векторная веб-кнопка с теньюPREMIUM

Начать работу с современными веб-кнопкамиPREMIUM

Set. vector illustration.PREMIUM

Веб-кнопки красного, желтого и зеленого цветов на белом фоне, трехмерная визуализацияPREMIUM

Красно-серая глянцевая кнопка с набором иконок. векторные элементы бизнес-дизайна. ПРЕМИУМ

Бизнес веб-кнопок для веб-сайта или приложения. элементы дизайна вектора.ПРЕМИУМ

Значок знака стрелки. следующая кнопка. навигационный символ. цветные плоские иконки на белом фоне.PREMIUM

Набор трехмерных логотипов компанииPREMIUM

Белая прозрачная кнопка воспроизведения с тенью, значокPREMIUM

Глянцевая веб-кнопкаPREMIUM

Векторные красочные кнопки различного назначенияPREMIUM

Кнопка воспроизведения с тенью на прозрачном фоне. изолированный знак для Интернета. векторный значок.PREMIUM

Пустые оранжевые веб-кнопки для веб-сайта или приложения.PREMIUM

Пустые веб-глянцевые кнопкиPREMIUM

Набор веб-блестящих кнопок на белом фонеPREMIUM

Набор глянцевых аква-кнопокPREMIUM

Пустой темно-синий веб-сайт Кнопки для веб-сайта или приложенияPREMIUM

Десять кнопок призыва к действию, разных стилей и форм. сделано с глобальными образцами.ПРЕМИУМ

Набор стеклянных пуговиц — цветная иллюстрацияPREMIUM

Кнопки со стрелкой на белом фонеPREMIUM

Набор глянцевых веб-кнопок, векторная иллюстрацияPREMIUM

Аква-кнопкиPREMIUM

Набор разноцветных пуговицPREMIUM

9002UM Коллекция векторных стеклянных пуговиц 90PREMIUM

кнопки, значки, полосы vector imagePREMIUM

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