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

Тег HTML кнопка

Тег в HTML используется для создания кликабельной кнопки.

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

HTML кнопка не является ссылкой. Для создания ссылки в виде кнопки используйте тег , стилизованный с помощью таблиц стилей CSS.

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

Тег HTML является элементом формы. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.

Синтаксис

контент кнопки

Примеры использования кнопки

Стандартная HTML кнопка

Показать еще
HTML код стандартной кнопки

Показать еще

Кнопка button стилизованная с помощью CSS

Запустить скрипт
HTML код стилизованной кнопки

  
button[name="run_script"] < 
border: none; 
border-radius: 7px; 
padding: 10px 25px; 
background: #ff9900; 
cursor: pointer; 
text-transform: uppercase; 
font-weight: bold; 
color: white; 
> 
button[name="run_script"]:hover < 
background: #ff6600; 
> 
Запустить скрипт 

Кнопка — картинка с помощью тега button

HTML код кнопки — картинки

Кнопка в HTML коде страницы

В примере показано использование кнопки в качестве кнопки отправки формы (тип submit).

HTML код примера

 
 
 
 
 
 
 
Отправить 

Кнопки button и input в чем отличие?

Разница между кнопкой, созданной с помощью тега и кнопкой, созданной тегом input в механизме наполнения кнопки контентом. Внутри тега кнопки button вы можете размещать HTML теги, тем самым расширяется возможность по созданию визуальной составляющей кнопки. В случае с input , придется ограничиться использованием текста через атрибут value или использовать изображение в input с атрибутом type=»image» . Возможности использовать HTML теги внутри в кнопке input нет.

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

Поддержка браузерами

Тег
	Да	Да	Да	Да	Да

Атрибуты тега button

Логический атрибут. Если указан, при загрузке документа фокус будет переведен на кнопку.

Логический атрибут. Если указан, делает кнопку неактивной (на кнопку нельзя будет нажать).

Указывает на форму, к которой относится кнопка. Используется, если кнопка применяется для отправки или очистки формы и при этом находится вне HTML кода формы.

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

URL адрес документа — обработчика формы. Используется для кнопок с типом submit. Если указан, форма будет отправлена по URL адресу, указанному в этом атрибуте, игнорируя атрибут action тега .

Способ кодирования информации. Используется для кнопок с типом submit.

Указывает как именно нужно кодировать информацию при отправке на сервер, вызванной нажатием кнопки, содержащей этот атрибут.

• application/x-www-form-urlencoded — все символы кодируются перед отправкой в шестнадцатеричные значения (HEX) ASCII, пробелы заменяются на «+». Значение по умолчанию;
• multipart/form-data — символы не кодируются. Значение обязательно нужно использовать в форме с полем input type=»file» (при использовании файлов в форме);
• text/plain — символы не кодируются, пробелы заменяются символом «+».

Атрибут используется только в случае отправки формы методом POST.

Этот атрибут переопределяет значение, указанное в атрибуте enctype тега .

HTTP метод передачи данных формы.

• GET — передача данных в URL с помощью пар имя-значение (name-value). Значение по умолчанию.
• POST — передача данных в теле HTTP запроса.

Используется только для кнопок с типом submit.

Этот атрибут переопределяет значение, указанное в атрибуте method тега .

Логический атрибут. Браузер не будет выполнять проверку правильности заполнения формы перед отправкой, вызванной нажатием кнопки, содержащей этот атрибут. По умолчанию браузер проверяет наличие значения в обязательных полях (required), соответствие значений стандарту (например, для поля с типом email) и т.п.

Этот атрибут переопределяет значение, указанное в атрибуте novalidate тега .

Используется для кнопок с типом submit.

Определяет где будет открыт результат обработки формы (ответ сервера), при отправке по нажатию кнопки с этим атрибутом:

• _blank — в новой вкладке или окне;
• _parent — в родительском окне;
• _self — в текущем окне (используется по умолчанию);
• _top — на весь экран.

