Кнопка для сайта как нас найти

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

Поиск позволяет решать следующие задачи:

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

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

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

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

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

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

   Слишком маленькое поле ввода на сайте по продаже сумок:

   

   Достаточно места для запроса на сайте спорттоваров:

   

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

   Кнопка на сайте типографии не сразу заметна и неудобна для клика:

   

   На сайте книжного интернет-магазине располагается заметная кнопка, по которой легко кликнуть:

   

3. Выбор раздела поиска. Если у вас много разделов, то лучше добавить возможность выбора, например, отделить поиск по каталогу и блогу.

   Пример удобной кнопки выбора категории товаров с сайта детских товаров:

   

Где лучше разместить форму поиска

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

Но также обсудим другие варианты:

Главное меню. Подходит, если в меню немного ссылок и есть достаточно места для формы.

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

На примере сайта по продаже бытовой химии видно, что поле ввода слишком короткое:

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

Пример размещения формы в подвале сайта:

Другие варианты. Здесь пользователи не ожидают увидеть форму поиска и могут ее пропустить. Также будет сложно расположить форму в одном и том же месте на всех страницах сайта.

Пример размещения формы поиска в основной части страницы на сайте по продаже электронных компонентов:

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

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

Лучше всего показать результаты на отдельной странице, при этом:

1. Сохраните введенный запрос. Пользователь должен видеть, что он ввел ранее.

   На сайте по продаже одежды и обуви исчезнувший запрос только дезориентирует:

   

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

   

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

   Над запросом на сайте туристического снаряжения явно не хватает формы поиска:

   

   На странице сайта по продаже сумок удобно вводить следующий запрос:

   

3. Указывайте количество найденных результатов. Пользователь должен сразу видеть, сколько вариантов у него есть.

   Не ясно, сколько найдено подходящих вариантов. Пример взят с сайта интернет-магазина мебели:

   

   Сразу видно количество найденных статей на сайте юридических услуг:

   

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

   Несмотря на разделительные линии, однотонный текст сливается (пример взят с сайта по продаже систем безопасности):

   

   Результаты хорошо отделены друг от друга на сайте строительного центра:

   

5. Не оставляйте страницу результатов пустой. Предложите популярные товары или список статей, возможно, они заинтересуют пользователя.

   Такая страница только теряет клиентов. Пример с сайта продажи одежды:

   

   На сайте товаров для дома грамотно выводятся похожие товары:

   

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

   Удобно, когда пользователю подсказывают категорию и выводят подходящий товар.

   Пример от интернет-магазина товаров для дома и отдыха:

   

7. На странице результатов сохраняйте основные элементы навигации. Не должно происходить смены адреса или внешнего вида страницы.

   Такие страницы результатов только дезориентируют пользователей. Пример с сайта по продаже установок альтернативной энергии:

   

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

Выделим основные способы и разберем их плюсы и минусы:

1. Самописный поиск

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

   – Ограничения: особенности выбранной cms, дороговизна работы специалистов и трата времени на разработку. У многих cms есть встроенные средства, что немного ускоряет процесс настройки поиска.

2. Поиск по сайту с помощью сервисов Яндекс.Поиск и Google Custom Search

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

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

3. Использование других поисковых систем (Sphinx, Apache Solr, Xapian и др.).

   + Большой набор функций, которые помогут сделать поиск более удобным.

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

Какой вариант лучше, решать только вам =) Мы же для начала рекомендуем настроить сервисы от Яндекса или Google, так как они бесплатны и наиболее распространены. Позже, если возникнет необходимость, можно перейти на другие продукты или разработать свой, уже точно зная, какие функции вам нужны.

Заключение

Придерживайтесь данных рекомендаций и поиск на сайте станет надежным инструментом в работе с клиентами. Если же вы еще не определились, нужен ли вашему сайту поиск, то пишите в комментариях, подскажем =).

Если возникли вопросы с настройкой поиска по сайту – озвучьте пожелания, поможем с реализацией.

