Как сделать для сайта кнопки
База знаний uCoz
Кнопка на сайте может использоваться повсеместно. Обычно кнопка используется для выполнения действия, которое не приводит к переходу на другую страницу. Для перехода на другие страницы используются ссылки, но часто, чтобы придать ссылке важность или просто выделить ее на фоне остального контента, даже обычная ссылка может оформляться как кнопка.
В этой инструкции показано, как создать свою кнопку.
Обычная кнопка
Выглядит это следующим образом:
Кнопка с фоновым изображением
Если у вас есть изображение кнопки, то его можно использовать в обычной ссылке, например так:
Выглядит это следующим образом:
Чтобы получить такой результат, нужно сделать две вещи:
Кнопка на CSS
Кнопку можно оформить с помощью CSS. Для этого добавьте стили в шаблон сайта и укажите класс кнопки.
Добавьте в разделе Панель управления / Дизайн / Редактор / CSS:
Тогда HTML-код самой кнопки будет следующим:
А на сайте кнопка отобразится так:
Не пугайтесь, если CSS кажется вам незнакомым и странным. Чтобы настроить кнопку под свои нужды, достаточно изменить отступы / размер шрифта в пикселях и цвет фона / текста в HEX (чтобы посмотреть все цвета, наберите в Яндексе запрос «hex цвета онлайн»).
Ваша кнопка на других сайтах
В некоторых случаях есть необходимость давать пользователям возможность устанавливать вашу кнопку на своих сайтах. Если предоставите готовый HTML-код кнопки, то они без труда смогут это сделать. Для этого нам потребуется создать текстовое поле и поместить внутрь него готовый код. Каждый тип кнопки будет иметь свой код:
Кнопка с фоновым изображением
Установка кнопки на сайт
Теперь необходимо добавить код кнопки на свой сайт. Это удобно делать с помощью конструктора:
Добавьте код кнопки в блок:
Добавьте поле с кодом, а также CSS, если требуется. Сохраните изменения внесенные в конструкторе.
Кнопки | CSS
Простая HTML кнопка для сайта
Есть несколько типов input для создания кнопки и тег button [ type=»button | reset | submit» ]. Внешне и функционально они абсолютно одинаковы.
Как сделать кнопку на CSS
Из ссылки, тега span или div можно сделать с помощью CSS очень даже симпатичную кнопку.
Создание кнопки: «А нужно ли изменять вид кнопки при наведении или делать кнопку с эффектом нажатия?»
Надо признать, что сложнее всего придумать как будет вести себя кнопка во время нажатия.
Код кнопки для сайта
Иногда самый простой внешний вид может выглядеть более стильно, чем навороченная с крутыми эффектами кнопка. Взгляните, как она тут [cssdeck.com] смотрится.
Кнопка с градиентом
Градиенты плохо поддаются анимации, плавной смене цвета фона. Что же делать? Ответ: box-shadow [перейдите по ссылке, там есть суперская форма входа].
А вот всякие перемещения работают на ура.
Довольно популярно разделение кнопки на два цвета
Красивые кнопки CSS
Кнопки «Скачать» CSS
Стилизация кнопок с помощью CSS
Анимированная кнопка: «свечение текста»
Стиль кнопок с бликами
Кнопки меню
Объёмная кнопка CSS
Вдавленная кнопка
Выпуклая кнопка HTML
Круглые CSS кнопки
Анимированная кнопка CSS
Анимированное заполнение происходит так (тут нет лишнего кода, связанного с кнопкой). Другие интересные эффекты загрузки можно найти тут [tympanus.net].
3d кнопка CSS
Оформление кнопок
Кнопки сайта следует выполнять в едином стиле, чтобы не оставалось сомнений, что если здесь нажать, то произойдёт какое-то действо.
Именно поэтому у Google второстепенные кнопки сначала плоские, а после наведения мышки обретают объём.
Также нужно победить желание сделать кнопку величиной со слона, чтобы не стать объектом баннерной слепоты.
98 комментариев:
damir-tote Спасиб NMitra, что подобное искал =) А не можешь еще показать, как сделать вертикальное выпадающее меню, только не вбок, а вниз)) NMitra См. http://shpargalkablog.ru/2011/07/accordion-css.html
В качестве содержания добавляйте список ol из ссылок. Дмитрий Вып. список это просто) Даже просто введя в гугл вып список на цсс можно найти NMitra Посмотрите последний пример http://shpargalkablog.ru/2012/04/display-block-inline-css.html с наведением на пункт меню или с постановкой галочки справа. Есть вариант с :focus, но в Хроме нужно подключать картинку, я не стала поэтому расписывать.
Для высоты сложнее. Можно указать одинаковую height и line-height, но line-height не поддерживается некоторыми мобильными браузерами, например, Opera Mini. Совсем убрать padding.
если для одной страницы, то должна быть кнопка для перехода в «HTML»-режим при написании/редактировании статьи. В нужное место добавляете и стили, и кнопку. Только в этом случае стили нужно вписывать обязательно внутри
Ирина, благодарю за комментарий! Анонимный Понимаете, я в этих кодах не разбираюсь, но. кнопки очень понравились. сайтами не занимаюсь, но красиво подать ссылку на файл попробовал. тупо вставил код кнопки добавил адрес на файл и вроде работает! Пример: http://bogoglasnik.ru/load/88-1-0-1380?l_ZeHf (начинающий) Анонимный Добрый день. Подскажите пожалуйста, как сделать кнопку что бы она была ссылкой, вела на другую страницу? Где вписать ссылку
А так вроде со всем разобрался и с цветом и размером, а вот как сделать ее ссылкой что бы при нажатии переходить на другую страницу
Заранее благодарен. NMitra Заполните атрибут href (подробнее http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html )
background: rgb(206, 220, 231) linear-gradient(rgb(206,220,231), rgb(89,106,114));
Вот сейчас опять перечитываю в поисках как убрать подчёркивание.
Очень не хватает просто подробного описания, какой параметр что значит.
Всякие комбинации служебных слов перепробовал, но понять так и не смог.
Может что подскажете. Заранее огромное Спасибо!
a.button_main_ico <
float: left;
width: 200px;
height:24px;
font-size: 16px;
font: Verdana,Arial,Helvetica;
text-align:center;
border:none;
border-radius: 6px;
color:#F8F8F8;
background-color:#3895EA;
text-decoration: none;
outline: none;
user-select: none;;
transition: 0.2s;
>
a.button_main_ico:hover <
background-color: #BABABA;
>
a.button_main_ico:focus <
background-color: #D8D8D8;
>
a.button_main_ico:focus:hover <
background-color: #DFDFDF;
>
a.button_main_ico:before <
content: url(../ico_L_ready.png);
> NMitra Вы иконку добавляете с помощью :before? Тогда текст нужно окружить span. :before и span задать vertical-align: middle;
a.button_main_ico:before,
a.button_main_ico span <
content: url(../ico_L_ready.png);
vertical-align: middle;
>
Спасибо за участие и заданное направление.
За отклик и направление Огромное Спасибо. NMitra Высота-то указана фиксированной height:24px; Анонимный Однако, нашёл ответ который мне подошёл.
в HTML
Кнопка с иконкой и текстом выравненные по середине кнопки:
Кнопка
Тоже но без иконки:
Кнопка
В CSS
a.button_main <
float: left;
width: 200px;
height:24px;
font-size: 16px;
font: Verdana,Arial,Helvetica;
text-align:center;
border:none;
border-radius: 6px;
color:#F8F8F8;
background-color:#550000;
text-decoration: none;
outline: none;
user-select: none;;
transition: 0.2s;
>
a.button_main:hover <
background-color: #BA0000;
>
a.button_main:focus <
background-color: #D80000;
>
a.button_main:focus:hover,a.button_history:focus:hover <
background-color: #DF000;
>
Тут приятно, что класс кнопки, отвязан от класса иконки. Значит используем один класс на все кнопки приложения и лишь меняем классы иконок по надобности.
Спасибо вы натолкнули на верный путь, с уважением sharpionok Анонимный Вместо HTML кода напечаталась ссылка чёрти куда. Как показать код в HTML не понимаю.=(
Большая коллекция кнопки CSS / HTML
Замечательная коллекция кнопок на CSS и HTML с валидным и качественным кодом для современного сайта, чтобы оформить меню, ссылки, вход в профиль, кнопки добавить комментарии (купить, открыть, или пройти на страницу), изменить дизайн перехода на предыдущую страницу, табы и т.д.
Как сделать кнопку на CSS
Страница с примерами ниже, красивых и современных вариантов кнопок только на CSS и HTML
Если кому интересно читаем тут описание, из каких элементов и тегов состоит кнопка для сайта или пропускаем смотрим примеры ниже.
Самый простой способ изменить цвет, шрифт, размер, тень, градиент и другие стили кнопки HTML не нарушая целостности кода, воспользоваться супер инструментов вашего браузере. Подойдет для этих целей Мозила, Опера, Гугл Хром, Яндекс.Браузер и другие программы в которых встроен инструмент «Веб-разработка».
Как пользоваться инструментом «Веб-разработка Firefox Mozilla» подробно инструкция в картинках.
Простая HTML кнопка для сайта может содержать значение input, при создание кнопки с тегом button по своему действию напоминает результат, получаемый с помощью тега input (с атрибутом type=»button | reset | submit»). Функционально и внешне они относительно одинаковы. Внутри тега button каждый вебмастер может добавить отформатированный текст, или подходящее изображение. Различаются эти элементы и кнопки с применением тега input (c атрибутом type = «button») несколькими параметрами.
Главным отличием тега button, это расширенные возможности по созданию кнопок HTML. Например, вы можете размещать любые элементы HTML и изображения. Применив стили, можно изменить внешний вид кнопки, шрифт, цвета фона, градиент, размеры и другие параметры.
Когда применяется тег button?
Как изменить вид кнопки при наведении, сделать эффект нажатия? Динамические эффекты вы сможете реализовать с помощью псевдоклассов:
:hover — при наведении. С появлением сенсорных экранов необходимость в :hover отпала. Для остальных же нужно как минимум изменение вида курсора мышки, чтобы дать понять, что элемент не является декорацией.
:active — в момент нажатия кнопки. Когда на странице тут же что-то явно происходит, например, переход по ссылке, загрузка модального окна, появляется значок обработки формы, то :active можно опустить.
:focus — пока кнопка в фокусе, то есть когда пользователь нажал на кнопку, но ещё не щёлкнул курсором мышки в другое место окна браузера. Без :focus невозможно объединить visibility: hidden; и transition. Если слишком быстро убрать мышку, то элемент повиснет в «половинном» состоянии, например, ссылка будет прозрачна, но по ней можно делать переход.
Сложнее всего сделать и продумать вид, задать параметры, понять, как должны изменяться эффекты во время нажатия кнопки, не нарушая целостность дизайна или вёрстки страницы. Чаще всего самый простой внешний вид, выглядит более стильно, чем навороченная с крутыми элементами и цветом кнопка. Большая коллекция кнопки CSS / HTML
Все про дизайн кнопок для сайта: от истории и до правильного создания
Кнопка позволяет выполнять множество разных действий на сайте. Например, она может служить инструментом для перехода на следующий этап, или же с ее помощью пользователь принимает те или иные условия. С помощью кнопок интернет-ресурс становится интерактивным. Именно поэтому дизайн кнопок для сайта так важен. Этот компонент является одним из ключевых в проектировании и продвижении интернет-ресурса.
Из этой статьи вы узнаете:
История дизайна кнопок для сайта с 2009 года по наши дни
Кнопки для сайтов призывают к действию (Call To Action), а также выступают в роли дизайнерского и навигационного элемента. Кнопки для веб-сайтов и приложений можно встретить повсюду – при входе в профили в соцсетях, при оформлении заказов в интернете, отправке сообщений через форму обратной связи и т. д.
Рекомендуемые статьи по данной теме:
Далее в статье вы увидите, каким был дизайн кнопок для сайтов и приложений почти 10 лет назад. Дизайнерские тренды постепенно менялись – вместе с ним менялся и дизайн кнопок для сайта. Мы собрали самые яркие примеры, начиная с 2009 года. Все скриншоты взяты из известной тематической социальной сети Dribbble, которая была запущена в том же 2009 году.
Для оформления здесь выбраны всевозможные оттенки серого. Практически в каждой второй реализации можно встретить аккуратные градиентные цвета и закругленные края. Такой дизайн отдаленно напоминает стандартные системные кнопки.
Именно в этом году появилась популярнейшая соцсеть Instagram. Изменения практически не коснулись формы кнопок веб-сайтов, однако в их дизайне появилось намного больше цветовых решений и разных элементов (например, внутренних теней). Что касается типографики на сайте, она стала более декоративной.
В этом году презентовали CCS3, а количество пользователей всемирной паутины превысило 1 млрд. Множество дизайнеров все еще следуют скевоморфизму и довольно нестандартно развивают данное направление. Согласно скевоморфизму, элементы интерфейса имитируют объекты реальной действительности. Трудно понять, каким правилам следует разработчики, когда создают тени и световые эффекты, но отражены они почти в каждом проекте.
Год стал завершающим для скевоморфизма. Многие дизайнеры к этому времени довели свое мастерство до совершенства, начав очень профессионально использовать данное направление. При этом возникла потребность в поиске новых решений. В это же время зародился плоский дизайн кнопок на сайте.
Состоялся релиз iOS7, и начался тренд на плоский дизайн кнопок на сайтах, не утративший своей актуальности по сей день. В этот период веб-мастера массово стали отказываться от попыток создания некоего третьего измерения в приложениях и интерфейсах, начав активно тестировать новое направление.
Произошел релиз популярного Material Design от Google, однако многие мастера не стали использовать этот стиль в полном объеме. Также 2014 год ознаменовался возникновением плоских и прозрачных вариантов кнопок для сайтов, двухпиксельных рамок и всевозможных цветов.
Популярность к материальному дизайну от Google пришла только по прошествии нескольких месяцев после того, как состоялся релиз. Материальный гугловский дизайн сразу же понравился разработчикам интерфейсов. Многие проекты начали использовать плоские кнопки с тонкой тенью внизу и другие фишки.
Дизайнеры хотят чего-то нового, а потому соединяют Flat и Material Design. Дизайн кнопок для сайта претерпевает изменения – появляются цветные тени и подсветки. При этом многие кнопки оформляют при помощи градиента, чтобы не выделять третье измерение, но подчеркивать при этом материал объектов.
На дизайн кнопок для сайта в 2017 году существенно влияет минимализм. При этом веб-мастера все еще ищут новые формы. Строгие технологические лимиты отсутствуют. Ограничения на дизайн накладывают лишь тренды и модные веяния.
Пока неизвестно, что будет с дизайном кнопок для сайтов в 2018 году. Но абсолютно точно можно сказать, что изменения произойдут, поскольку непременно появятся новые тенденции, а разработчики захотят как-то разнообразить существующий дизайн кнопок для сайта.
Не исключено, что в будущем дизайн кнопок станет вопросом, утратившим свою актуальность. Интерфейсы непрерывно эволюционируют, а потому вполне могут перестать быть востребованными. Мы видим, как в данный момент все больше набирает обороты управление при помощи жестов, интуитивного взаимодействия, VR и проч.
Самые актуальные сегодня виды дизайна кнопок для сайта
Объемная кнопка
Объемная кнопка для сайта, как правило, выполнена в форме прямоугольника с подъемом. Разные оттенки говорят о ее кликабельности. Объемные кнопки добавляют фактуру, главным образом, в плоские макеты. Они акцентируют внимание на функциях в самых активных или широких областях.
Где использовать:
Плоские кнопки
Плоские кнопки не приподнимаются, но тоже заполняются цветом. Главное достоинство дизайна таких кнопок заключается в том, что он не отвлекает пользователя от основного содержания сайта.
Где использовать:
Переключатель
Благодаря кнопке-переключателю пользователь может переключаться между двумя и более состояниями.
Где использовать:
Контурные кнопки
Дизайн кнопок для сайта бывает различным. Существуют и контурные – прозрачные кнопки простой прямоугольной формы, внутри которых есть текстовое наполнение, а контур обведен тонкой линией.
Где использовать:
Плавающая кнопка с выпадающим меню
Плавающая кнопка с выпадающим меню является одним из элементов материального гугловского дизайна. Это круглая материальная кнопка, приподнимающаяся и дающая эффект чернильного пятна в процессе нажатия.
Где использовать:
Какой дизайн кнопок для сайта выбрать
Какой дизайн кнопок для сайта лучше выбрать? Все определяется важностью кнопки, количеством контейнеров на экране и разметкой экрана.
У каждой кнопки есть несколько состояний. В первую очередь, необходимо работать над тем, чтобы предоставлялся визуальный отклик для отображения текущего состояния кнопок.
Кнопки для сайта могут находиться в 4 состояниях:
Нормальное
Здесь должно быть понятно, что состояние кнопки в данный момент – нормальное. Это основная задача. В качестве примера неудачного дизайна кнопки для сайта можно привести Windows 8. В данном случае юзеру может быть неясно, являются ли объекты в меню настроек кликабельными.
В фокусе
Пользователь должен понимать, что он наводит указатель на кнопку. То есть, человек понимает, что система приняла выполненное им действие, и хочет, чтобы оно было зрительно подтверждено.
Нажатое
При разработке дизайна кнопок для своего сайта вы можете проявить фантазию и сделать пребывание юзера на вашем интернет-ресурсе более интересным и ярким.
Неактивное
Есть два пути – скрыть кнопку или показать, что в данный момент она неактивна.
Плюсы первого способа:
Плюсы второго способа:
Основное предназначение кнопок – направлять пользователя и подталкивать его к выполнению необходимого вам действия. Если переключение будет плавным, то и взаимодействие окажется таковым. У пользователя не должно возникать проблем с поиском необходимой ему кнопки. При наличии сложностей в лучшем случае он будет испытывать временное неудобство, в худшем – покинет ваш ресурс.
Вас также может заинтересовать: Пользовательский контент
Как разработать дизайн кнопок для сайта в Фотошопе
Многие задаются вопросом, как разработать дизайн кнопок для сайта онлайн – как плоских, так и объемных, при помощи программы Photoshop.
Шаг 1. Создадим фон для будущей кнопки
Сначала создается новый документ, в котором будет выполняться работа. Итак, мы создали серый фон (по какой-то причине именно такой фон часто попадается на сайтах, где необходимы кнопки). Далее следует выбрать на панели инструментов Rounded Rectangle Tool (прямоугольник со скругленными краями).
В верхней части экрана нужно выставить настройку радиуса на уровень 9рх. Вы также можете поэкспериментировать с другими числами (чем больше число, тем более закругленными будут края).
Шаг 2. Делаем форму
С помощью инструмента, который вы выбрали, необходимо сформировать такую фигуру.
На панели слоев нужно выбрать слой с нашей фигурой и добавить ей стили Gradient и Stroke (для этого в нижней части панели Layers следует нажать кнопку Functions и выбрать необходимый стиль).
В настройках Gradient нужно выставить прозрачность 100%, цвет градиента от #0e6aab до #73d8fe, стиль Linear и угол 90 градусов.
Далее настраивают Stroke – это будет рамка или ободок для кнопки, который необходимо сделать как можно тоньше, выставив 1рх. «Color» устанавливают такой же, как внизу градиента – #0e6aab.
У нас получится такая основа, которую впоследствии нужно будет немного доработать.
Шаг 3. Создаем текстовую надпись для кнопки
На нашу основу необходимо добавить текст. К примеру, при нажатии должно отправляться письмо. В этом случае следует сделать надпись «Отправить». Мы остановили выбор на шрифте Arial 18 размера, начертание Bold, цвет белый.
Внизу нужно создать копию надписи но Color #1b75af и сдвинуть на одну точку вправо и вниз.
Далее нужно создать еще белый слой-подложку и сдвинуть его по аналогии с текстом. Так вы немного отделите объект от фона и добавите объем.
Дизайн кнопок для сайта html, CSS и JavaScript
Благодаря кнопкам для сайта html пользователь может переходить на заданную страницу. Однако это – не единственное назначение такого рода кнопок. Дизайн кнопок для сайта данного вида очень органично вписывается в общий стиль страницы, то есть, эти элементы выполняют еще и эстетическую функцию.
По сути кнопка – это та же ссылка, но только с приятным дизайном. Кроме того, кнопка может менять цвет, размер или форму, когда пользователь кликает или наводит на нее курсор.
Для создания кнопки применяют два варианта.
Если вы идете первым путем, то по завершении работы узнаете все тонкости создания кнопок и получите ценные навыки, которые в дальнейшем обязательно вам пригодятся. При использовании второго варианта вы просто получаете результат, да еще и с ограниченными возможностями.
Создать дизайн кнопок html для сайта – процесс сложный не столько по разработке, сколько по оживлению. Термином «оживление» в данном случае называют работу, направленную на то, чтобы кнопка в конечном итоге реагировала на действие пользователя. То есть, кнопка должна давать реакцию, когда пользователь кликает по ней, наводит на нее, нажимает. Для этих целей при создании дизайна кнопок html используют CSS или JavaScript.
Кнопка с использованием изображения
Итак, как создать дизайн кнопок для сайта с использованием изображения? Для разработки простой кнопки html, которая выглядит как картинка-ссылка, вставляют тег ‘a’ (ссылку) на тег img (изображение).
Этот пример – по сути простая картинка-ссылка. Но при этом эта картинка может выглядеть абсолютно по-разному и органично смотреться в общем дизайнерском решении сайта. Однако следует помнить, что кнопка html не может «работать», то есть, менять свой облик в зависимости от ситуации. Чтобы кнопка могла изменяться, необходимо поменять ее начальный вид и добавить CSS.
Кнопки для сайта с использованием CSS
Как выглядит дизайн кнопок для сайта CSS?
CSS является другим языком программирования, отвечающем исключительно за стили. CSS – это каскадная таблица стиля.
Код кнопки для сайта html выглядит так:
Внимание! Используя примеры, вам следует удалить значок «, чтобы получилось a и href.
Этот пример является простой ссылкой, которую потом преобразовывают в необходимом стиле с помощью CSS. Class в данном случае определяет наименование класса в CSS, чтобы код был применен именно к данному элементу на странице.
Суть этого примера, наверное, понятна даже кодеру с небольшим опытом. Но следует отметить, что здесь использован небольшой код, позволяющий сформировать элементарную кнопку. Чтобы применить стили при наведении или активности ссылки, необходимо пользоваться дополнительными тегами и параметрами.
Более сложная кнопка для сайта
Дизайн кнопок для сайта разрабатывается не только при помощи CSS, но и других языков программирования, которые используют для создания качественных кнопок html сайтов, к примеру, JavaScript. Мощность этого языка программирования выше. Кроме того, с его помощью могут быть реализованы интересные идеи для сайтов в большем количестве.
Языки программирования отличаются только сложностью в реализации. Поскольку JavaScript является более мощным языком, то и изучается он дольше.
Как уже было отмечено, кнопки html предназначены для того, чтобы перенаправлять юзеров на другие страницы сайта. Но, помимо этого, кнопки также отправляют данные из формы, в которую пользователь вводил информацию о себе, к примеру, при регистрации.
Код кнопки html в этом случае выглядит так:
Внимание! Используя примеры, вам необходимо удалить » для получения input.
Реализация такой кнопки – довольно легкая задача. На примере показана рабочая кнопка для отправки введенной пользователем информации из формы.
Сложность состоит не в создании кнопки html, а в реализации обработки информации, оправленной юзером. Для решения этой задачи нужно знать более сложный язык программирования. PHP дает возможность разрабатывать настоящие сайты, и, к примеру, многие готовые CMS записаны именно на нем.
Кнопки, разработанные для форм, так и стандартные, можно преобразовать в желаемый вид. Но у них более серьезное и ответственное предназначение.
Дизайн кнопок для сайта можно разрабатывать как вручную, так и с помощью специальных сервисов. Эти сервисы умеют автоматически создавать разные виды кнопок, отвечающие вашим требованиям. Но в применении этого метода разработки дизайна есть существенный минус. Чтобы в дальнейшем использовать созданные кнопки, потребуется хорошо разбираться в html.
Изучить html нужно будет для того, чтобы понимать, куда устанавливают кнопку сайта – в меню, блок, выводящий контент, или в footer (самый низ) сайта.
ТОП-5 сервисов CSS для создания дизайна кнопок для сайта
На просторах интернета в огромном количестве представлены бесплатные генераторы кнопок CSS, но едва ли вам быстро удастся подобрать подходящий именно вам вариант. Именно поэтому мы собрали лучшие генераторы и предлагаем вам ознакомиться с ними:
Best CSS Button Generator
При помощи данного инструмента вы можете создавать индивидуальный дизайн кнопок для сайта в желаемой цветовой гамме – для этого предусмотрены удобные цветовые схемы. Помимо этого, благодаря инструменту вы можете добавлять к тексту тень и оформлять границы.
Dextronet CSS
Сервис позволит вам создать красивый дизайн кнопок для сайта, что, безусловно, пойдет вашему интернет-ресурсу только на пользу.
CSS Portal
CSS Portal, с помощью которого также можно создавать дизайн кнопок для сайта, является не просто мощным инструментом. CSS Portal совместим с большей частью современных браузеров, что, безусловно, является его весомым преимуществом.
CSS Button Generator
С помощью сервиса вы сможете создавать отличный дизайн кнопок для сайта. Инструмент является очень быстрым и продуманным, за счет чего разработка дизайна становится довольно простой и занимает минимум времени.
External CSS3 Button
При помощи данного инструмента вы можете разрабатывать высококачественный дизайн кнопок для сайта с использованием внутренних и внешних теней и фонов.
10 моментов, которые стоит учесть, создавая дизайн кнопок для сайта
Помните, что порядок размещения и положение кнопок – очень важные параметры. Особенно важен порядок применительно к парным кнопкам (к примеру, «предыдущий» и «следующий»). Главный акцент в дизайне должен быть сделан на основном или наиболее важном действии юзера.
Дизайн кнопок на сайте должен соответствовать бренду. То есть, вы можете использовать логотип при разработке дизайна, а также продуманно выбирать цветовую гамму и графическое оформление.
При использовании в интерфейсе преимущественно плоских цветов не стоит создавать дизайн больших блестящих кнопок для сайта в стиле Apple. Создавая интерфейс, применяйте дизайн логотипа, пользуйтесь соответствующими формами, цветами и другими видами украшений.
Помните, что детали, имеющие второстепенное значение, не должны бросаться в глаза. Речь в данном случае идет об элементах меню, контроллерах, различных бегунках. Эти элементы, в частности, могут иметь одинаковые углы (один радиус), но разные тени, границы и градиенты и т. д.
Создавая дизайн кнопок для сайта, многие веб-мастера применяют в работе «Закон Теней», согласно которому любые тени оказывают лучший эффект, когда элемент светлее фона. Если же элемент темнее, чем фон, тени следует использовать осторожно.
При создании интерфейса, имеющего множество разных функций, необходимо установить некий визуальный язык для определения первичного, вторичного и третичного стилей.
Также не следует забывать, что размер кнопки, пустого пространства, текста и уровня тиснения должен уменьшаться. Это необходимо, чтобы снижался визуальный вес кнопок.
Дизайн призрачных кнопок для сайта включает в себя подпись, одноцветную рамку и прозрачный фон. Из-за этого могут возникать проблемы с подписью. В некоторых случаях лейбл помещают на фон белого цвета – это самый простой вариант. Но зачастую из-за другого сплошного цвета или яркого фото текст кнопки может стать нечитабельным.
Дизайнеры любят призрачные кнопки за то, что они полностью противоположны стандартным. Их не зря именуют призрачными, поскольку кнопки такого рода способны исчезать. Результаты проведенных исследований по юзабилити показали, что такие кнопки действительно могут пропадать. Люди, участвовавшие в экспериментах, не могли или прочесть текст, или их видеть. Из-за этого кнопка становится менее значимой или совсем теряет свою значимость.
Разрабатывая дизайн кнопок для сайта, мастера часто применяют надписи «OK», «Cancel», «Да», «Нет» и т.п. Если вы – пользователь ПК, то видите такие кнопки ежедневно. Но такого рода кнопки не имеют никакого отношения к действию, совершаемому пользователем. CТА для ясности и убедительности следует увязывать с действием, которое юзер хочет или собирается выполнить.
Чтобы аргументировать это утверждение, демонстрируем вам диаграмму Гутенберга. Глядя на нее, вы понимаете, что страница сайта делится на 4 части. Стрелки показывают, как двигается пользователь. Основное его внимание сосредоточено на верхнем левом и правом нижнем квадрантах страницы. На нижний левый квадрант посетитель практически не смотрит. В связи с этим конверсионные кнопки всегда лучше располагать внизу справа.
Кнопки желаемого действия, например «Купить», «Оформить» и т. д. лучше располагать в правой части, поскольку там они работают более эффективно. Взгляните на этот скриншот:
Если кнопка желаемого действия располагается в левой части, посетитель в первую очередь обращает внимание на нее, но не спешит нажимать до тех пор, пока не ознакомится со всеми доступными опциями. Пользователь смотрит на кнопку желаемого действия, после чего переключает взгляд на альтернативную кнопку. Чтобы юзер остановил свой выбор на варианте «Да», то должен вернутся к этой кнопке после изучения других вариантов.
Если кнопка желаемого действия располагается в правой части, пользователь сначала выбирает второстепенную опцию, после чего вновь переходит к необходимой вам.
Если вы разработали высококлассный, на ваш взгляд, дизайн кнопок для сайта, но положительной динамики нет, воспользуйтесь услугами профессионалов. Специалисты создадут качественный дизайн кнопок для сайта и помогут вам достичь высокой конверсии.