Этот атрибут переопределяет значение, указанное в атрибуте target тега .

Имя кнопки. Используется при передаче данных формы на сервер. Значение (value) кнопки будет передано в переменной, имеющей имя, указанное в этом атрибуте.

• button — простая кликабельная кнопка, действие по нажатию которой определяется скриптом;
• reset — кнопка очистки полей формы. Стирает информацию введенную пользователем в поля связанной с кнопкой формы;
• submit — кнопка отправки формы. Выполняет отправку связанной формы на сервер.

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

Значение кнопки, которое будет отправлено на сервер.

На сервер отправляется переменная, имеющая название, указанное в атрибуте name кнопки и значение, указанное в этом атрибуте.

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

by Lebedev

Оцените, насколько полезна эта страница
Эти материалы могут быть вам полезны
Комментарии
18 апреля 2020 г.
Jelezoglo Vasili Vasili
Like!
Спасибо за помощь и информацию.
26 августа 2021 г.
15 марта 2022 г.

Не понятно в какую часть кодов ставить ссылку для кнопок и не понятно с формы где накапливаются данные пользователей, а если они отправляются на почту, то куда email получателя добавлять

17 апреля 2022 г.

Дмитрий, кнопка и ссылка в HTML — это разные вещи. Кнопка не является ссылкой. Если вам нужно создать гиперссылку, используйте тег . Вы можете придать тегу любые стили, в том числе и вид кнопки, с помощью CSS.

В каком-то смысле из кнопки с типом type=»submit» можно сделать ссылку. Для этого нужно определить атрибут formaction у такой кнопки, вписав как значение целевой URL.

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

Никакого сохранения данных или отправки на email HTML форма сама по себе не делает. В свою очередь, это может сделать сервер. Например, в случае с PHP сервером, данные попадут в массивы $_GET и/или $_POST, после чего их можно будет сохранить в базу данных либо отправить на email средствами PHP.

22 мая 2022 г.

А можно ли как-то сделать так, чтобы при нажатии кнопки выполнялся код, написанный на Python и результат выполнения кода выводился в текстовое поле?

22 мая 2022 г.

Юра, можно привязать к нажатию HTML кнопки button отправку AJAX запроса с помощью JavaScript. Далее на сервере, работающим с Python, обработать запрос и прислать в ответ на AJAX запрос информацию, которую с помощью JavaScript вставить в текстовое поле.

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

30.06.2023

Всем привет! Как сделать кнопку в CSS? Точнее не так, как сделать КАЧЕСТВЕННУЮ кнопку в CSS? Которая бы смотрелась одинаково хорошо во всех браузерах? В этой статье (являющейся переводом статьи Ахмада Шадида) я постараюсь ответить на этот вопрос.

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

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

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

Кнопки или ссылки?

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

Ссылка — элемент, семантически предназначенный для перевода пользователя на другую страницу. Кнопка — элемент, предназначенный для нажатия на неё. А еще кнопки чуть проще стилизовать.

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

• автоматическое центрирование текста
• возможность более корректно размещать SVG иконки внутри
• возможность задать метод для отправки и включить/отключить валидацию формы (HTML5).

В HTML формах использование кнопки вообще является обязательным.

Но расмотрим подробнее стилизацию кнопок в CSS.

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

Делаем кнопку универсальной для всех браузеров и систем

.c-button < -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; // сброс толщины границ border-radius: 0; // сброс скругленных границ background: #ccc; // универсальный фоновый цвет >

Задаем основную стилизацию

Основная стилизация кнопки подразумевает задание:

• внутренних отступов (важный параметр)
• параметров шрифта
• границ
• цвета фона
• минимальной ширины (важный параметр)