Хотите знать как сделать красивую HMML кнопку для сайта? Тогда вы попали по адресу. В данной статье я представлю вам 24 различных вариантов создания красивых и стильных кнопок для вашего сайта.

Ниже представлены варианты HTML кода кнопок для вашего сайта:

Как сделать кнопку на сайте

Кнопка для сайта 1 вариант

Это наиболее простой вариант кнопки с изменением цвета при наведении курсора на кнопку.

Кнопка для сайта 2 вариант

Эта кнопка при наведении на нее визуально вдавливается.

Кнопка для сайта 3 вариант

При наведении кнопка меняет свой цвет и появляются движущиеся рамки. 

Кнопка для сайта 4 вариант

Кнопка для сайта 5 вариант

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

Кнопка для сайта 6 вариант

Вариант кнопки с движущейся тенью при наведении.

Кнопка для сайта 7 вариант

Еще одна кнопка с красивым визуальным эффектом при наведении курсора. Движущиеся рамки при наведении.

Кнопка для сайта 8 вариант

Вариант похожий на предыдущий но кнопка имеет другое цветовое исполнение.

Кнопка для сайта 9 вариант

Кнопка с эффектом поворота заливки при наведении.

Кнопка для сайта 10 вариант

Еще один интересный эффект при наведении на кнопку

Кнопка для сайта 11 вариант

Эффект блика на кнопке с использование CSS

Кнопка для сайта 12 вариант

3D кнопка с эффектом разворота по вертикали.

Кнопка для сайта 13 вариант

Кнопка с вертикальным бликом при наведении.

Кнопка для сайта 14 вариант

Изменение цвета кнопки при наведении. Эффект скольжения цвета снизу вверх.

Кнопка для сайта 15 вариант

Кнопка с изменение цвета но только теперь со скольжение по горизонтали.

Кнопка для сайта 16 вариант

Ещё одна кнопка с движение тени при наведении.

Редактирование Размеров и геометрии кнопок.

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

Рассмотрим подобный случай на примере первой кнопки.

Вам нужно найти в css коде подобное:

 width: 130px;
  height: 40px;

Это фрагмент кода отвечающий за размер кнопки. Давайте сделаем ее немного шире и длиннее для этого изменим количество пикселей вот так:

 width: 150px;
  height: 60px;

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

border-radius: 5px;

и поменять его, допусти на значение 30px 

И вот что у нас получилось

Кнопка для сайта 17 вариант с (закруглением)

Кнопки с необычным дизайном

Кнопка для сайта 18 вариант (купить)

Кнопка купить как в Эльдорадо

Кнопка для сайта 19 вариант (скачать)

Кнопка скачать с эффектом подсвечивания.

Кнопка для сайта 20 вариант (как из стекла)

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

Кнопка для сайта 21 вариант (объемная)

Кнопка для сайта 22 вариант (3D)

Интересный вариант 3D CSS кнопки

Кнопка для сайта 23 вариант

Кнопка с бегущими полосами при наведении

Кнопка для сайта 24 вариант

Css код кнопки с появление еще одной окантовки при наведении курсора

Код кнопки расчета с ссылкой на whatsapp

По просьбе человека оставившего комментарий

*Без корректного номера внесенного в код ссылка работать не будет

Заключение:

Вот только небольшой перечень Html и css кодов кнопок на сайт. 

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

В общем дерзайте. Если будут вопросы пишите в коментариях.

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

Итак из этой статьи вы узнаете: 

• Для чего нужны кнопки и какие функции они выполняют
• Какие бывают кнопки и в чем их различия
• Как сделать кнопку в HTML
• Как сделать красивую кнопку в HTML и CSS

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

Но давайте по порядку… 

Для чего нужны кнопки на сайте?

Ответ напрашивается сам собой: “Для того, чтобы их нажимали!”. И, действительно, выделяющаяся симпатичная кнопка привлекает гораздо больше внимания чем тусклая и унылая ссылка. С другой стороны, если вся страница заполнена разномастными кнопками, которые, переливаясь и моргая, требуют внимания пользователя, он, скорее всего, не поняв, что от него требуется, не нажмет ни на одну и просто закроет вкладку.

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

