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

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

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

• Для чего нужны кнопки и какие функции они выполняют
• Какие бывают кнопки и в чем их различия
• Как сделать кнопку в 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=’https://example.com’;»></button>

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

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

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

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

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

<a class=»button» href=»https://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»);
});
});

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

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