Как в html сделать кнопку: Как добавить HTML-кнопку на сайт

Содержание

Создание кнопки в HTML | Шнайдер блог

4920 Посещений

Кнопки  — неотъемлемая часть веб-портала. Создаются они при помощи тегов <input> и <button>. Рассмотрим оба варианта.

Тег <input>:

<html>
<head>
 <meta charset=»utf-8″>
 <title>Кнопка</title>
</head>
<body>
 <form>
  <p><input type=»button» value=»Кнопка»></p>
 </form>
</body>
</html>

Как отображается кнопка в браузере:

Тег <button>:

<html>
<head>
 <meta charset=»utf-8″>
 <title>Кнопка</title>
</head>
<body>
 <form>
  <p><button>Загрузить</button>

  <button>
   <img src=»images/edit_find.png» alt=»»>
  Кнопка поиска
  </button></p>
 </form>
</body>
</html>

Как отображается в браузере:

Как вы видите, тег <button> отличается более обширными настройками. Так, на кнопку можно поместить любой элемент HTML, в том числе и изображение, как показано в нашем примере. Между тем, если вы хотите сделать действительно оригинальную необычныю кнопку для сайта, вам не обойтись без CSS.

Как сделать ссылку кнопку или кнопку ссылку на HTML? По 3 способа! —

Доброго времени суток! Каждый веб мастер задавался вопросом как же сделать кнопку по клику на которую человек сразу перейдет по нужному адресу. Простая ссылка «a href=»адрес»>Ссылка» выглядит не красиво, и не всегда подходит по дизайну вашего сайта. Так же иногда возникает необходимость сделать обратное. Из обычной кнопки, сделать аналог ссылки, по клику на которой будет происходить переход по нужному адресу.

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

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

Первый способ

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

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

<link rel="stylesheet" href="link_button.css">
<a href="https://you-hands.ru">Ваша ссылка</a>

А вот и они, виновники нашей победы над текстовой ссылкой, стили. Они преобразуют ее в кнопку.

a{
	padding: 10px 10px;/* отступы от текста до краев */
	text-decoration: none;/* убираем декорирование */
	-moz-appearance: button; /* преобразование для Firefox */
	-webkit-appearance: button; /* преобразование для Chromium */	
}

Таким способом мы заменили все ссылки на странице на кнопки.

Второй способ

Этот способ достаточно банален и прост. Скорее всего именно так вы и хотели сделать такую кнопку изначально. Просто оберните картинку кнопки тегом ««!

<a href="you-hands.ru"><img src="button.png"></a>

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

Третий способ

Этот способ практический такой же как и первый, за исключением того, что в первом методе мы использовали стили кнопок «

по умолчанию«, сейчас же мы нарисуем свою кнопку «с блэк джеком и контуром!«.

<link rel="stylesheet" href="link_button_3.css">
<a href="https://you-hands.ru">Ваша ссылка</a>
.ssilka{
	border:1px solid #ccc; /*рамка*/
	background:#eaeaea; /*фон*/
	padding: 10px 10px; /*отступы внутри*/
	text-decoration: none; /*убрать подчеркивание ссылки*/
}

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

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

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

Первый способ

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

<form action="https://you-hands.ru" method="GET">
	<button type="submit" >Кнопка как ссылка</button>
</form>

Второй способ

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

<script type="text/javascript">
	function GoUrl(url){
		location.href=url;
	}
</script>

Что-бы воспользоваться функцией нужно лишь прописать свойство onClick для любой кнопки.

<button type="submit">Кнопка как ссылка 2</button>

Третий способ

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

<button type="submit">Кнопка как ссылка 3</button>

Итоги

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

4.14/5 (11)

HTML кнопка, как ссылка и ссылка, как кнопка

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

Итак, приступим.

Внимание:
В коде я указываю «ВАША_ССЫЛКА_НА_СТРАНИЦУ» или «https://bloggood.ru/». Естественно, вам нужно заменить эти адреса своими.

HTML кнопка как ссылка

 1  способ:
В атрибут «action» поместите URL-адрес, на который должна вести «кнопка»:


<form action="ВАША_ССЫЛКА_НА_СТРАНИЦУ " method="GET">
<input ENGINE="submit" value="Кнопка" />
</form>

2 способ:
Также можно использовать HTML события:


<input value="Кнопка" type="button" />

3 способ:
Тоже взят из HTML события, только другим способом:

JS:


<script type="text/javascript">
function BlogGood()
{
location.href='https://bloggood.ru/';
}
</script>

HTML:


<input value="Кнопка" type="button" />

BlogGood() – это название функции вы можете назвать по своему.

HTML ссылка как кнопка

Теперь сделаем так, чтобы ссылка отображалась, как кнопка .

1  способ:
Самое простое решение – это нарисовать кнопку и обхватить ее тегами ссылки <a>:


<a href=" ВАША_ССЫЛКА_НА_СТРАНИЦУ "><img src="knopka.jpeg"></a>

2 способ:

Можно использовать особое правило в CSS «-moz-appearance и -webkit-appearance» со значением «button» :

CSS:


a
{
-moz-appearance: button; /* Firefox */
-webkit-appearance: button; /* Chromium */
padding: .2em .75em;
text-decoration: none;
}

HTML:


<a href="https://bloggood.ru">ССЫЛКА на BLOGGOOD.RU</a>

3 способ:

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

CSS:


.ssilka {
border:1px solid #ccc; // рамка
background:#eaeaea; //фон
padding: .2em .75em; //отступы внутри
text-decoration: none; //убрать подчеркивание ссылки
}

HTML:


<a href="https://bloggood.ru">ССЫЛКА на BLOGGOOD.RU</a>

Вроде, ничего не пропустил и ничего не напутал.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓


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

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: css, html, javascript, Вебмастеру, для сайта

html — Как сделать кнопку по центру?

inline-block заставляет контейнер (div в данном случае) съёжится до размеров того, что в нём находится. Таким образом text-align не годится для выравнивания содержимого внутри inline-block. Ибо ему просто некуда двигаться. Размеры-то одинаковые.

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

Можно сузить общий контейнер для текста и кнопки с помощью того же inline-block

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

.section > div {
  display: inline-block;
}

.button {
  text-align: center;
}

.button > a {
  color: #39739d;
  background-color: #E1ECF4;
  border: 1px solid #96bdd9; 
  padding: 5px; 
  border-radius: 5px;
  box-shadow: inset 0 1px 0 #f4f8fb;
  text-decoration: none;
}

.button > a:hover {
  background-color: #bcd4e6;
}
<div>
  <div>
    <h3>We are specialist in</h3>
    <h2>Responsive designs, Stationary<br>And wordpress Themes</h2>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting<br>industry. Lorem                     Ipsum has been the industry's standard dummy text.
    </p>
    <div>
      <a href="#">Button Name</a>
    </div>
  </div>
</div>

Понадобилось правильно установить всего два свойства css. Они самые первые. Остальное для красоты, если это кому-то нравится. Правда есть ещё элемент ubasility. Кнопка работает при нажатии не только по надписи, но и по всей области кнопки. Пользователю не надо быть снайпером.

Формы HTML (Часть 2). В данном разделе рассмотрим формы. | by Влад Скуришин

Формы используются для сбора и заполнения информации на сайте.

Например: оставить заявку с номером телефона и email’ом.

Или еще один всем известный пример: каждый раз, когда мы заходим в Google или Yandex, мы видим на странице поисковика форму.

При вводе запроса в данную форму и нажатии на кнопку (или Enter), выполняется HTTP-запрос на сторону сервера Goggle или Yandex. Данный сервер обрабатывает полученные данные и выдает соответствующие ссылки на странице (см. рисунок выше).

Каким образом нам создать форму?

Для этого существует тег form.

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

Атрибут action указывает url, по которому будет выполняться обработка запроса. method указывает способ передачи данных.

  • GET — обычно используется для получения данных и передает параметры с помощью параметров в uri.
  • POST — используется для отправки данных и сохранения в базу данных (особенно приватной информации). Передаваемые параметры не видны в uri

Советуем вам больше узнать о методах по данной ссылке: клик.

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

Результат:

Атрибут type используется для указания типа вводимых данных. В нашем примере — это текст (text) и число (number).

Кроме text и number существуют следующие типы:

  • password — используется для ввода пароля,
  • url — для ввода url,
  • email — для ввода email,
  • file — для отправки файла,
  • checkbox — для добавления флажка,
  • radio — для добавления переключателя.

Список остальных типов вы можете найти тут.

Атрибут name указывает имя параметра, который будет передавать обработчику на backend при нажатии на кнопку «Отправить».

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

Ну и value, с помощью которого мы можем задать начальное значение введенное в поле. В нашем примере мы установили значение Человек.