Какие бывают кнопки?

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

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

Кнопки-действия нужны для совершения какого-либо действия на странице (отправка формы, открытие модального окна и т.д.). Для этого можно использовать теги <input> или <button>. Я предпочитаю второй вариант, т.к. он гораздо более гибкий в настройке. 

Хотя оба этих типа могут выглядеть одинаково (при помощи CSS), принципиальное их отличие в том, что важнейшим атрибутом тега <a> является href (цель ссылки), без которого этот тег даже не воспринимается браузером как ссылка и курсор при наведении на него не меняется на pointer. Это поведение, конечно, можно изменить при помощи “костылей” 

a {
  cursor: pointer;
}

или

<a href="#">Кнопка</a>

В то же время атрибут href является невалидным для тега <button>, поэтому его не стоит использовать в качестве кнопки-ссылки. Опять же, можно сделать кнопку ссылкой, придумав какие-нибудь “костыли” типа

<button onClick="javascript:window.location.href='http://example.com';"></button>

Но зачем это нужно. Все гораздо проще и понятнее.

Если кнопка нужна для перехода на страницу – используем <a>, во всех остальных случаях – <button>

Как сделать кнопку в HTML?

Итак, как я уже сказал, кнопки можно добавлять при помощи трех тегов <a>, <button> и <input>. Каждый из этих тегов имеет свои особенности и атрибуты и используется для разных целей.

Сделать кнопку-ссылку при помощи тега <a>, по сути, сводится к описанию его стилей в CSS. О стилях поговорим чуть позже.

<a class="button" href="http://example.com" target="_blank">Перейти на сайт</a>

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

<button class="button">Выполнить действие</button>

Основными атрибутами таких кнопок являются:

type: button | submit | reset

Тип кнопки. Это необязательный параметр, и его можно пропустить. Если кнопка находится внутри формы и атрибут type отсутствует, браузер посчитает, что тип кнопки – submit и попытается отправить форму обработчику.

form

Несмотря на слухи, которые ходят в интернете, о том, что тег <button> должен располагаться только внутри тегов <form>, на самом деле это не так 🙂 Если вдруг по какой-то причине Вам нужно или хочется поместить свою кнопку вне формы, которую она должна отправлять/сбрасывать/еще-что-то-делать, просто используйте атрибут form со значением соответствующим атрибуту id этой формы.

Кроме того, у тега button могут быть следующие атрибуты:

• autofocus – Автоматически устанавливает фокус браузера на кнопке при загрузке страницы
• disabled – Кнопка заблокирована и нажатие на нее не выполняет никаких действий
• formaction (только для типа submit) – адрес обработчика формы, на который отправляются данные из формы
• formenctype (только для типа submit) – Тип отправляемых данных. Может быть application/x-www-form-urlencoded, multipart/form-data, text/plain
• formmethod (только для типа submit) – HTTP-метод, при помощи которого пересылаются данные. Может быть get или post
• formnovalidate (только для типа submit) – Отключает автоматическую валидацию введенных данных
• formtarget (только для типа submit) – Указывает на то, как выводится результат обработки формы. Может быть _blank, _self, _parent, _top или значение атрибута name фрейма
• name – Имя кнопки (можно использовать если, например, в форме есть несколько кнопок, которые ее отправляют, и обработчику нужно знать, какая из них нажата)
• value – Значение кнопки (смысл примерно тот же, что и с name)

Совет: используйте только быстрый и надёжный хостинг для своих сайтов, например Beget.com

Как сделать красивую кнопку в HTML и CSS?

У каждого из нас свое представление о красоте: кто-то считает красивым закат на берегу моря, а кто-то – Ниссан Жук. О вкусах, как говорится, не спорят.

В моем представлении красивая кнопка – это кнопка, которая обладает следующими качествами:

