Кнопка html

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

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

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

Перейти на страницу с примерами

Пример 1

Анимация при наведении достигается за счёт изменения позиции градиентной заливки.

Buttonbody {background: #d6eaf8} a { text-decoration: none; outline: none; display: inline-block; color: white; padding: 20px 30px; margin: 10px 20px; border-radius: 10px; font-family: 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: 2px; background-image: linear-gradient(to right, #9EEFE1 0%, #4830F0 51%, #9EEFE1 100%); background-size: 200% auto; box-shadow: 0 0 20px rgba(0,0,0,.1); transition: .5s; } a:hover {background-position: right center;}

Пример 2

Для псевдоэлементов изначально задана нулевая высота и ширина, которая сменяется на 100% при наведении. Блоки, генерируемые с помощью псевдоэлементов, прозрачные, для них заданы левая/верхняя и правая/нижняя границы, которые проявляются при наведении, создавая эффект прорисовки.

Buttonhtml {height: 100%} body { background: linear-gradient(to top, #55EFCB 0%, #5BCAFF 100%); height: 100%; } a { text-decoration: none; outline: none; display: inline-block; padding: 20px 30px; margin: 10px 20px; position: relative; color: white; border: 1px solid rgba(255,255,255,.4); background: none; font-weight: 300; font-family: 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: 2px; } a:before, a:after { content: «»; position: absolute; width: 0; height: 0; opacity: 0; box-sizing: border-box; } a:before { bottom: 0; left: 0; border-left: 1px solid white; border-top: 1px solid white; transition: 0s ease opacity .8s, .2s ease width .4s, .2s ease height .6s; } a:after { top: 0; right: 0; border-right: 1px solid white; border-bottom: 1px solid white; transition: 0s ease opacity .4s, .2s ease width , .2s ease height .2s; } a:hover:before, a:hover:after{ height: 100%; width: 100%; opacity: 1; } a:hover:before {transition: 0s ease opacity 0s, .2s ease height, .2s ease width .2s;} a:hover:after {transition: 0s ease opacity .4s, .2s ease height .4s , .2s ease width .6s;} a:hover {background: rgba(255,255,255,.2);}

Пример 3

Кнопка при наведении меняет цвет фона и текста, тень блока и смещается вверх с помощью трансформации.

Buttonbody {background: url(https://html5book.ru/wp-content/uploads/2015/07/background39.png);} a { text-decoration: none; outline: none; display: inline-block; width: 140px; height: 45px; line-height: 45px; border-radius: 45px; margin: 10px 20px; font-family: 'Montserrat', sans-serif; font-size: 11px; text-transform: uppercase; text-align: center; letter-spacing: 3px; font-weight: 600; color: #524f4e; background: white; box-shadow: 0 8px 15px rgba(0,0,0,.1); transition: .3s; } a:hover { background: #2EE59D; box-shadow: 0 15px 20px rgba(46,229,157,.4); color: white; transform: translateY(-7px); }

Пример 4

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

Buttonbody {background:url(https://html5book.ru/wp-content/uploads/2015/10/background54.png)} a { text-decoration: none; outline: none; display: inline-block; padding: 12px 40px; margin: 10px 20px; border-radius: 30px; background-image: linear-gradient(45deg, #6ab1d7 0%, #33d9de 50%, #002878 100%); background-position: 100% 0; background-size: 200% 200%; font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: 300; color: white; box-shadow: 0 16px 32px 0 rgba(0,40,120,.35); transition: .5s; } a:hover { box-shadow: 0 0 0 0 rgba(0,40,120,0); background-position: 0 0; }

Пример 5

При наведении градиентный блок, генерируемый с помощью псевдоэлемента, меняет высоту с нулевой на 100%.

Buttonbody {background: #1D1B26;} .button-container a { text-decoration: none; outline: none; color: white; display: inline-block; position: relative; padding: 15px 30px; border: 1px solid; border-image: linear-gradient(180deg, #ff3000, #ed0200, #ff096c, #d50082); border-image-slice: 1; margin: 10px 20px; font-family: 'Montserrat', sans-serif; text-transform: uppercase; overflow: hidden; letter-spacing: 2px; transition: .8s cubic-bezier(.165,.84,.44,1); } .button-container a:before { content: «»; position: absolute; left: 0; top: 0; height: 0; width: 100%; z-index: -1; color: white; background: linear-gradient(180deg, #ff3000, #ed0200, #ff096c, #d50082); transition: .8s cubic-bezier(.165,.84,.44,1); } a:hover {background: rgba(255,255,255,0);} a:hover:before { bottom: 0%; top: auto; height: 100%; }

Пример 6

При наведении кнопке добавляется анимация градиентной заливки.

Buttonbody {background: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png)} a { text-decoration: none; outline: none; display: inline-block; margin: 10px 20px; padding: 15px 30px; overflow: hidden; border: 2px solid; border-bottom-width: 4px; font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-weight: bold; letter-spacing: 2px; color: rgba(30,255,188,1); background: rgba(255,255,255,1); transition: color .3s, background .5s; } a:hover { animation: stripes .75s infinite linear; background: linear-gradient(45deg, rgba(30,255,188,1) 25%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 50%, rgba(30,255,188,1) 50%, rgba(30,255,188,1) 75%, rgba(255,255,255,1) 75%, rgba(255,255,255,1)); background-size: 10px 10px; color: #FF50E5; } @keyframes stripes { 0% {background-position: 0 0;} 100% {background-position: 50px 0;} }

Пример 7

Фоновая заливка кнопки создана с помощью внутренней тени блока, которая меняет свой размер при наведении плюс добавляется внешняя тень блока.

Buttonbody {background: #A4DADA;} a { text-decoration: none; outline: none; display: inline-block; padding: 15px 30px; margin: 10px 20px; border-radius: 10px; box-shadow: 0 0 40px 40px #F137A6 inset, 0 0 0 0 #F137A6; font-family: 'Montserrat', sans-serif; font-weight: bold; letter-spacing: 2px; color: white; transition: .15s ease-in-out; } a:hover { box-shadow: 0 0 10px 0 #F137A6 inset, 0 0 10px 4px #F137A6; color: #F137A6; }

Пример 8

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

Button body {background: #ebcacb;} a { text-decoration: none; outline: none; display: inline-block; margin: 10px; color: white; box-shadow: 0 0 0 2px white; padding: 20px 0; width: 150px; text-align: center; text-transform: uppercase; letter-spacing: 3px; position: relative; overflow: hidden; } span { font-family: 'Montserrat', sans-serif; position: relative; z-index: 5; } a:before, a:after { content: «»; position: absolute; top: 0; bottom: 0; right: 0; left: 0; } a:before{ transform: translateX(-100%); background: white; transition: transform .3s cubic-bezier(.55,.055,.675,.19); } a:after { background: #413ad5; transform: translateX(100%); transition: transform .3s cubic-bezier(.16,.73,.58,.62) .3s; } a:hover:before, a:hover:after {transform: translateX(0);}

Пример 9

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

Buttonbody {background: #1b2631;} a { text-decoration: none; outline: none; display: inline-block; margin: 10px 20px; padding: 10px 30px; position: relative; border: 2px solid #f1c40f; color: #f1c40f; font-family: 'Montserrat', sans-serif; transition: .4s; } a:after { content: «»; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; margin: auto; border: 2px solid rgba(0,0,0,0); transition: .4s; } .button-container a:hover:after { border-color: #f1c40f; width: calc(100% — 10px); height: calc(100% + 10px); }

Пример 10

Псевдоэлемент, залитый градиентом, повёрнут на 45 градусов и смещен за левую границу кнопки. При наведении он перемещается за правую границу, создавая эффект блика.

Buttonbody {background: #ffbfbe;} a { text-decoration: none; outline: none; display: inline-block; padding: 10px 30px; margin: 10px 20px; position: relative; overflow: hidden; border: 2px solid #fe6637; border-radius: 8px; font-family: 'Montserrat', sans-serif; color: #fe6637; transition: .2s ease-in-out; } a:before { content: «»; background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.5)); height: 50px; width: 50px; position: absolute; top: -8px; left: -75px; transform: skewX(-45deg); } a:hover { background: #fe6637; color: #fff; } a:hover:before { left: 150px; transition: .5s ease-in-out; }

Источник: https://html5book.ru/krasivye-knopki-dlya-sayta/

HTML тег

HTML тег создает кнопку, похожую на кнопку элемента со значением submit, reset, button или image атрибута type. Однако, в отличие от элемента , элемент не относится к пустым элементам, то есть у него есть открывающий и закрывающий тег, между которыми можно расположить текст, изображения или другие HTML-элементы.

Читайте также:  Html тег ul - подробное описание с примерами

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

Примечание: для изменения стандартного вида курсора при наведении на кнопку используйте CSS свойство cursor.

Атрибуты

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

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

disabled:Отключает возможность нажатия кнопки. Это можно использовать в случае, когда кнопка должна стать активной при выполнение определенных условий (например, при выборе флажка и тд.), сделать кнопку активной можно будет с помощью JavaScript. Значения для логического атрибута disabled можно задавать следующими способами: form:Указывает к какой форме относится данная кнопка. В качестве значения выступает один или несколько идентификаторов форм, разделенных пробелами. Количество идентификаторов в значении атрибута зависит от количества принадлежащих кнопке форм: Имя:
Фамилия:

Кнопка находится вне элемента form, но является частью формы.

Отправить

Примечание: атрибут не поддерживается в Internet Explorer.

formaction:Определяет адрес, куда пересылаются данные формы при нажатии на кнопку. Если для формы указан атрибут action, то атрибут formaction переопределит его значение: Имя:
Фамилия:
Отправить
Отправить от имени администратора Атрибут formaction используется только для кнопок с атрибутом type=»submit».

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

formenctype:Указывает, каким способом данные формы должны быть закодированы перед отправкой на сервер. Используется только для кнопок с атрибутом type=»submit». Возможные значения атрибута:

  • application/x-www-form-urlencoded — все символы кодируются перед отправкой (значение по умолчанию).
  • multipart/form-data — символы не кодируются (этот метод используется при использовании форм, которые имеют файл управления загрузкой).
  • text/plain — пробелы преобразуются в символ «+», но символы не кодируются.

Имя:
Отправить с кодирование символов Отправить без кодирования символов Если для формы указан атрибут enctype, то атрибут formenctype переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

formmethod:Указывает, какой метод HTTP будет использован при отправке данных формы. Используется только для кнопок с атрибутом type=»submit». Возможные значения атрибута:

  • get — данные формы добавляются в конце URL-адреса: URL-адрес?имя=значение?имя=значение
  • post — отправляет данные формы, как HTTP после транзакции

Имя:
Фамилия:
Отправить Отправить используя POST Если для формы указан атрибут method, то атрибут formmethod переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

formnovalidate:Указывает, что данные формы не будут проверяться на корректность. Используется только для кнопок с атрибутом type=»submit». Значения для логического атрибута autofocus можно задавать следующими способами: Если для формы указан атрибут novalidate, то атрибут formnovalidate переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях, и в Safari.

formtarget:Указывает, где будет отображен ответ после отправки формы. Используется только для кнопок с атрибутом type=»submit». Возможные значения атрибута:

  • _blank — открывает ответ в новом окне или вкладке.
  • _self — открывает ответ в той же директории, где располагается ссылка (значение по умолчанию).
  • _parent — открывает ответ в родительском окне.
  • _top — открывает ответ во всю ширину окна.
  • имя_фрейма — открывает ответ в iframe, имя которого было указано в качестве значения.

Имя:
Фамилия:
Отправить Оправить и открыть ответ в новом окне Если для формы указан атрибут target, то атрибут formtarget переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

name:Указывает имя для элемента . Он используется для ссылки на данные формы после ее отправки, или для ссылки на элемент в JavaScript. Выберите одно из двух: HTML CSS

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

type:Определяет тип кнопки:

  • button — активная кнопка
  • reset — кнопка, очищающая форму от введенных данных
  • submit — кнопка для отправки данных формы (значение по умолчанию)

Имя:
Фамилия:
Отправить Стереть

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

value:Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

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

Тег так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

Нет.

Пример

Нажми на меня!

Результат данного примера в окне браузера:

Источник: https://puzzleweb.ru/html/tag_button.php

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

Инструкция

Использование дескриптора добавляет на страницу кнопку с именем name и значением value. Атрибут name задает элементу уникальный идентификатор и используется для определения обработчиком формы его значения. Value выводит необходимый текст поверх. Например, для создания кнопки запишите следующий код:

Данная команда создаст кнопку с именем button и надписью «Отправка» на ней.

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

Текст

Атрибут form задает идентификатор формы, который будет использоваться для обработки данных. Formaction устанавливает обработчик формы в другой части документа, другом файле или сайте. Formmethod отвечает за определение метода пересылки данных. Name задает имя кнопке, type – тип (обычная, для отправки данных или для очистки формы).

Value – значение, которое будет считываться скриптами. На кнопке будет отображаться изображение с указанным адресом и жирный текст.Чтобы создать кнопку, которая будет обрабатывать введенные данные, необходимо в атрибуте указать соответствующий тип:

Чтобы создать кнопку, стирающую введенные пользователем данные, задайте type = “reset”.

Обратите внимание

Обратите внимание

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

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

Для этого в языке описания веб-страниц HTML (HyperText Markup Language — «язык разметки гипертекста») предусмотрен специальный набор тегов.

Что это за теги и как, пользуясь ними создать в странице веб-форму для заполнения посетителем?

Вам понадобится

  • Базовое знание языка HTML

Инструкция

HTML-теги, которые сообщают браузеру, что в этом месте страницы необходимо отобразить форму и ее элементы, размещаются в коде между открывающим тегом и закрывающим . Открывающий тег должен содержать обязательную информацию — атрибуты, сообщающие куда именно надо отправить информацию из формы и каким методом нужно это сделать. Кроме того, если страница содержит больше одной формы, то каждая должна иметь собственное имя. С учетом всего этого открывающий тег может выглядеть так:—Кроме этого в форму можно поместить кнопки — для очистки введенных в форму данных:и для отправки заполненной формы на сервер:Значение, указанное в атрибуте «value» для кнопок — это надпись на самой кнопке.

Читайте также:  Спрайты css

В самом простом варианте html-код веб-формы в сборе может быть таким:

Источник: https://www.kakprosto.ru/kak-804241-kak-sdelat-knopku-v-html

Как создать стильные кнопки на чистом CSS

Сегодня я хочу рассказать Вам как сделать стильные кнопки на чистом CSS. Делать мы будем 4 стиля, это кнопки залитые одним цветов, кнопки, которые обведены границей, стиль кнопок с тенью и заливкой и последний 4 стиль это кнопки с эффектом нажатия. Всё это добро мы будем делать без использования каких либо скриптов, в только на CSS.

Огромное спасибо http://speckyboy.com

Демо Ι Скачать

Код HTML для кнопок

HTML код мы будем использовать очень простой. Для каждой из кнопок мы зададим отдельные классы. А так же зададим классы для применения эффекта при наведении и активации нашей будущей кнопки. В общем вот сам код:

Button :hover :active Button :hover :active Button :hover :active Button :hover :active

Стили CSS для всех кнопок

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

button { display: inline-block; margin: 0 10px 0 0; padding: 15px 45px; font-size: 48px; font-family: «Bitter»,serif; line-height: 1.8; appearance: none; box-shadow: none; border-radius: 0; } button:focus { outline: none }

Это совсем не сложно. Ну а сейчас давайте подробнее рассмотрим каждый из 4 стилей наших стильных кнопок.

Плоские кнопки залитые фоном

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

На этом изображении показано три состояния кнопки, обычное (по умолчанию), при наведении и при клике или же действии:

CSS код этих кнопок очень прост. Это огромный плюс мне кажется:

section.flat button { color: #fff; background-color: #6496c8; text-shadow: -1px 1px #417cb8; border: none; } section.flat button:hover, section.flat button.hover { background-color: #346392; text-shadow: -1px 1px #27496d; } section.flat button:active, section.flat button.active { background-color: #27496d; text-shadow: -1px 1px #193047; }

Стиль кнопок с бордюрами или границами

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

И как обычно код CSS очень прост, мы просто добавляем правила для появления бордюра:

section.border button { color: #6496c8; background: rgba(0,0,0,0); border: solid 5px #6496c8; } section.border button:hover, section.border button.hover { border-color: #346392; color: #346392; } section.border button:active, section.border button.active { border-color: #27496d; color: #27496d; }

Кнопки с тенью и градиентом на CSS

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

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

section.gradient button { color: #fff; text-shadow: -2px 2px #346392; background-color: #ff9664; background-image: linear-gradient(top, #6496c8, #346392); box-shadow: inset 0 0 0 1px #27496d; border: none; border-radius: 15px; } section.gradient button:hover, section.gradient button.hover { box-shadow: inset 0 0 0 1px #27496d,0 5px 15px #193047; } section.gradient button:active, section.gradient button.active { box-shadow: inset 0 0 0 1px #27496d,inset 0 5px 30px #193047; }

Стильный эффект нажатия

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

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

При наведении на кнопки мы сделаем фон темнее. А когда пользователь будет нажимать на кнопку мы изменим в стилях позицию самой кнопки. А чтобы это всё выглядело более эффектно и плавно мы добавим CSS3 трансформацию (translateY). Таким образом кнопка будет плавно опускаться вниз.

А вот и сам CSS код:

section.press button { color: #fff; background-color: #6496c8; border: none; border-radius: 15px; box-shadow: 0 10px #27496d; } section.press button:hover, section.press button.hover { background-color: #417cb8 } section.press button:active, section.press button.active { background-color: #417cb8; box-shadow: 0 5px #27496d; transform: translateY(5px); }

Демо Ι Скачать

Заключение

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

Источник: http://beloweb.ru/novichkam/kak-sozdat-stilnyie-knopki-na-chistom-css.html

Кнопка —

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

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

autofocusАвтоматическое получение фокуса при загрузке страницы. Значение можно задать тремя способами:…

Атрибут не работает в Internet Explorer версии 9 и ниже.

disabledБлокирует кнопку. Используется, когда кнопка становится активной только после выполнения определенных условий. Значение можно задать тремя способами:…

…formИдентификатор формы, к которой относится кнопка.

Атрибут не работает в Internet Explorer.

formactionАдрес, куда пересылаются данные формы при нажатии на кнопку. Если для тега указан атрибут action, то атрибут formaction переопределяет его значение. Используется только для кнопок типа submit.

Атрибут не работает в Internet Explorer версии 9 и ниже.

formenctypeСпособ кодирования данных формы. Используется только для кнопок типа submit. Возможные значения:

  • application/x-www-form-urlencoded – Символы кодируются перед отправкой (значение по умолчанию).
  • multipart/form-data – Символы не кодируются (этот метод используется при использовании форм, которые имеют файл управления загрузкой).
  • text/plain – пробелы преобразуются в символ «+», символы не кодируются.

Атрибут не работает в Internet Explorer версии 9 и ниже.

formmethodМетод пересылки данных формы. Используется только для кнопок типа submit. Возможные значения:

  • get – данные формы добавляются в конце URL-адреса: URL-адрес?имя=значение?имя=значение,
  • post – данные формы передаются отдельно, как HTTP.

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

Атрибут не работает в Internet Explorer версии 9 и ниже.

Читайте также:  Какой домен выбрать для сайта

formnovalidateОтмена проверки формы на корректность. Используется только для кнопок типа submit. Значение можно задать тремя способами:…

Атрибут не работает в Internet Explorer версии 9 и ниже.

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

  • _blank – В новом окне или вкладке,
  • _self – В текущем окне (по умолчанию),
  • _parent – В родительском фрейме (если фреймов нет, то это значение работает как _self),
  • _top – В полном окне браузера, отменяя все фреймы (если фреймов нет, то это значение работает как _self),
  • имя_фрейма – В iframe с указанным именем.

Атрибут не работает в Internet Explorer версии 9 и ниже.

nameИмя кнопки.typeТип кнопки. Возможные значения:

  • button – Просто кнопка (по умолчанию),
  • submit – Кнопка завершения работы и передачи данных,
  • reset – Кнопка сброса.

valueЗначение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

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

Пример кнопки с рисунком

Кто это?

РЕЗУЛЬТАТ:

Кто это?

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

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

нажми на кнопку получишь результат

РЕЗУЛЬТАТ:

нажми на кнопку получишь результат

Источник: https://htmlweb.ru/html/form/button.php

     
         Здесь будет наша кнопка CSS
     

В браузере мы увидим только текст «Здесь будет наша кнопка CSS».

А теперь между тегами body (вместо слов  «Здесь будет наша кнопка») пишем самую простую разметку нашей кнопки:

     Кнопка

В браузере мы увидим вот это:

Но нас это естественно не устраивает, поэтому создаём файл стилей, в котором мы будем описывать цвет фона, размеры кнопки, градиент, обводку, тени и т.д.

В Notepad++ создаём новый файл, определяем ему синтаксис CSS и сохраняем под названием style.css.

Сам по себе файл style.css работать не будет, мы должны его подключить к файлу index.html, делается это следующим образом:

В файле index.html между тегами  в любое место вставляем вот эту строку:

На данном этапе наш index.html будет выглядеть вот так:

     
     
         
               Кнопка
         
     

Отлично! Поехали дальше…

Пишем стили для кнопки

Если вы делали дизайн кнопки с градиентом вместе со мной, то открывайте ваш файл дизайна в Photoshop.

Начнём с определения общего фона.

В Photoshop берём инструмент пипетка и щёлкаем по цвету общего фона мышкой.

Потом открываем палитру цветов и смотрим код цвета. Копируем его.

В файле style.css прописываем стиль общего фона, после знака # вставляем код цвета, который мы скопировали.

body {
background: #2953c6;
}

Далее задаём размеры нашей кнопке:

width: 300px;
height: 100px;

И цвет, т.е. градиент:

background: linear-gradient(to top,#001861,#6899FF);

Затем описываем стили границ кнопки.

border: 1px solid rgba(208,202,201,0.1);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

Делаем тень для кнопки:

box-shadow: 3px 3px 5px rgba(10,19,44,0.7);

И прописываем стили текста:

color: #fff;
font:normal 30px Verdana;
text-shadow:2px 2px 2px #000;

У нас получилась очень симпатичная кнопка CSS, точь-в-точь как на картинке.

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

button:hover{
background: linear-gradient(to top,#6899FF,#001861);
font:normal 36px Verdana;
}

В итоге у вас должен получиться вот такой файл style.css

/*Определяем стили для общего фона*/
body {
        background: #2953c6; }

/*Определяем стили для кнопки*/

button {
/*Задаём ширину и высоту кнопки*/
        width: 300px;
        height: 100px;/*Задаём фон самой кнопки, т.е. градиент*/
        background: linear-gradient(to top,#001861,#6899FF);
/*Описываем стили границ кнопки*/
        border: 1px solid rgba(208,202,201,0.1);
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
/*Тень*/
        box-shadow: 3px 3px 5px rgba(10,19,44,0.7);/*Стили текста*/
        color: #fff;
        font:normal 30px Verdana;
        text-shadow:2px 2px 2px #000;
}/*При наведении курсора мышки меняется градиент и размер текста*/
button:hover{
        background: linear-gradient(to top,#6899FF,#001861);
        font:normal 36px Verdana;
}

Ну вот и всё! Кнопка CSS готова!

Скачать результат.

Источник: http://www.fly-webmaster.ru/knopka-css.html

HTML Tag

A clickable button is marked up as follows:

Click Me!

Try it Yourself »

The tag defines a clickable button.

Inside a element you can put content, like text or images. This is the difference between this element and buttons created with the element.

Tip: Always specify the type attribute for a element. Different browsers use different default types for the element.

Tip: Buttons are often styled with CSS: Try it »

Browser Support

Element
Yes Yes Yes Yes Yes

Tips and Notes

Note: If you use the element in an HTML form, different browsers may submit different values. Use to create buttons in an HTML form.

Tip: Visit our CSS Buttons Tutorial to find out how to style buttons with CSS.

Differences Between HTML 4.01 and HTML5

HTML5 has the following new attributes: autofocus, form, formaction, formenctype, formmethod, formnovalidate, and formtarget.

Attributes

= New in HTML5.

AttributeValueDescription
autofocus autofocus Specifies that a button should automatically get focus when the page loads
disabled disabled Specifies that a button should be disabled
form form_id Specifies one or more forms the button belongs to
formaction URL Specifies where to send the form-data when a form is submitted. Only for type=»submit»
formenctype application/x-www-form-urlencoded multipart/form-data

text/plain

Specifies how form-data should be encoded before sending it to a server. Only for type=»submit»
formmethod get
post
Specifies how to send the form-data (which HTTP method to use). Only for type=»submit»
formnovalidate formnovalidate Specifies that the form-data should not be validated on submission. Only for type=»submit»
formtarget _blank _self _parent _top

framename

Specifies where to display the response after submitting the form. Only for type=»submit»
name name Specifies a name for the button
type button reset

submit

Specifies the type of button
value text Specifies an initial value for the button

Global Attributes

The tag also supports the Global Attributes in HTML.

Event Attributes

The tag also supports the Event Attributes in HTML.

Related Pages

HTML DOM reference: Button Object

CSS Tutorial: Styling Buttons

Default CSS Settings

None.

Источник: https://www.w3schools.com/tags/tag_button.asp

Ссылка на основную публикацию