Больше информации о атрибутах вы можете найти вотут.

В примере у нас есть текстовое поле race. Но нигде не указано подсказки, что это за поле. Пользователь просто не поймет, что все это значит.

Для добавления надписи мы можем воспользоваться тегом label. Дополнительно сгруппируем их с помощью тега fieldset и добавим группе название legend.

Результат:

Основная информация Введите свою расу

Атрибут for указывает к какому input привязана данная надпись по id.

Если мы хотим добавить раскрывающийся список, то можно воспользоваться тегом select. Внутри данного тега определяются варианты выбора с помощью тега option.

Атрибут value в данном случае — это значение, которое будет доставлено на сервер при отправке. Если value не задан, то берется текст внутри option.

Результат:

Выберите свой город: Москва Санкт-Петербург Калининград Омск Казань

Мы создали свою форму, но как отправить данные к обработчику?

Нам необходима кнопка!

Тег button используется для создания кнопки.

Не забудьте указать type="submit". submit указывает, что при нажатии на данную кнопку, произойдет отправка к обработчику.

Остальную часть тегов вы можете найти тут.

Кнопка

Кнопку можно задать с помощью парного тега <button>…</button>. Внутри элемента button можно размещать другие HTML-элементы, так что можно сделать кнопку с текстом и рисунком.

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

autofocus
Автоматическое получение фокуса при загрузке страницы. Значение можно задать тремя способами:
<button autofocus>...</button>
<button autofocus="">...</button>
<button autofocus="autofocus">...</button>
disabled
Блокирует кнопку. Используется, когда кнопка становится активной только после выполнения определенных условий. Значение можно задать тремя способами:
<button disabled>...</button>
<button disabled="">...</button>
<button disabled="disabled">...</button>
form
Идентификатор формы, к которой относится кнопка.
formaction
Адрес, куда пересылаются данные формы при нажатии на кнопку. Если для тега <form> указан атрибут action, то атрибут formaction переопределяет его значение. Используется только для кнопок типа submit.
formenctype
Способ кодирования данных формы. Используется только для кнопок типа submit. Возможные значения:
  • application/x-www-form-urlencoded – Символы кодируются перед отправкой (значение по умолчанию).
  • multipart/form-data – Символы не кодируются (этот метод используется при использовании форм, которые имеют файл управления загрузкой).
  • text/plain – пробелы преобразуются в символ «+», символы не кодируются.
formmethod
Метод пересылки данных формы. Используется только для кнопок типа submit. Возможные значения:
  • get – данные формы добавляются в конце URL-адреса: URL-адрес?имя=значение?имя=значение,
  • post – данные формы передаются отдельно, как HTTP.
Если для тега <form> указан атрибут method, то атрибут formmethod переопределяет его значение.
formnovalidate
Отмена проверки формы на корректность. Используется только для кнопок типа submit. Значение можно задать тремя способами:
<button formnovalidate>...</button>
<button formnovalidate="">...</button>
<button formnovalidate="formnovalidate">...</button>
formtarget
Место, где будет отображен результат отправки формы. Используется только для кнопок типа submit. Возможные значения:
  • _blank – В новом окне или вкладке,
  • _self – В текущем окне (по умолчанию),
  • _parent – В родительском фрейме (если фреймов нет, то это значение работает как _self),
  • _top – В полном окне браузера, отменяя все фреймы (если фреймов нет, то это значение работает как _self),
  • имя_фрейма – В iframe с указанным именем.
name
Имя кнопки.
type
Тип кнопки. Возможные значения:
  • button – Просто кнопка (по умолчанию),
  • submit – Кнопка завершения работы и передачи данных,
  • reset – Кнопка сброса.
value
Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

Для тега <button> также доступны общие атрибуты и атрибуты обработки событий.

Можно вместо текста вставить рисунок, если вам это необходимо.

Пример кнопки с рисунком
<button>
    Кто это?<br>
    <img src="be.gif" alt="Людвиг ван Бетховен">
</button>

РЕЗУЛЬТАТ:

Кто это?

html — Как разместить кнопки входа и регистрации рядом? … Я хочу, чтобы кнопка регистрации указывала на register.php HTML / CSS

Вы, должно быть, забыли установить пакет значков material-ui. Попробуйте следующее:…

Я попытался создать кнопку регистрации с элементом, но, похоже, это не работает. Если я попробую поставить display: inline; он не помещает две кнопки рядом.

