Как сделать — Кнопку на изображении
Узнайте, как добавить кнопку к изображению с помощью CSS.
Кнопка на изображении
Создать кнопку на изображении
Шаг 1) Добавить HTML:
Пример
Шаг 2) Добавить CSS:
Пример
/* Контейнер, необходимый для размещения кнопки. Отрегулируйте ширину по мере необходимости */
.container position: relative;
width: 50%;
>
/* Сделайте изображение отзывчивым */
.container img width: 100%;
height: auto;
>
/* Стиль кнопки и поместите его в середине контейнера/изображения */
.container .btn position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
>
.container .btn:hover background-color: black;
>
Мы только что запустили
SchoolsW3 видео
ВЫБОР ЦВЕТА
курс сегодня!
Сообщить об ошибке
Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:
Ваше предложение:
Спасибо Вам за то, что помогаете!
Ваше сообщение было отправлено в SchoolsW3.
ТОП Учебники
ТОП Справочники
ТОП Примеры
Получить сертификат
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.
Как сделать кнопку на сайте ссылкой
Существует два подхода к созданию кнопки на сайте в виде ссылки. Рассмотрим подробно каждый из них.
1. Кнопка в виде изображения
Это самый простой подход к созданию кнопки в виде ссылки на сайте. Для этого Вам понадобится всего лишь найти подходящую картинку для кнопки. Например, картинка с Вашей кнопкой называется button.jpg . Тогда, для создания ссылки код должен быть следующим:
body> . a href value">URL">img src value">button.jpg">a> . body>
Вот во что он превращается на странице сайта:
Кстати, для создания изображений для кнопок есть специальный сайт: http://dabuttonfactory.com/. Здесь можно бесплатно создать кнопку по Вашему вкусу (задать стиль, выбрать изображение, написать подходящий текст и т.п.).
2. Кнопка с помощью HTML тега
Этот вариант также является одним из методов создания кнопки в виде ссылки. Приведу элементарный пример кнопки созданной с помощью тега и :
body> . form> input type value">button" value value">Просто кнопка" onclick js">javascript:window.location='URL1'"/> input type value">button" value value">Ещё одна кнопка" onclick js">javascript:window.location='URL2'"/> form> . body>
Вот как это примерно будет выглядеть на странице:
Вместо URL1 и URL2 надо написать адреса страниц, куда необходимо осуществить переход. Если Вы хотите, чтобы ссылки открывались в новых вкладках (аналог атрибута target=»_blank» у тега a), то вместо onclick=»javascript:window.location=’. ‘» нужно прописать onclick=»javascript:window.open=’. ‘» (заменить location на open).
Я почти уверен, что Вам захочется оформить кнопку как-то по другому (под дизайн своего сайта). Для этого введем класс btn:
head> style> .btn < //Задание общего стиля для кнопки height:30px; border-color:#c2e254 #9bb838 #9bb838 #c2e254; border-style:solid; border-width:1px; background:#c2e254; cursor:pointer; > .btn:hover < //Стиль кнопки при новедении на него курсора border-color:#FFCC66 #FFFF99 #FFFF99 #FFCC66; border-style:solid; border-width:1px; background:#FFFF99; > .btn:focus < //Стиль кнопки, когда она в фокусе background:#ddd; border-color:#ddd #333 #333 #ddd; border-style:solid; border-width:1px; > .btn:active < //Стиль кнопки при нажатии background:#ff0000; border-color:#ddd #333 #333 #ddd; border-style:solid; border-width:1px; > style> head> body> form> input type value">button" value value">Просто кнопка" class value">btn" onclick js">javascript:window.location='URL1'"/> input type value">button" value value">Ещё одна кнопка" class value">btn" onclick js">javascript:window.location='URL2'"/> form> body>
После этого кнопка будет выглядеть следующим образом на странице:
Мы разобрали 2 подхода к решению задачи создания кнопки на сайте. Обычно все используют первый подход, поскольку заморачиваться с input никто не хочет. Более подробно об стилях можно прочитать в статье: тег .
Как сделать кнопку css с изображением
Тег (от англ. button — кнопка) создаёт на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью (с атрибутом type=»button | reset | submit» ).
В отличие от этого элемента, предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путём изменения шрифта, цвета фона, размеров и других параметров.
Демо¶
Синтаксис¶
button>. button> Закрывающий тег обязателен.
Атрибуты¶
Устанавливает, что кнопка получает фокус после загрузки страницы.
Блокирует доступ и изменение элемента.
Связывает между собой форму и кнопку.
Задаёт адрес, на который пересылаются данные формы при нажатии на кнопку.
Способ кодирования данных формы.
Указывает метод пересылки данных формы.
Отменяет проверку формы на корректность.
Открывает результат отправки формы в новом окне или фрейме.
Определяет уникальное имя кнопки.
Устанавливает тип кнопки: обычная; для отправки данных формы на сервер; для очистки формы.
Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.
Также для этого тега доступны универсальные атрибуты.
autofocus¶
Атрибут autofocus устанавливает, что кнопка получает фокус после загрузки страницы. Такую кнопку можно нажать сразу без перевода на неё фокуса, например, с помощью клавиатуры.
Синтаксис
button autofocus>. button> Значения
Значение по умолчанию
По умолчанию это значение выключено.
disabled¶
Блокирует доступ к кнопке и её изменение. Она в таком случае отображается серым цветом и недоступна для активации пользователем. Кроме того, такая кнопка не может получить фокус путём нажатия на клавишу Tab , мышью или другим способом. Тем не менее, такое состояние кнопки можно изменять через скрипты. Значение блокированной кнопки не передаётся на сервер.
Синтаксис
button disabled>. button> Значения
Значение по умолчанию
По умолчанию это значение выключено.
form¶
Связывает кнопку с формой по её идентификатору. Такая связь необходима в случае, когда кнопка не располагается внутри элемента , например, при создании её программно.
Синтаксис
button form="">. button> Значения
Идентификатор формы (значение атрибута id элемента ).
Значение по умолчанию
formaction¶
Определяет адрес обработчика формы — это программа, которая получает данные формы и производит с ними желаемые действия. Атрибут formaction по своему действию аналогичен атрибуту action элемента . Если одновременно указать action и formaction , то при нажатии на кнопку атрибут action игнорируется и данные пересылаются по адресу, указанному в formaction .
Синтаксис
button formaction="">. button> Значения
formenctype¶
Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла ( input type=»file» ). Этот атрибут по своему действию аналогичен атрибуту enctype элемента .
Синтаксис
1 2 3 4 5
button formenctype="application/x-www-form-urlencoded | multipart/form-data | text/plain" > . button> Значения
Вместо пробелов ставится + , символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя).
Данные не кодируются. Это значение применяется при отправке файлов.
Пробелы заменяются знаком + , буквы и другие символы не кодируются.
Значение по умолчанию
- application/x-www-form-urlencoded
formmethod¶
Атрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.
Синтаксис
button formmethod="get | post">. button> Значения
Различают два метода — GET и POST.
Этот метод предназначен для передачи данных формы непосредственно в адресной строке в виде пар « имя=значение », которые добавляются к адресу страницы после вопросительного знака и разделяются между собой амперсандом (символ & ). Полный адрес к примеру будет http://site.ru/doc/?name=Vasya&password=pup . Объём данных в методе ограничен 4 Кб.
Посылает на сервер данные в запросе браузера, объём пересылаемых данных ограничен лишь настройками сервера.
formnovalidate¶
Отменяет встроенную проверку данных введённых пользователем в форме на корректность при нажатии на кнопку. Такая проверка делается браузером автоматически при отправке формы на сервер для полей , , а также при наличии атрибута pattern или required у элемента .
Синтаксис
button formnovalidate>. button> Значения
Значение по умолчанию
По умолчанию этот атрибут выключен.
formtarget¶
Определяет имя фрейма, в которое будет загружаться результат, возвращаемый обработчиком формы, в виде HTML-документа.
Синтаксис
1 2 3 4 5
button formtarget=" | _blank | _self | _parent | _top" > . button> Значения
Загружает страницу в новую вкладку браузера.
Загружает страницу в текущую вкладку.
Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self .
Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self .
name¶
Определяет уникальное имя кнопки. Как правило, это имя используется при отправке значения кнопки на сервер или для доступа к кнопке через скрипты.
Синтаксис
button name="">. button> Значения
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в атрибуте name .
Значение по умолчанию
type¶
Определяет тип кнопки, который устанавливает её поведение в форме. По внешнему виду кнопки разного типа никак не различаются, но у каждой такой кнопки свои функции.
Синтаксис
button type="button | reset | submit">. button> Значения
Кнопка для очистки введённых данных формы и возвращения значений в первоначальное состояние.
Кнопка для отправки данных формы на сервер.
Открывает меню, созданное с помощью элемента .
Значение по умолчанию
value¶
Определяет значение кнопки, которое будет отправлено на сервер. На сервер отправляется пара « имя=значение », где имя задаётся атрибутом name элемента , а значение — атрибутом value . Значение может как совпадать с текстом на кнопке, так быть и самостоятельным. Также атрибут value применяется для доступа к данным через скрипты.
Синтаксис
button value="">. button> Значения
Любая текстовая строка.
Значение по умолчанию
Спецификации¶
- WHATWG HTML Living Standard
- HTML5
- HTML 4.01 Specification
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
html> head> meta charset="utf-8" /> title>BUTTONtitle> head> body> p style="text-align: center"> button>Кнопка с текстомbutton> button> img src="image/umbrella.gif" alt="Зонтик" style="vertical-align: middle" /> Кнопка с рисунком button> p> body> html> Как добавить HTML-кнопку на сайт: 3 способа + легкий вариант
Так как добавить HTML-кнопку на сайт можно разными способами, у многих с этим возникают трудности. Допустимо использовать специальные теги, такие как , , . Можно к кнопкам прикручивать ссылки, чтобы они вели на нужные вам страницы.
А можно поступить еще проще — воспользоваться готовыми виджетами. Мультикнопка будет уместна практически в любых целях — от отправки заявок до покупки билетов и перехода на заданные страницы. Какой способ добавления кнопки на сайт выберите вы?
3 способа добавить HTML-кнопку на сайт
Кнопки на страницах сайтов — это наиболее понятный элемент взаимодействия для пользователей. В зависимости от того, как они оформлены, посетителю сразу становится понятно, что на них следует нажимать для получения нужной информации. Такие элементы, благодаря их интуитивности, часто устанавливают в разных формах (обычно для того, чтобы их отправить или очистить).
Рассмотрим, как добавить HTML-кнопку на сайт разными способами:
- используя тег& ; ;
- используя тег& ; ;
- устанавливая ссылку (тег& ; ) и с помощью CSS-свойств.
Добавление HTML-кнопки на сайт с помощью тега
Различают две разновидности кнопок, для создания которых используется тег& ;button. Это элемент интерфейса для очистки полей форм — reset, а также кнопка, функционал которой определяет соответствующий скрипт.
HTML-кнопку& ;& ;нельзя считать ссылкой. Чтобы установить переход с этого элемента на нужную страницу, применяется тег& ; (кнопке можно придать определенный стиль, используя таблицы стилей CSS).
Содержание кнопки& ;& ;может определять текстовый файл или другие HTML-теги (к примеру, с помощью тега& ;,& ;расположенного внутри кнопки, можно установить кнопку «изображение»).
С помощью элемента интерфейса& ; или тега& ; можно осуществлять отправку форм HTML. В этом случае нужна кнопка типа& ;submit, которая включена в тег HTML-кода формы& ;& ;или привязана к форме с использованием атрибута& ;form.
Пример 2. Меняется кнопка при наведении курсора:
HTML-кнопка на сайт с помощью других тегов
Синтаксис тега& ; :
В поле& ;type& ;следует указать атрибут& ;button& ;или& ;submit: 
Какие отличия в разных вариантах указания атрибута& ;кнопки type? submit& ;— указывается, чтобы реализовать отправку значений из формы (управление передается URL, который прописан в action-атрибуте формы). reset& ;— используется для очистки всех полей формы. button& ;— применяется, если нужно обеспечить обработку определенных действий при нажатии кнопки (не путайте с атрибутом submit!). В данном случае нет необходимости приводить пример, поскольку кнопка будет выглядеть так же, как и в приведенном ранее случае. Отличаются данные варианты только возможностями. При использовании тега появляются более широкие возможности, чем в случае с (но при этом вариант с встречается чаще).
и
Синтаксис следующий:
» width=»590″ height=»132″ />
Добавление HTML-кнопки на сайт, которая действует как ссылка
Существуют разные варианты создания HTML-кодов кнопок, действующих как стандартная ссылка (при нажатии пользователь перенаправляется на страницу, адрес которой добавлен в тег).
Вы можете добавить такие кнопки описанными ниже методами.
Добавьте строчный& ;onclick& ;event
Вариант 1: к HTML-тегу & ;внутри элемента HTML& ; К примеру: 
Обратите внимание, что кнопка в этом случае может не работать, если она расположена внутри тега . Вариант 2: к& ;тегу & ;внутри элемента HTML& ; К примеру: 
Обратите внимание, что ссылка не будет работать, если не используется JavaScript, так как поисковик может ее игнорировать.
Используйте атрибут& ;action& ;или& ;formaction& ;внутри элемента
Вариант 1: атрибут& ;action К примеру: 
Чтобы ссылка открывалась в отдельной вкладке, нужно добавить в код атрибут& ;target=»_blank». К примеру: 
В данном примере отсутствуют формы и их данные, поэтому с точки зрения семантики он не имеет смысла, но подобная разметка допускается. Вариант 2: атрибут HTML5& ;formaction. К примеру: 
Атрибут& ;formaction& ;следует устанавливать только для HTML-кода кнопок с type=” submit”. Обратите внимание, что такая разметка будет слабо поддерживаться старыми браузерами, поскольку атрибут formaction является HTML5-specific.
Добавьте ссылку в стиле HTML-кнопки (используя CSS)
К примеру: Из-за сложного стилевого оформления такой вариант не будет работать в ряде браузеров.
Готовый виджет кнопки для сайта
Существуют мультикнопки, с помощью которых пользователь может совершить несколько действий. К примеру, одна кнопка дает возможность скачать код цифрового товара, выбрать вариант связи или сделать переход на страницу с акцией.
Какие преимущества можно получить, если добавить код мультикнопки на сайт?
- В 2,4 раза повысится численность обращений с сайта.
- Увеличится объем продаж за счет предоставления посетителям информации об акционных предложениях.
- Появится возможность быстро продать некоторые виды товаров или услуг.
- Посетители будут более лояльными под влиянием возможности выбора способов связи.
- Появится возможность для формирования базы клиентов после продвижения подписки на канал Telegram или страничку в социальных сетях.
Особенности работы мультикнопки:
Устанавливаете код на сайт
Появляется красивая кнопка
Пользователь при нажатии на кнопку сможет выбрать оптимальный вариант связи или будет перенаправлен на страницу акции.
Клиент связывается с вами
Консультанты компании отвечают на обращения клиентов по телефону, в социальных сетях или в личном кабинете.
Клиент покупает
Покупатель удовлетворен, так как нашел то, что ему нужно, а вы получаете продажу и рост клиентской базы!
Внешний вид мультикнопки:
По желанию можно добавить цвет кнопки, подобрать иконку или установить свое изображение.
Как могут использоваться кнопки?
Вызвать обратный звонок или чат
Скачать приложение
Открыть страницу
Подписка на канал Telegram и другие соцсети
Купить билет, получить промокод и скачать книгу
Еще больше возможностей
Опытный программист поможет добавить нужные скрипты при нажатии кнопки. Это могут быть всплывающие окна, разные виджеты и другие объекты, прописанные в JavaScript.
Как было отмечено ранее, кнопки относят к наиболее понятным элементам веб-страниц для пользователей. Их форма и внешний вид сразу подсказывают посетителю сайта, что кнопку можно нажать. Такие элементы интерфейса часто устанавливают для отправки и очистки различных форм. Добавить HTML-код кнопки можно различными способами, но, чтобы обеспечить эффективность такого элемента, следует выбрать оптимальный вариант установки кода.