Кнопка изображение нажатие html

Как сделать кнопку в html css? Красивые кнопки для сайта с примерами

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

type: button | submit | reset

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

Несмотря на слухи, которые ходят в интернете, о том, что тег должен располагаться только внутри тегов , на самом деле это не так 🙂 Если вдруг по какой-то причине Вам нужно или хочется поместить свою кнопку вне формы, которую она должна отправлять/сбрасывать/еще-что-то-делать, просто используйте атрибут 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)

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

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

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

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

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

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

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

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

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

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

Для вывода иконок в кнопках, да и, в общем-то, везде я использую замечательный шрифт 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

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

.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

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

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

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

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

#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

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

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

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

Источник

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

Для создания кнопок используется тег . Внутри него размещается текст или изображение, которые будут отображаться на кнопке. Например:

Чтобы задать кнопке имя, тип или состояние, нужно добавить атрибуты: name , disabled и type .

Атрибут name задаёт имя кнопки. Может использоваться для идентификации элемента в скриптах.

Атрибут disabled блокирует доступ к кнопке.

Атрибут type определяет тип кнопки. Ему задают одно из трёх значений:

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

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

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

А как же input?

Создать кнопку можно и с помощью тега , если указать ему тип button :

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

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

Посмотрим три способа создания кнопки с иконкой.

С помощью тега

Способ подойдёт для контентных изображений.

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

Добавить инлайн SVG в разметку

Способ подойдёт, если изображение меняет состояния, как здесь:

Код простой: пишем тег и добавляем в него код SVG-изображения.

Вставить фоном в CSS

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

Как добавить иконку в кнопку:

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

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

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

Для создания кнопки с картинкой в HTML можно использовать тег и атрибут background-image в CSS. Вот пример кода:

.image-button  width: 100px; height: 50px; border: none; background-image: url('path/to/image.jpg'); background-size: cover; > 

В данном примере мы создаем кнопку с классом «image-button». Задаем ей ширину и высоту, убираем границу и задаем фоновую картинку с помощью атрибута background-image . Картинка будет растянута на всю площадь кнопки благодаря свойству background-size: cover; .

Также можно добавить эффекты при наведении или клике на кнопку с помощью псевдоклассов :hover и :active:

.image-button:hover  opacity: 0.8; > .image-button:active  transform: scale(0.95); > 

В данном примере при наведении на кнопку уменьшается прозрачность до 80% с помощью свойства opacity , а при клике на кнопку она уменьшается на 5% с помощью свойства transform: scale(0.95) .

Источник