*{
    font-family: 'Montserrat', sans-serif;

}

body,
html{
    margin: 0px;
    padding: 0px;
    background-color: #0E0E0E;
}

.login-box{
    background-color: #010100;
    width: 400px;
    height: 388px;
    margin: 250px auto;
}

.login-box h2{
    color: #FFFFFF;
    margin:0px 35px;
    margin-bottom: 35px;
    padding-top: 25px;
}

.login-box form input{
    display: block;
    width: 324px;
    height: 50px;
    margin-left: 35px;
    margin-right: 41px;
    margin-bottom: 24px;
}

#submit{
    display: inline;
    color: #010100;
    background-color: #E4FF77;
    border: 2px solid transparent;
    border-radius: 12px;
    width: 150px;
    height: 50px;
    margin-left: 24px;
    margin-right: 41px;
    margin-bottom: 33px;
}

#pwdreset{
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    margin: 20px 0px;
    margin-left: 225px;
}

#register-button {
    display: inline;
    color: #010100;
    background-color: #E4FF77;
    border: 2px solid transparent;
    border-radius: 12px;
    width: 150px;
    height: 50px;
    margin-left: 24px;
    margin-right: 41px;
    margin-bottom: 33px;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="signin.css">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
        <title>Agreya - Login</title>
    </head>

    <body>

        <div>

            <h2>Login</h2>

            <form action="login.php" method="post">
                <input type="text" name="username" placeholder="Email" >
                <input type="password" name="password" placeholder="Password">
                <a href="#">Forgot password?</a>
                <input type="submit" name="submit" value="Login">
            </form>

            <form action="https://www.w3docs.com/">
                <input type="submit" name="register" value="Register">
            </form>

        </div>

    </body>


</html>

0

Tomáš Hanečák 17 Окт 2020 в 21:39

5 ответов

Лучший ответ

Вы этого хотите?

* {
  font-family: 'Montserrat', sans-serif;
}

body,
html {
  margin: 0px;
  padding: 0px;
  background-color: #0E0E0E;
}

.login-box {
  background-color: #010100;
  width: 400px;
  height: 388px;
  margin: 250px auto;
  position: relative;
}

.login-box h2 {
  color: #FFFFFF;
  margin: 0px 35px;
  margin-bottom: 35px;
  padding-top: 25px;
}

.login-box form input {
  display: block;
  width: 324px;
  height: 50px;
  margin-left: 35px;
  margin-right: 41px;
  margin-bottom: 24px;
}

#submit {
  display: inline;
  color: #010100;
  background-color: #E4FF77;
  border: 2px solid transparent;
  border-radius: 12px;
  width: 150px;
  height: 50px;
  position: absolute;
  bottom: 0;
}

#pwdreset {
  display: block;
  color: #FFFFFF;
  text-decoration: none;
  margin: 20px 0px;
  margin-left: 225px;
}

#register-button {
  display: inline;
  color: #010100;
  background-color: #E4FF77;
  border: 2px solid transparent;
  border-radius: 12px;
  width: 150px;
  height: 50px;
  position: absolute;
  bottom: 0;
  right: 0;
}
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">

<div>

  <h2>Login</h2>

  <form action="login.php" method="post">
    <input type="text" name="username" placeholder="Email">
    <input type="password" name="password" placeholder="Password">
    <a href="#">Forgot password?</a>
    <input type="submit" name="submit" value="Login">
  </form>

  <form action="https://www.w3docs.com/">
    <input type="submit" name="register" value="Register">
  </form>

</div>

0

Pranav Rustagi 17 Окт 2020 в 19:04

Используйте атрибут formaction , поместите две кнопки в ту же форму, как показано ниже.
Это HTML5, в IE работает на версии 10 и выше.

    <form action="login.php" method="post">
        <input type="text" name="username" placeholder="Email" >
        <input type="password" name="password" placeholder="Password">
        <a href="#">Forgot password?</a>
        <input type="submit" name="submit" value="Login">
        <input formaction="/register.php" type="submit" name="register" value="Register" >
    </form>            
    

0

Ivo Gjorgjievski 17 Окт 2020 в 19:01

Здесь вы можете обернуть свою вторую форму и кнопку в первой форме в новый div со стилем отображения flex, и у вас будут расположенные рядом кнопки.

* {
  font-family: "Montserrat", sans-serif;
}

body,
html {
  margin: 0px;
  padding: 0px;
  background-color: #0e0e0e;
}