.c-button < -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; // сброс толщины границ border-radius: 5px; // установка скругления границ border-radius: 0; // сброс скругленных границ background: #4676D7; // фоновый цвет padding: 8px 16px; // отступы min-width: 100px; // минимальная ширина font-family: inherit; // наследуем шрифт color: #fff; // цвет шрифта font-size: 1rem; // задаем размер шрифта >

Задаем стили для focus и hover эффектов

Focus — эффект, возникающий, например, при переключении по элементам на сайте с помощью клавиши Tab.
Hover — эффект, возникающий при наведении курсора мыши на кнопку.

Поведение кнопки у обоих эффектов задается псевдоселекторами :focus и :hover соответственно.

При работе с псевдоселекторами :hover лучше помещать ПЕРЕД :focus, во избежание переопределения стилей.

.c-button < -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; // сброс толщины границ border-radius: 5px; // установка скругления границ border-radius: 0; // сброс скругленных границ background: #4676D7; // фоновый цвет padding: 8px 16px; // отступы min-width: 100px; // минимальная ширина font-family: inherit; // наследуем шрифт color: #fff; // цвет шрифта font-size: 1rem; // задаем размер шрифта transition: all .3s ease-in // задаем плавный переход >.c-button:hover < cursor: pointer; // задаем тип курсора background: #1d49aa; >.c-button:focus

Задаем стиль для отключенной кнопки

Задание стиля для отключенной кнопки (с атрибутом disabled) лучше также предусмотреть заранее.

.c-button < -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; // сброс толщины границ border-radius: 5px; // установка скругления границ border-radius: 0; // сброс скругленных границ background: #4676D7; // фоновый цвет padding: 8px 16px; // отступы min-width: 100px; // минимальная ширина font-family: inherit; // наследуем шрифт color: #fff; // цвет шрифта font-size: 1rem; // задаем размер шрифта >.c-button:hover < cursor: pointer; // задаем тип курсора background: #1d49aa; >.c-button:focus < outline: none; box-shadow: 0 0 0 4px #cbd6ee; >.с-button::-moz-focus-inner < border: none; // фикс границы для Firefox >.c-button[disabled]

Продвинутые технологии

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

Кнопки с иконками достаточно популярны на сайтах. Чтобы сделать кнопку в CSS с иконкой, нам понадобится:

• сама иконка в формате svg (а лучше готовый svg спрайт)
• кнопка

Код кнопки с иконкой

  Add to fav 

Рассмотрим подробнее конструкцию:

• svg иконка с атрибутом aria-hidden позволяет не отображать ее при прослушивании содержимого страницы с помощью экранного диктора
• span позволяет отключить текст у кнопки на разных размерах экрана или на каких-либо конкретных устройствах

Пример стилизации такой кнопки с иконкой:

.c-button svg < display: inline-block; vertical-align: middle; fill: #fff; width: 20px; height: 20px; margin-right: 0.25rem; // задаем отступ в относительных размерах >@media screen and (max-width: 576px) < .c-button__span < display: none; >>

Как сделать кнопку с текстом только для читалок экрана

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

.sr-only

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

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

 Subscribe to our newsletter 240K+ subscribers 

Как сделать кнопку с градиентом

Чтобы сделать кнопку с градиентом, нужно записать в CSS примерно следующее

.c-button < display: inline-block; color: #fff; background: linear-gradient(to bottom, #00acee, #0072e0); // градиент font-size: 18px; font-weight: 500; padding: 12px 26px; border-radius: 100px; /* A transparent border added for the outline button variation */ border: 3px solid transparent; // убираем границы text-decoration: none; background-origin: border-box; // чтобы градиент распределялся равномерно вне зависимости от высоты кнопки >.c-button--outline

Заключение

В этой небольшой статье я постарался дать ответ на вопрос «как сделать кнопку в CSS». Я специально не стал включать сюда некоторые дополнительные пункты из статьи-оригинала, чтобы не утомлять читателей дополнительным контентом.

С вами был webmaster_zotov, до новых встреч!

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