Является интерактивной (т.е. реагирует на взаимодействие с ней пользователем). Отличительной чертой кнопок, является то, что их можно нажимать, следовательно у кнопки должно быть несколько состояний: дефолтное (состояние “покоя”), нажатое и “ховер” (при наведение курсора)

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

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

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

Если вы хотите узнать как сделать кнопку объемной или с эффектом “стекляшечности”,  как сделать картинку кнопкой и т.д. – почитайте статьи по дизайну интерфейсов за 2005-2009 гг. 🙂

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

Итак, давайте для начала сделаем две обычные кнопки, одна из которых должна открывать модальное окно (кнопка-действие – <button>) с формой для входа, а вторая – вести на страницу регистрации (кнопка-ссылка – <a>). При этом обе кнопки будут выполнены в одной стилистике.

<button id="login" class="button blue">
  <i class="fa fa-unlock"></i>
  <span>Войти</span>
</button>

<a id="register" class="button purple" href="/register">
  <i class="fa fa-user-plus"></i>
  <span>Зарегистрироваться</span>
</a>

Для вывода иконок в кнопках, да и, в общем-то, везде я использую замечательный шрифт FontAwesome, а для текста – бесплатный шрифт Roboto, с которым одинаково хорошо смотрятся как кириллические, так и латинские символы. 

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css');
@import url('https://fonts.googleapis.com/css?family=Roboto');

.button {
  /* Сбрасываем дефолтные стили */
  border: none;
  outline: none;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-size: 16px;
  /* Можно также использовать любые встроенные и кастомные шрифты, например, отсюда  */
  font-family: Roboto, Verdana, Tahoma, sans;
  /* Тут можно поэкспериментировать */
  padding: 12px 16px;
  border-radius: 100px;
  color: #fff;
}
.button i {
  margin-right: 4px;
}
.button + .button {
  margin-left: 6px;
}
.button.blue {
  background: #2196F3;
}
.button.purple {
  background: #9b59b6;
}

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

.button:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.button:hover.blue {
  background: #39a1f4;
}
.button:hover.purple {
  background: #a66bbe;
}
.button:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.button:active.blue {
  background: #0d8aee;
}
.button:active.purple {
  background: #8f4bab;
}

Вот и все! Две симпатичные кнопки готовы.

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

А теперь обещанный бонус для тех кто дочитал этот пост до конца.

Красивая анимированная кнопка наверх для сайта

HTML

<div id="scroll-top">
<button><span data-hover="Наверх"><i class="fa fa-arrow-up"></i></span></button>
</div>

CSS

#scroll-top {
  position: fixed;
  bottom: 48px;
  right: 48px;
}

#scroll-top button {
  position: relative;
  overflow: hidden;
  height: 48px;
  width: 48px;
  border: none;
  outline: none;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.3);
  font-size: 16px;
  background: #21c984;
  transition: width 0.5s;
  border-radius: 100px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

#scroll-top button span {
  display: inline-block;
  transition: opacity 0.3s ease 0s, transform 0.5s ease 0s;
  line-height: 48px;
  font-size: 20px;
  width: 100%;
}

#scroll-top button span::before {
  width: 100%;
  position: absolute;
  left: 0px;
  top: 200%;
  opacity: 0;
  content: attr(data-hover);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
}

#scroll-top:hover button {
  width: 120px;
  background: #9b59b6;
}

#scroll-top:hover button span {
  -webkit-transform: translateY(-200%);
  -moz-transform: translateY(-200%);
  transform: translateY(-200%);
}

#scroll-top:hover button span:before {
  opacity: 1;
}

#scroll-top button:active {
  background: #21c984;
}

JS (jQuery)

jQuery(document).ready(function($) {
  $("#scroll-top > button").on("click", function(e) {
    var body = $("html, body");
    body.stop().animate({ scrollTop: 0 }, 500, "swing");
  });
});

В итоге должно получиться что-то похожее на это 😉

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