.login-box {
  background-color: #010100;
  width: 400px;
  height: 388px;
  margin: 250px auto;
}

.login-box h2 {
  color: #ffffff;
  margin: 0px 35px;
  margin-bottom: 35px;
  padding-top: 25px;
}

.login-box form input {
  display: block;
  width: 324px;
  height: 50px;
  margin-left: 35px;
  margin-right: 41px;
  margin-bottom: 24px;
}

#submit {
  display: inline;
  color: #010100;
  background-color: #e4ff77;
  border: 2px solid transparent;
  border-radius: 12px;
  width: 150px;
  height: 50px;
  margin-left: 24px;
  margin-right: 41px;
  margin-bottom: 33px;
}

#pwdreset {
  display: block;
  color: #ffffff;
  text-decoration: none;
  margin: 20px 0px;
  margin-left: 225px;
}

#register-button {
  display: inline;
  color: #010100;
  background-color: #e4ff77;
  border: 2px solid transparent;
  border-radius: 12px;
  width: 150px;
  height: 50px;
  margin-left: 24px;
  margin-right: 41px;
  margin-bottom: 33px;
}

.submits {
  display: flex;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="main.css">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
        <title>Agreya - Login</title>
    </head>

    <body>

        <div>

            <h2>Login</h2>

            <form action="login.php" method="post">
                <input type="text" name="username" placeholder="Email" >
                <input type="password" name="password" placeholder="Password">
                <a href="#">Forgot password?</a>
                <div>

                  <input type="submit" name="submit" value="Login">
                  <form action="https://www.w3docs.com/">
                    <input type="submit" name="register" value="Register">
                </form>
                </div>
            </form>

            

        </div>

    </body>


</html>

0

ali nazari 17 Окт 2020 в 19:03

Обратитесь к этой ссылке, чтобы отобразить две встроенные формы. http://stackoverflow.com/questions/7438676/get-two-forms-to-display-inline/7438709

0

Naman Jain 17 Окт 2020 в 19:07

Я бы посоветовал добавить в класс position: relative;: .login-box.

Вы этого хотите?…

.form-2{
  position:absolute;
  bottom: 0;
  right:0;
}

0

MaxiGui 17 Окт 2020 в 19:03

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


Узнайте, как стилизовать текстовые кнопки с помощью CSS.


Успех Информация Предупреждение Опасность Дефолт


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

Шаг 1) Добавьте HTML:

Пример






Шаг 2) Добавьте CSS:

Чтобы получить вид «текстовой кнопки», мы удалили цвет фона и границу по умолчанию:

Пример

.btn {
граница: нет;
цвет фона: наследовать;
отступ: 14 пикселей 28 пикселей;
размер шрифта: 16 пикселей;
курсор: указатель; Дисплей
: строчно-блочный;
}