Чтобы сделать кнопку неактивной, нужно добавить ей атрибут disabled :

// создаем кнопку const btn = document.createElement('button'); // добавляем ей атрибут disabled btn.setAttribute('disabled', ''); // добавляем надпись btn.textContent = 'Неактивная кнопка' // добавляем кнопку на страницу document.body.append(btn); 

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

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

Кнопка в письме — один из важных элементов email-рассылки, который украшает письмо и помогает сделать письмо более эффективным. Без призыва к действию уже трудно представить проморассылки и транзакционные письма — они просто необходимы, чтобы захватить внимание клиентов и побудить их купить/почитать/перейти на сайт и т.д.

Для продвинутых пользователей, наверное, проще сверстать кнопку с нуля, чем брать уже готовую и заморачиваться над изменениями. Мы разобрали популярные практики, как можно сделать кнопку СТА разными способами.

Краткое содержание статьи, как сверстать кнопку:

1. Кнопки в виде картинок

Если вы не хотите мучиться с вёрсткой или дизайн вашего письма требует уникальных кнопок со спец. эффектами, такими как: тени, свечения, анимация, градиенты или нестандартные шрифты — вы всегда сможете использовать кнопку нарисованную в графическом редакторе. Такая кнопка будет выглядеть 100% одинаково везде, но есть вероятность, что некоторые почтовые клиенты сразу ее не загрузят. Тот же Outlook по-умолчанию блокирует загрузку картинок.

Не забывайте использовать ALT-текст для кнопок-картинок. Дублируйте в нем название вашей кнопки, а так же применяйте стили для оформления ALT-текста.

2. Campaign Monitor

Компания разработала инструмент для создания кнопок на основе VML. Язык VML используется для корректного отображения кнопки в MS Outlook.

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

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

Пример кода для тестирования:

Откровенно говоря, слишком много кода получается. В Outlook такая кнопка хорошо смотрится, но она не универсальная из-за фиксированных размеров. Получается, её нужно постоянно генерировать заново, изменяя размеры в зависимости от длины названия.

3. MailChimp

Компания предлагает использовать кнопки на основе таблицы. Образец кнопки вы можете найти на странице Buttons.

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

Пример кода для тестирования

Кликнуть по такой кнопке получится только если точно попасть по ее названию. Так же получилось довольно много кода, а значит — это увеличит размера письма.

4. eSputnik

Мы верстаем наши кнопки используя в качестве основного элемента — ссылку, которая обернута в span элемент для создания эффектов границы вокруг кнопки или отбрасывания тени.

Мы не задаем фиксированных размеров кнопкам, поэтому наши кнопки увеличиваются в размерах вместе с увеличением размеров шрифта текста и его длины.

Делайте красивые письма!

«Объем» кнопки, или иными словами отступы вокруг текста, задается в виде толщины границ ссылки. Этот прием позволяет кнопке остаться объемной в Outlook и не превратиться в ссылку с цветным фоном. Однако Outlook не поддерживает css-свойство border-radius (и др.), поэтому закругленная кнопка в Outlook будет с острыми углами.

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

А это HTML верстка самой кнопки:

Пример кода для тестирования:

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

Перед вами откроются все настройки кнопки, которые можно задать в несколько кликов даже без знаний вёрстки. В том числе, адаптивность кнопки и расположение в письме.

Создание кнопки, как и всего письма не займёт много времени. В редакторе вы сможете задать настройки кнопки:

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

Вот и всё! Останется только дополнить вашу кнопку красивым призывом к действию.

Кстати, всем нашим новым пользователям (для комфортного пользования нашей системой и быстрого старта) мы дарим первый бесплатный шаблон в стиле сайта клиента. В шаблоне так же создаем стили для главной и второстепенной кнопки вашей будущей рассылки.

До новой встречи!:)

P.S.: Настройте дополнительный канал коммуникации для рассылок — Viber — кнопки здесь делаются так же просто.)