/ * При наведении курсора мыши * /
.btn: hover {background: #eee;}

.success {color: green;}
.info {color: dodgerblue;}
.warning {color: orange;}
.danger {color: red;}
.default {color: black;}

Попробуй сам »

Текстовые кнопки с индивидуальным фоном

Текстовые кнопки с определенным цветом фона при наведении:

Пример

.btn {
граница: нет;
цвет фона: наследовать;
отступ: 14 пикселей 28 пикселей;
размер шрифта: 16 пикселей;
курсор: указатель;
дисплей: встроенный блок;
}

/ * Зеленый * /
. Успех {
цвет: зеленый;
}

. Успех: завис {
цвет фона: # 04AA6D;
цвет: белый;
}

/ * Синий * /
.info {
цвет: голубой;
}

.info: hover {
background: # 2196F3;
цвет: белый;
}

/ * Оранжевый * /
.предупреждение {
цвет: апельсин;
}

. Предупреждение: наведение {
фон: # ff9800;
цвет: белый;
}

/ * Красный * /
.danger {
цвет: красный;
}

. Опасность: парение {
фон: # f44336;
цвет: белый;
}

/ * Серый * /
. По умолчанию {
цвет: черный;
}

. По умолчанию: hover {
background: # e7e7e7;
}

Попробуй сам »

Перейдите к нашему руководству по кнопкам CSS, чтобы узнать подробнее о стилизации кнопок.



Как добавить кнопку HTML, которая действует как ссылка

Существует несколько способов создания кнопки HTML, которая действует как ссылка (т. Е. При нажатии на нее пользователь перенаправляется на указанный URL-адрес). Вы можете выбрать один из следующих методов, чтобы добавить ссылку на кнопку HTML.

Добавить встроенное событие onclick¶

Вы можете добавить встроенное событие onclick в тег Попробуйте сами »

Также можно добавить встроенное событие onclick в тег внутри элемента .

Пример добавления события onclick в тег

: ¶
  

  
     Название документа 
  
  
    <форма>
      
    
  
  
Попробуйте сами »Ссылки не будут работать, если отключен JavaScript, и поисковые системы могут игнорировать такие ссылки.

Используйте атрибут action или formaction.

Другой способ создания кнопки, которая действует как ссылка, — это использование атрибута action или formaction внутри элемента

.

Пример создания кнопки, действующей как ссылка с атрибутом действия: ¶

  

   
       Название документа 
   
   
      
         
      
   
  
Попробуйте сами »

Чтобы открыть ссылку в новой вкладке, добавьте target =" _ blank ".

Пример открытия ссылки с кнопки в новом окне: ¶

  

   
       Название документа 
   
   
      
Попробуйте сами »

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

Пример создания кнопки, действующей как ссылка с атрибутом formaction: ¶

  

   
       Название документа 
   
   
      <форма>
         
      
   
  
Попробуйте сами »Атрибут formaction используется только с кнопками, имеющими type =" submit ". Поскольку этот атрибут специфичен для HTML5, его поддержка в старых браузерах может быть плохой.

Стиль ссылки как кнопки¶

Добавьте ссылку в стиле кнопки со свойствами CSS. Атрибут href является обязательным атрибутом тега . Он определяет ссылку на веб-странице или место на той же странице, по которому пользователь переходит после нажатия на ссылку.

Пример стилизации ссылки как кнопки с помощью CSS: ¶

  

  
     Название документа 
    <стиль>
      .кнопка {
        цвет фона: # 1c87c9;
        граница: нет;
        белый цвет;
        отступ: 20 пикселей 34 пикселей;
        выравнивание текста: центр;
        текстовое оформление: нет;
        дисплей: встроенный блок;
        размер шрифта: 20 пикселей;
        маржа: 4px 2px;
        курсор: указатель;
      }
    
  
  
    Нажмите здесь 
  
  
Попробуйте сами »

Поскольку требуется сложное оформление, это может не работать в некоторых браузерах.

Рассмотрим еще один пример.

Пример оформления ссылки как кнопки: ¶

  

  
     Название документа 
    <стиль>
      .кнопка {
        дисплей: встроенный блок;
        отступ: 10 пикселей 20 пикселей;
        выравнивание текста: центр;
        текстовое оформление: нет;
        цвет: #ffffff;
        цвет фона: # 7aa8b7;
        радиус границы: 6 пикселей;
        наброски: нет;
      }
    
  
  
     Тег кнопки HTML 
  
  
Попробуйте сами »

Как создать радиокнопки в HTML [+ примеры]

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

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

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

Что такое радио-кнопка HTML?

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

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

Радиокнопки и флажки

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

Признаюсь, это не самая захватывающая тема. Однако их смешение может вызвать у посетителей серьезное недоумение. Поэтому обязательно используйте радиокнопки для меню «Выбрать одно» и сохраните флажки для меню «Выбрать все подходящие» или своих одноразовых вопросов (например, «Установите этот флажок, если…»).

Теперь, когда мы понимаем назначение переключателей HTML, давайте узнаем, как их создавать.

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

Чтобы создать переключатель в HTML, используйте элемент с типом radio .Это создает единственную радиокнопку, с которой пользователи могут взаимодействовать:

См. Радиокнопку Pen Single от Кристины Перриконе (@hubspot) на CodePen.

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

См. Группу переключателей пера Кристины Перриконе (@hubspot) на CodePen.

Здесь у нас есть три элемента типа radio с некоторыми новыми атрибутами.Также есть новый элемент для каждого . Давайте рассмотрим все, что мы добавили в код.

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

Как уже упоминалось, переключатели располагаются группами. Используйте обязательный атрибут name , чтобы сгруппировать набор связанных переключателей.В приведенном выше примере все имеют одно и то же значение для name , поэтому они рассматриваются как часть одной группы. Это позволяет пользователям выбирать только один вариант в группе за раз — попробуйте его выше.

Затем значение Атрибут представляет уникальное значение для переключателя. Пользователи его не видят, но отправлено для представления выбранной опции. Например, если форма выше была отправлена ​​с выбранным элементом «17 лет или моложе», система, обрабатывающая форму, получит значение age = child .Если пользователь не выберет какой-либо переключатель, значение не будет отправлено. Если для выбранной опции отсутствует значение значение атрибута , форма отправит значение по умолчанию на .

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

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

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

Проверяемый атрибут

У входов радиокнопок есть один дополнительный атрибут, проверил атрибут . Если включена в тег , кнопка будет выбрана по умолчанию.

См. Форму переключателя Pen с выбором по умолчанию от Кристины Перриконе (@hubspot) на CodePen.

Как разместить радиокнопки HTML в форме

Что хорошего в переключателях, если пользователи не могут отправлять свои ответы? Вот почему радиокнопки обычно находятся внутри HTML-форм. Элемент HTML

содержит дочерние элементы, которые собирают вводимые пользователем данные, например .

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

Отключить перенос текста

Если вы не хотите, чтобы текст кнопки переносился, вы можете добавить .text-nowrap к кнопке. В Sass вы можете установить $ btn-white-space: nowrap , чтобы отключить перенос текста для каждой кнопки.


Цвета

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

Начальный Вторичный Успех Опасность Предупреждение Информация Свет Темный Ссылка на сайт
 
          
          
          
          
          
          
          
          
          
          

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


Наброски

Нужна кнопка, но нет изрядных цветов фона, которые они приносят? Заменить по умолчанию классы-модификаторы с .btn-outline- * , чтобы удалить все фоновые изображения и цвета на любой кнопке.

В кнопках структуры мы рекомендуем добавить data-mdb-ripple-color = "dark" , чтобы изменить цвет волновой эффект . Светлый цвет ряби по умолчанию (применяется автоматически к каждой кнопке) могут быть плохо видны в случае кнопок со светом и контуром.

Чтобы узнать больше об эффекте ряби и всех доступных опциях, посмотрите Документы Ripple.

Начальный Вторичный Успех Опасность Предупреждение Информация Свет Темный
 
          
          
          
          
          
          
          
          
          

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


Округлые

Добавьте .btn-rounded класс , чтобы сделать кнопку округлой.

Начальный Вторичный Успех Опасность Предупреждение Информация Свет Темный
 
          
          
          
          
          
          
          
          
          

Закругленный контур

Вы можете использовать .btn-outline- * и .btn-rounded вместе, чтобы очертание кнопки и закругление одновременно.

Начальный Вторичный Успех Опасность Предупреждение Информация Свет Темный
 
          кнопка <
            type = "кнопка"
           
            data-mdb-ripple-color = "темный"
          >
            Начальный
          
          кнопка <
            type = "кнопка"
           
            data-mdb-ripple-color = "темный"
          >
            Вторичный
          
          кнопка <
            type = "кнопка"
           
            data-mdb-ripple-color = "темный"
          >
            Успех
          
          кнопка <
            type = "кнопка"
           
            data-mdb-ripple-color = "темный"
          >
            Опасность
          
          кнопка <
            type = "кнопка"
           
            data-mdb-ripple-color = "темный"
          >
            Предупреждение
          
          кнопка <
            type = "кнопка"
           
            data-mdb-ripple-color = "темный"
          >
            Информация
          
          кнопка <
            type = "кнопка"
           
            data-mdb-ripple-color = "темный"
          >
            Свет
          
          кнопка <
            type = "кнопка"
           
            data-mdb-ripple-color = "темный"
          >
            Темный
          
          

Плавающий

Используйте .btn-Floating , чтобы сделать круглую кнопку.

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

 
          
          

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

 
          
          кнопка <
            type = "кнопка"
           
            data-mdb-ripple-color = "темный"
          >
             
          
          
          
          

Фиксированные кнопки

Используйте .fixed-action-btn класс для создания фиксированной кнопки со списком доступных параметры, которые отображаются при наведении или щелчке.

См. Живой пример фиксированной кнопки в правом нижнем углу этой страницы.

Примечание: Доступно показать / скрыть методов для вручную открыть и закрыть список. Прочтите вкладку API , чтобы узнать больше.

 
          
<а >
  • <а >
  • <а >
  • <а >
  • <а >

Социальные сети

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

В приведенном ниже примере мы размещаем значок Facebook внутри кнопки и установите цвет фона от до # 3B5998 (цвет бренда facebook).

 
             
          
Образцы марок

Несколько самых популярных брендов в виде социальных кнопок.

 
            
               

            
               

            
               

            
               

            
               

            
               

            
               

            
               

            
               

            
               

            
               

            
               

            
               

            
               
            
Плавающий социальный

Добавив .btn-Floating вы можете создать красивую плавающую кнопку социальных сетей.

 
            <а
             
             
              href = "#!"
              роль = "кнопка"
              >   
            
Текст

Вам не нужно использовать только значок. Вы можете добавить текст к кнопке. Не забудьте добавить классы интервалов (например, .me-2 ), чтобы обеспечить правильное расстояние между значком и текст.

Твиттер
 
               Twitter 
            
Только значок

Удалив классы кнопок и заменив background-color на цвет вы можете создавать минималистичные, кликабельные значки.

 
            
               

            
               

            
               

            
               
            
Уведомления

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

8
 
                8  
            

Теги

Классы .btn предназначены для использования с


Размеры

Хотите кнопки большего или меньшего размера? Складываем .btn-lg или .btn-sm для дополнительные размеры.

Кнопка Кнопка Кнопка
 
          
          
          
          

Активное состояние

Добавьте класс .active , чтобы кнопка выглядела нажатой.

Первичная ссылка Ссылка на сайт
 
           Первичная ссылка 
           Ссылка 
          

Отключено

Сделайте кнопки неактивными, добавив логический атрибут disabled к любому

Отключенные кнопки, использующие элемент , ведут себя немного иначе:

Первичная ссылка Ссылка на сайт
 
          <а
            href = "#"
           
            tabindex = "- 1"
            роль = "кнопка"
            aria-disabled = "правда"
            > Первичная ссылка 
          <а
            href = "#"
           
            tabindex = "- 1"
            роль = "кнопка"
            aria-disabled = "правда"
            > Ссылка 
          

Предупреждение о функциональности ссылки :
Модель .disabled класс использует события-указателя: нет , чтобы попытаться отключить связать функциональность
s, но это свойство CSS еще не стандартизировано. Кроме того, даже в браузерах, которые поддерживают события указателя : нет , клавиатура навигация остается неизменной, а это означает, что зрячие пользователи клавиатуры и пользователи вспомогательных технологии по-прежнему смогут активировать эти ссылки. Чтобы быть в безопасности, добавьте tabindex = "- 1" Атрибут для этих ссылок (чтобы они не получали клавиатуру focus) и используйте собственный JavaScript, чтобы отключить их функциональность.


Блок кнопок

Создавайте гибкие стопки полноразмерных «кнопок блокировки», как в Bootstrap 4, с помощью сочетания нашего дисплея и утилит разрыва. Используя утилиты вместо классов, специфичных для кнопок, мы иметь гораздо больший контроль над интервалом, выравниванием и отзывчивым поведением.

Кнопка Кнопка

 
          

Здесь мы создаем адаптивный вариант, начиная с вертикально расположенных кнопок до тех пор, пока md точка останова, где .d-md-block заменяет .d-grid , таким образом сводя на нет полезность gap-2 . Измените размер вашего браузер, чтобы увидеть, как они меняются.

Кнопка Кнопка

 
          

Вы можете настроить ширину кнопок блока с помощью классов ширины столбцов сетки.Например, для «кнопки блока» половинной ширины используйте .col-6 . Отцентрируйте его по горизонтали с помощью .mx-auto тоже.

Кнопка Кнопка

 
          

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

Кнопка Кнопка

 
          

Переключить состояния

Добавьте data-mdb-toggle = "button" , чтобы переключить активное состояние кнопки.Если при предварительном переключении кнопки необходимо вручную добавить класс .active и aria-press = "true" на кнопка < type = "кнопка" data-mdb-toggle = "кнопка" autocomplete = "выкл" ария-прессованный = "правда" > Активная кнопка переключения кнопка < type = "кнопка" отключен data-mdb-toggle = "кнопка" autocomplete = "выкл" > Отключенная кнопка переключения Переключить ссылку Активная ссылка переключения Отключено переключение ссылки

 
           Переключить ссылку 
          <а
            href = "#"
           
            роль = "кнопка"
            data-mdb-toggle = "кнопка"
            ария-прессованный = "правда"
            > Активная ссылка переключения 
           Отключено переключение ссылки 
          

Если вы хотите поддержать наших друзей из Tailwind Elements, вы также можете ознакомиться с Кнопки попутного ветра документация.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *