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

Большая коллекция кнопок CSS, кнопки HTML

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

Примеры 30 кнопок CSS3, только чистый код (без JS и картинок) , смотрим ниже!
Представляем на dle9.com замечательную коллекцию кнопок на CSS и HTML с валидным и качественным кодом.

  Дополнительно рекомендуем обзор с 26 простыми кнопками CSS, HTML, только чистый код (без JS) можно посмотреть, опробовать, по-нажимать и увидеть наглядный результат.

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

 HTML

<a href="#">кнопка</a>

CSS

 
Страница с примерами ниже, красивых и современных вариантов кнопок только на CSS и HTML
 
 
Из ссылки, тега span или div можно сделать с помощью CSS очень даже симпатичную кнопку. 




 HTML
    
<a href="#">кнопка</a>

CSS
 
Если кому интересно читаем тут описание , из каких элементов и тегов состоит кнопка для сайта или пропускаем смотрим примеры ниже.
  Самый простой способ изменить цвет, шрифт, размер, тень, градиент и другие стили кнопки HTML не нарушая целостности кода, воспользоваться супер инструментов вашего браузере. Подойдет для этих целей Мозила, Опера, Гугл Хром, Яндекс.Браузер и другие программы в которых встроен инструмент «Веб-разработка».

Как пользоваться инструментом «Веб-разработка Firefox Mozilla» подробно инструкция в картинках.  



    Простая HTML кнопка для сайта может содержать значение input, при создание кнопки с тегом button по своему действию напоминает результат, получаемый с помощью тега input (с атрибутом type=»button | reset | submit»).  Функционально и внешне они относительно одинаковы. Внутри тега button каждый вебмастер может добавить отформатированный текст, или подходящее изображение. Различаются эти элементы и кнопки с применением тега input (c атрибутом type = «button») несколькими параметрами.
 
    Главным отличием тега button, это расширенные возможности по созданию кнопок HTML. Например, вы можете размещать любые элементы HTML и изображения. Применив стили, можно изменить внешний вид кнопки, шрифт, цвета фона, градиент, размеры и другие параметры.
<input type="button" value="input"/>
<button type="button">button</button>
 
Когда применяется тег button?

тег button в качестве открывающегося и закрывающегося значения, может включать дочерние теги,
если текст на кнопке один, то применяется значение value, а при нажатие на копку может передаваться другой.
 
Для оформления кнопок на CSS3, часто используются ссылки обрамленные тегами span или div, благодаря им получается сделать на CSS эффектные и симпатичные кнопки.
    Как изменить вид кнопки при наведении, сделать эффект нажатия? Динамические эффекты вы сможете реализовать с помощью псевдоклассов:
    :hover — при наведении. С появлением сенсорных экранов необходимость в :hover отпала. Для остальных же нужно как минимум изменение вида курсора мышки, чтобы дать понять, что элемент не является декорацией.
 
     :active — в момент нажатия кнопки. Когда на странице тут же что-то явно происходит, например, переход по ссылке, загрузка модального окна, появляется значок обработки формы, то :active можно опустить.
 
    :focus — пока кнопка в фокусе, то есть когда пользователь нажал на кнопку, но ещё не щёлкнул курсором мышки в другое место окна браузера. Без :focus невозможно объединить visibility: hidden; и transition. Если слишком быстро убрать мышку, то элемент повиснет в «половинном» состоянии, например, ссылка будет прозрачна, но по ней можно делать переход.
Сложнее всего сделать и продумать вид, задать параметры, понять, как должны изменяться эффекты во время нажатия кнопки, не нарушая целостность дизайна или вёрстки страницы. Чаще всего самый простой внешний вид, выглядит более стильно, чем навороченная с крутыми элементами и цветом кнопка. Большая коллекция кнопки CSS / HTML
 

Код кнопки для сайта
 
 HTML
<a href="#">кнопка</a>

CSS




 HTML

    
<a href="#">кнопка</a>

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

Градиенты плохо поддаются анимации, плавной смене цвета фона. Проблему можно решить с помощью: box-shadow .



 HTML
<a href="#">кнопка</a>

CSS
 
 
Забронировать кнопка CSS
 

Всякие перемещения работают на ура.



 HTML
<a href="#" tabindex="0">кнопка</a>

CSS
 
Положить в корзину кнопка CSS
 

Довольно популярно разделение кнопки на два цвета



 HTML
<a href="#">кнопка</a>

CSS

Красивые кнопки CSS
 
 HTML
<a href="#">кнопка</a>

CSS

 HTML
<a href="#">кнопка</a>

CSS
 
Как у Mozilla кнопка CSS
 


 HTML
<a href="#" tabindex="0">кнопка</a>

CSS

 HTML
<a href="#">Заказать</a>

CSS


 HTML
 
<a href="#">Установить</a>

CSS
 
Кнопки «Скачать» CSS
 



 HTML
<a href="#">Скачать
бесплатно первые 30 дней</a>

CSS


 HTML
<a href="#">Скачать</a>

CSS
 
Стилизация кнопок с помощью CSS
 Анимированная кнопка: «свечение текста»



 HTML
<input type="button" value="Купить">

CSS

 HTML
<input type="button" value="запись">

CSS
 
Стиль кнопок с бликами
 


 HTML
<a href="#">кнопка</a>

CSS
 
Стеклянная кнопка CSS
 


 HTML
<a href="#">кнопка</a>
  
CSS

 HTML
<a href="#">кнопка</a>

CSS


 HTML
<a href="#">кнопка</a>

CSS


 HTML
<a href="#" tabindex="0">кнопка</a>

CSS


 HTML
<a href="#">1</a>

CSS
 
Объёмные кнопки CSS
 


 HTML
<a href="#">кнопка</a>

CSS


 HTML
<a href="#">кнопка</a>

CSS


 HTML
<a href="#">Объёмная</a>

CSS
 
Кнопка CSS положить в корзину
 


  HTML
<a href="#">Объёмная</a>

CSS
 
Вдавленная кнопка
 


 HTML
<a href="#">Заказать</a>

CSS
 
 
Выпуклая кнопка HTML
 
 

 
    
 
    
 HTML
    
    
<a href="#">Заказать</a>

CSS
     
Круглые CSS кнопки
 
    
    
 HTML
<a href="#"></a>

CSS
    
 HTML
<a href="#">+</a>

CSS
     
Анимированная кнопка CSS
 
    
Анимированное заполнение (тут нет лишнего кода, связанного с кнопкой).

    
    
 HTML
<a href="#" tabindex="0"><span></span></a>
  
CSS
    

     HTML
<a href="#" tabindex="0"></a>

CSS
     
3d кнопка CSS
 
    

    HTML
<a href="#" tabindex="0">кнопка</a>

CSS
 
 — Веб-технологии для разработчиков
Описание
 

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

 

 

 

  

   
Категории контента
   
Общий поток, текстовый контент, интерактивный контент, listed, labelable, и submittable form-associated элемент, очевидный контент.
  
  

   
Разрешённый контент
   
Текстовый контент.
  
  

   
Tag omission
   
None, both the starting and ending tag are mandatory. 
  
  

   
Разрешённый родительский контент
   
Любой элемент с поддержкой текстового контета.
  
  

   
Разрешённые роли ARIA
   

    
checkbox, link, menuitem, 
menuitemcheckbox, menuitemradio, radio, switch
 , tab

   
  
  

   
DOM interface
   
HTMLButtonElement
  
  

   
Тип
   
Строчный
  
 


 
Атрибуты
 

Элемент поддерживает глобальные атрибуты.


 
autofocus HTML5
 
Данный булевый атрибут позволяет указать, будет ли кнопка автоматически сфокусирована после загрузки страницы, до тех пор, пока пользователь не изменит фокус в ручную, например выбрав другой элемент. Только один связанный с формой элемент в документе может иметь данный атрибут.
 
autocomplete  
 
Использование данного атрибута на элементе  <button> не описано в стандарте и используется только в Firefox браузере. По умолчанию, в отличие от прочих браузеров, Firefox сохраняет назначенное динамически отключенное состояние для элемента <button> при последующих загрузках страницы. Установка для данного атрибута значения off отключает подобное поведение. Смотрите баг 654072.
 
disabled
 

 
Булевый атрибут, указывающий, что пользователь не может взаимодействовать с кнопкой. Если атрибут не установлен, то кнопка наследует его от элемента-контейнера, в котором она расположена, например от <fieldset>; если отсутсвует элемент-контейнер, с установленным атрибутом disabled, то кнопка доступна для взаимодействия.

 
Firefox по умолчанию, в отличие от прочих браузеров, сохраняет назначенное динамически отключенное состояние для элемента <button>, даже при обновлении страницы. Чтобы изменить поведение браузера в этом случае, используйте атрибут autocomplete.
 
 
form HTML5
 
Атрибут form позволяет указать элемент <form>, с которым связана кнопка. Данный атрибут должен хранить значение id элемента <form>. Если данный атрибут не установлен, то элемент <button> будет связан с родительским элементом <form>, если последний существует.
 
Атрибут работает независимо от расположения элементов в документе, поэтому он позволяет связать элемент <button> с формой, даже в случае, если <button> не является наследником элемента <form>.
 
formaction HTML5
 
Ссылка на обработчик формы. Если атрибут определен — он переопределит атрибут action у формы-родителя.
 
formenctype HTML5
 
Если button имеет тип submit, то этот атрибут определяет тип контента, отправляемого на сервер. Возможные значения данного атрибута:
 

  
application/x-www-form-urlencoded: значение по умолчанию, если атрибут не указан.
  
multipart/form-data: следует использовать это значение, если форма содержит элемент <input> со значением атрибута type file.
  
text/plain
 

 
Если этот атрибут определен, он переопределяет атрибут enctype у формы-родителя.
 
 
formmethod HTML5
 
Если button имеет тип submit, то этот атрибут определяет метод HTTP-запроса для отправки данных на сервер. Возможные варианты:
 

  
post: данные формы включаются в тело сообщения и отправляются на сервер.
  
get: данные формы отправляются на сервер в виде ссылки, состоящей из URI атрибута action и непосредственно данных, отделенных знаком ‘?’. Данные формы будут иметь вид ключ/значение и разделены амперсандом, например name=Name&id=35. Следует использовать этот метод только если нет побочных эффектов и данные формы содержат лишь ASCII-символы.
 

 
Если этот атрибут определен, он переопределяет атрибут method у формы-родителя.
 
 
formnovalidate HTML5
 
Булевый атрибут. Указывает, что данные формы не будут валидироваться при отправке.
 
Если этот атрибут определен, он переопределяет атрибут novalidate у формы-родителя.
 
formtarget HTML5
 
Если button имеет тип submit, этот атрибут является именем или ключевым словом,
 
указывающим, где отображать ответ, полученный после отправки формы. This is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). If this attribute is specified, it overrides the target attribute of the button’s form owner. The following keywords have special meanings:

 

  
_self: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
  
_blank: Load the response into a new unnamed browsing context.
  
_parent: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
  
_top: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.
 
 
 
name
 
The name of the button, which is submitted with the form data.
 
type
 
The type of the button. Possible values are:
 

  
submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
  
reset: The button resets all the controls to their initial values.
  
button: The button has no default behavior. It can have client-side scripts associated with the element’s events, which are triggered when the events occur.
  
menu: The button opens a popup menu defined via its designated <menu> element.
 
 
 
value
 
The initial value of the button.


Пример

<button name="button">Тык!</button>
Please note that this button has CSS applied.
Спецификации
Browser compatibility
Feature
Chrome
Firefox (Gecko)
Internet Explorer
Opera
Safari
Basic support
1.0
1.0 (1.7 или ранее)
(Да)
(Да)
(Да)
formaction attribute
9.0
4.0 (2.0)
10
?
?
formenctype attribute
9.0
4.0 (2.0)
10
10.6
?
formmethod attribute
9.0
4.0 (2.0)
10
?
?
autofocus attribute
5.0
4.0 (2.0)
10
9.6
5.0
menu value for type attribute
Нет
Нет[1]
Нет
Нет
?
Feature
Android
Firefox Mobile (Gecko)
IE Mobile
Opera Mobile
Safari Mobile
Basic support
(Да)
1.0 (1.0)
(Да)
(Да)
(Да)
formaction attribute
?
4.0 (2.0)
?
?
?
formenctype attribute
?
4.0 (2.0)
?
?
?
formmethod attribute
?
4.0 (2.0)
?
?
?
menu value for type attribute
?
?
?
?
?
[1] Gecko does not implement this feature yet. See баг 1241353.
Clicking and focus
Whether clicking on a <button> causes it to (by default) become focused varies by browser and OS. The results for <input> of type="button" and type="submit" were the same.
Does clicking on a <button> give it the focus?
Desktop Browsers
Windows 8.1
OS X 10.9
Firefox 30.0
Yes
No (even with a tabindex)
Chrome 35
Yes
Yes
Safari 7.0.5
N/A
No (even with a tabindex)
Internet Explorer 11
Yes
N/A
Presto (Opera 12)
Yes
Yes
Does tapping on a <button> give it the focus?
Mobile Browsers
iOS 7.1.2
Android 4.4.4
Safari Mobile
No (even with a tabindex)
N/A
Chrome 35
No (even with a tabindex)
Yes
Notes
<button> elements are much easier to style than <input> elements. You can add inner HTML content (think <em>, <strong> or even <img>), and make use of :after and :before pseudo-element to achieve complex rendering while <input> only accepts a text value attribute.
IE7 has a bug where when submitting a form with <button type="submit" name="myButton" value="foo">Click me</button>, the POST data sent will result in myButton=Click me instead of myButton=foo.
IE6 has an even worse bug where submitting a form through a button will submit ALL buttons of the form, with the same bug as IE7.
This bug has been fixed in IE8.
Firefox will add, for accessibility purposes, a small dotted border on a focused button. This border is declared through CSS, in the browser stylesheet, but you can override it if necessary to add your own focused style using button::-moz-focus-inner { }
Firefox will, unlike other browsers, by default, persist the dynamic disabled state of a <button> across page loads. Setting the value of the autocomplete attribute to off disables this feature. See баг 654072.
Firefox <35 for Android sets a default background-image gradient on all buttons (see баг 763671). This can be disabled using background-image: none.
See also
Other elements that are used for creating forms: <form>, <datalist>, <fieldset>, <input>,<keygen>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>.
Тег  | HTML справочник
 HTML теги
Значение и применение
HTML тег <button> используется для размещения кнопки. Внутри тега <button> вы можете разместить как отформатированный текст, так и изображение. Это основная разница между этим элементом и кнопками, созданными с использованием тега <input> (c атрибутом type = «button»).
Всегда указывайте для тега <button> тип атрибута  type = «button» если элемент используется в качестве обычной кнопки. Если вы используете тег <button> внутри HTML формы, то вы можете столкнуться с тем, что старые версии браузеров могут представить различные значения при отправке формы. Рекомендуется в этом случае использовать элемент <input> для отправки HTML форм.
Поддержка браузерами
Атрибуты
Атрибут
Значение
Описание
autofocus
autofocus
Логический атрибут, который указывает, что кнопка должна автоматически получить фокус при загрузке страницы.
disabled
disabled
Является логическим атрибутом и указывает, что кнопка должна быть отключена (недоступна для взаимодействия с пользователем).
form
form_id
Задает форму (элемент <form>) к которой кнопка принадлежит. В качестве значения должен выступать идентификатор формы (id) в этом же документе.
formaction
URL
Указывает URL файла, который будет обрабатывать (контролировать) входную информацию после отправки формы (только для <button type = «submit» >).
formenctype
application/x-www-form-urlencoded
multipart/form-data
text/plain
Определяет, как данные формы должны быть закодированы при передаче на сервер (только для <button type = «submit» >).
formmethod
get
post
Определяет, какой метод HTTP использовать при отправке данных формы (только для <button type = «submit» >).
formnovalidate
formnovalidate
Указывает, что проверка данных на корректность, введенных пользователем в форму не производится (только для <button type = «submit» >).
formtarget
_blank
_self
_parent
_top
framename
Задаёт браузеру, где показать ответ, полученный после отправки формы (вкладка, текущее окно, или фрейм). По умолчанию установлено значение _self — отображает ответ в текущем окне. Используется только для <button type = «submit» >.
name
name
Задает имя для кнопки, которое передается при отправке формы.
type
button
reset
submit
Указывает тип кнопки. Значение по умолчанию submit.
value
text
Определяет начальное значение для кнопки.
Пример использования
<!DOCTYPE html>
<html>
	<head>
		<title>Тег <button></title>
	</head>
	<body>
		<button type = "button" name = "button1" style = "width: 80px; height:50px;">
			<b>Кнопка 1</b>
		</button><br><br>
		<button type = "button" name = "button2" style = "width: 80px; height:50px">
			<img src = "../../images/top2.png" alt = "up" width = "40" height = "40">
		</button><br><br>
		<button type = "button" name = "button3" style = "width: 80px; height:50px;">
			<i>Кнопка 3</i>
		</button><br><br>
	</body>
</html>
В данном примере мы разместили 3 кнопки, которым задали уникальные имена атрибутом name и с использованием внутренних CSS стилей указали ширину (width) размером 80 пикселей и высоту (height) размером 50 пикселей:
Текст внутри первой кнопки мы отформатировали жирным начертанием (тег <b>). Обратите внимание, что текст, который мы поместили внутри тега отображается на самой кнопке.
Внутри второй кнопки элементом <img> мы разместили *.png изображение (с прозрачным задним фоном). Атрибутом alt мы задали альтернативный текст для изображения, для того случая если оно по каким-то причинам не будет загружено (обязательный атрибут), относительный путь к изображению мы задали атрибутом src (обязательный атрибут), атрибутами width (ширина) и height (высота) задали размеры изображения равными 40 на 40 пикселей. Обратите внимание, что в атрибутах, которые задают размер не требуется указывать единицы измерения в отличии от CSS стилей, по той причине, что атрибутами можно указать значение только в пикселях.
Текст внутри третьей кнопки мы отформатировали курсивным начертанием (тег <i>).
Результат нашего примера:
 Пример использования тега <button> (кнопкa в HTML).
В следующем примере рассмотрено применение атрибутов, которые позволяют не производить проверку данных на корректность, введенных пользователем и задать браузеру, где показать ответ, полученный после отправки формы.
<!DOCTYPE html>
<html>
	<head>
		<title>Использование атрибутов formnovalidate и formtarget HTML тега <button></title>
	</head>
	<body>
		<form id = "myForm">
			<input type = "text" name = "ulogin" placeholder = "Ваше имя"><br> <!-- определяем элемент управления для текстовой информации -->
			<textarea name = "uquestion" cols = "35" rows = "5" placeholder = "Ваш вопрос"></textarea><br>
			<button formtarget = _blank formnovalidate>Отправить</button> <!-- определяем кнопку для отправки формы -->
		</form>
	</body>
</html>
В данном примере внутри формы мы создали два элемента <input>, предназначенные для ввода текстовой информации и ввода пароля, и кнопку (HTML тег <button>), предназначенную для отправки формы (тип кнопки submit по умолчанию). Кроме того, атрибутом formtarget со значением «_blank» указали, что при передаче формы ответ будет отображен в новой вкладке, а логическим атрибутом formnovalidate указали, что проверка данных на корректность, введенных пользователем в форму не производится.
Результат нашего примера:
 Пример использования атрибутов formnovalidate и formtarget HTML тега <button>.
Отличия HTML 4.01 от HTML 5
 В HTML 5 добавлены 7 новых атрибутов.
Значение CSS по умолчанию
 Нет.
Поддержка глобальных атрибутов
 Элемент поддерживает «глобальные атрибуты».
Атрибуты событий
 Элемент поддерживает «атрибуты событий». 
HTML теги
HTML кнопка – незаменимый помощник для навигации по сайту
Почти все люди (некоторые больше, некоторые – меньше) любят порядок, потому что порядок – это всегда удобно. Удобно, когда у человека порядок на рабочем столе, на работе, в квартире. И очень удобно, когда заходишь на незнакомый сайт, а там тоже – порядок, всё легко и просто.
Обычно такой порядок называется дружественным (интуитивно понятным) интерфейсом. Html кнопка – это просто незаменимое средство для наведения порядка на сайте и организации дружественного интерфейса.
Кнопки для сайта HTML создаются одним из двух способов:
1.	С помощью тега input. Синтаксис такой команды выглядит следующим образом:
<input type="button" value=надпись на кнопке>
2.	 С помощью тега button:
<button>Надпись на кнопке</button>

Пример кода, который выполняет создание кнопки в <b>html</b> сразу двумя этими способами:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
 </head>
 <body> 
  <form>
   <p><input type="button" value=" Кнопочка1 "></p>
   <p><button>Кнопочка2</button></p>
  </form>
 </body>
</html>
В результате получаются две одинаковые кнопки:

Таким образом, хотя получились две абсолютно одинаковые кнопки html, код для них немного разный. Не имеет значения, как создать кнопку в html.
Разница между двумя методами состоит лишь в том, что при использовании тега button – вы можете поместить в контейнер свой набор в виде картинки и текста, и это все будет активно, а при использовании тега input возможно будет использовать либо только картинку, либо только текст.
Но при этом старые версии браузера Internet Explorer могут неправильно отображать современный тег button.
Кнопка со ссылкой HTML (например, кнопка наверх для сайта html или кнопка назад html) может быть создана с помощью ссылок «якорей». Обычный «якорь» имеет следующий вид:
 Такой «якорь» невидим и может быть поставлен в любом месте, в котором вы считаете нужным.  Для того чтобы перейти к «якорю», используется следующая команда:
<a href="#имя якоря">название кнопки</a>
Нажатие на название кнопки, моментально переводит курсор к «якорю».
Допустим, нам нужно, чтобы внизу сайта стояла кнопка перехода на начало, а в начале – для перехода вниз:
<!DOCTYPE html>
<html>
 <head>
    <title>Якорь</title>
 </head>
 <body> 
  <form>
   <a name="top"></a>
   <p><a href="#end">вниз</a></p>
…
   <p><a href="#top">вверх</a></p>
…
   <a name="end"></a>
  </form>
 </body>
</html>
Выглядит это следующим образом:
Кнопки типа Submit существуют для отправки информации, введённой посетителем сайта, на сервер. Например, простейшая организация ввода пароля выглядит так:
<p><input name="login"></p>
<p><input type="submit"></p>
Кнопки типа Reset предназначены для обновления данных форм (возврата их в первоначальное состояние). Для того чтобы создать такую кнопку, следует использовать следующий код:
<input type="reset" value="Название кнопки">
В HTML кнопки можно украшать какими-либо картинками. Для этого достаточно использовать следующий код:
<input type="image" src="ссылка на картинку">"
Кнопка с картинкой и текстом:
<button> <img alt="" src="ссылка на картинку" />Нажмите, чтобы посмеяться</button>
Например:

Таким образом, при создании кнопок HTML можно проявить свою выдумку: любые дизайнерские фантазии реализуются написанием достаточно простого кода.
Удачи!
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, Вебмастеру, для сайта
HTML5 | Кнопки
Кнопки
Последнее обновление: 08.04.2016
Кнопки представлены элементом button. Они обладают широкими возможностями по конфигурации. Так, в зависимости от значения атрибута 
 type мы можем создать различные типы кнопок:

submit: кнопка, используемая для отправки формы
reset: кнопка сброса значений формы
button: кнопка без какого-либо специального назначения
Если кнопка используется для отправки формы, то есть у нее установлен атрибут type="submit", то мы можем задать у нее ряд дополнительных атрибутов:

form: определяет форму, за которой закреплена кнопка отправки
formaction: устанавливает адрес, на который отправляется форма. Если у элемента form задан атрибут action, то он переопределяется
formenctype: устанавливает формат отправки данных. Если у элемента form установлен атрибут enctype, то он переопределяется
formmethod: устанавливает метод отправки формы (post или get). Если у элемента form установлен атрибут method, то он переопределяется
Например, определим на форме кнопку отправки и кнопку сброса:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Формы в HTML5</title>
	</head>
	<body>
		<form>
			<p><input type="text" name="login"/></p>
			<p><input type="password" name="password"/></p>
			<p>
				<button type="submit" formmethod="get" formaction="index.html">Отправить</button> 
				<button type="reset">Отмена</button>
			</p>
		</form>
	</body>
</html>
Кроме элемента button для создания кнопок можно использовать элемент input, у которого атрибут равен submit или reset. Например:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Формы в HTML5</title>
	</head>
	<body>
		<form>
			<p><input type="text" name="login"/></p>
			<p><input type="password" name="password"/></p>
			<p>
				<input type="submit" value="Отправить" /> 
				<input type="reset" value="Отмена" />
			</p>
		</form>
	</body>
</html>
И еще один элемент input с атрибутом type="image" позволяет использовать в качестве кнопки изображение:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Форма ввода в HTML5</title>
	</head>
	<body>
		<form>
			<p>
				<input type="text" name="search" />
				<input type="image" src="search.png" name="submit" />
			</p>
		</form>
	</body>
</html>
Кроме наличия изображения в остальном эта кнопка будет аналогична стандартной кнопке отправки input type="submit" или button type="submit".
Верстка кнопок на сайте
 
Вы здесь:
 Главная					 — 			HTML					 — 			HTML 5					 — 			Верстка кнопок на сайте
 
 
  
Какие кнопки обычно встречаются на сайте? Я разделили бы их на два вида: кнопки внутри формы и кнопки-ссылки. И те и другие необходимо уметь верстать.

Кнопки внутри формы
 

Тег input
 

Вставляются тегом input, c типом submit – что означает кнопку для отправки формы.

 
<input type="submit" value="Отправить">
 
 

Тег button
 
 
Вставляет на сайт кликабельную кнопку, работающую, в любом месте сайта.
 
Тег button по сравнению с input, располагает большими возможностями, внутри него можно вставлять любой контент (текст, изображения).
 
Но не надо забывать, что если при нажатии кнопки, должны отправиться данные на сервер, то теги input и button, следует поместить внутри тега form.
 
Теги input и button могут обрабатываться скриптом, например при событии клика.

 
<button type="button">Нажми меня!</button>
 
 

Пример верстки кнопок внутри формы
 

Button
 

See the Pen CSS3 responsive form by porsake (@porsake) on CodePen.


Input
 

See the Pen Responsive Form by porsake (@porsake) on CodePen.


 

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

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

 
<a href="#">Learn More</a>
 
 

Пример верстки кнопки ссылки #1
 

HTML
 

 
<a href="#">Купить</a>
 
 

CSS
 

Тег a по умолчанию является строчным элементом, если не задать ему display: inline-block, то к нему не применятся отступы, рамки и другие стили.

  
body {

  background-color: #951a46; /* цвет фона всей страницы */

  font-family: Roboto, sans-serif; /* семейство шрифта */

}
.button {

  display: inline-block; /* строчно-блочный */

  margin: 100px 400px; /* отступы от края браузера */

  padding: 20px 60px; /* расстояние от текста до края кнопки */

  background-color: #e44b9b; /* цвет кнопки  */

  box-shadow: 0px 6px #f7f8e8; /* задана тень */

  border-radius: 5px; /* скругление углов */

  font-size: 27px; /* размер шрифта */

  text-transform: uppercase; /* трансформировать в заглавные буквы */

  text-decoration: none; /* не подчеркивать ссылку */

  transition: 0.2s; /* плавный ховер эффект */

  color: #f7f8e8; /* цвет текста на кнопке */

}
.button:hover {

  background-color: #949a9a; /* замена цвета кнопки при наведении */

}

 

Скриншот
 

 
 

Пример верстки кнопки ссылки #2
 

HTML
 

 
<a href="#">Shop Now</a>
 
 

CSS
 

 
body {

  background-color: #3cc395;

}
.button {

  display: inline-block;

  margin: 100px 400px;

  color: #fff;

  font-family: BebasNeue;

  font-size: 160%;

  font-weight: bold;

  text-transform: uppercase;

  background-color: transparent;

  border-radius: 13px;

  border: 3px solid #fff;

  padding: 6px 20px;

}

 

Скриншот
 

 


  
 Создано 24.04.2019 10:33:30

 
 Михаил Русаков
 
 
 Предыдущая статья		Следующая статья
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):


 Кнопка:
 
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>
Она выглядит вот так: 


 Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>
Она выглядит вот так: Как создать свой сайт

BB-код ссылки для форумов (например, можете поставить её в подписи):
 
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

 HTML тег кнопки 
 
 Пример 
 Кнопка, на которую можно нажать, помечена следующим образом:
  Нажми меня! 
 Попробуй сам »
 Дополнительные примеры «Попробуйте сами» ниже.
 Определение и использование 
 Тег    определяет кнопку, на которую можно нажимать.
 Внутри элемента    можно поместить текст
(и такие теги, как , , 
,  и т. д.). Это невозможно с
кнопка, созданная с помощью элемента !
  Совет:  Всегда указывайте атрибут типа для элемента   ,
чтобы сообщить браузерам, что это за кнопка.
  Совет:  Вы можете легко стилизовать кнопки с помощью CSS! Посмотрите на
примеры ниже или посетите наши кнопки CSS
руководство.
 Поддержка браузера 
 Элемент
 <кнопка>
 Есть
 Есть
 Есть
 Есть
 Есть
 Атрибуты 
 Атрибут
 Значение
 Описание
 автофокус
 автофокус
 Указывает, что кнопка должна автоматически получать фокус при загрузке страницы.
 отключен
 отключен
 Указывает, что кнопка должна быть отключена
 форма
  form_id 
 Определяет, какой форме кнопка принадлежит
 форма действия
  URL 
 Указывает, куда отправлять данные формы при отправке формы.Только для type = «submit»
 formenctype
 приложение / x-www-form-urlencoded 
 multipart / form-data 
 текст / простой
 Определяет, как данные формы должны кодироваться перед их отправкой на сервер. Только для type = «submit»
 метод формы
 получить 
 пост
 Определяет, как отправлять данные формы (какой HTTP-метод использовать).Только для type = «submit»
 formnovalidate
 formnovalidate
 Указывает, что данные формы не должны проверяться при отправке. Только для type = «submit»
 formtarget
 _ пустой 
 _self 
 _parent 
 _top 
  название 
 Указывает, где отображать ответ после отправки формы.Только для type = «submit»
 название
  наименование 
 Задает имя для кнопки
 тип
 кнопка 
 сбросить 
 отправить
 Определяет тип кнопки
 значение
  текст 
 Задает начальное значение для кнопки
 Глобальные атрибуты 
 Тег    также поддерживает глобальные атрибуты в HTML.
 Атрибуты событий 
 Тег    также поддерживает атрибуты событий в HTML.
 Другие примеры 
 Пример 
 Используйте CSS для стилизации кнопок:
 
 
 
 
 .кнопка {
 граница: нет; 
 цвет: белый; 
 отступ: 15 пикселей 32 пикселя; 
 выравнивание текста: центр; 
 текстовое оформление: нет; 
 дисплей:
 встроенный блок; 
 размер шрифта: 16 пикселей; 
 поля: 4px 2px; 
 курсор: указатель; 
}
.button1 {цвет фона:
 # 4CAF50;} / * Зеленый * / 
 .button2 {background-color: # 008CBA;} / * Синий * / 
  
 
  Зеленый  
  Синий 
  
 Попробуй сам »
 Пример 
 Используйте CSS для стилизации кнопок (с эффектом наведения):
 
 
 
 
 .кнопка {
 граница: нет; 
 цвет: белый; 
 отступ: 16 пикселей 32 пикселей; 
 выравнивание текста: центр; 
 текстовое оформление: нет; 
 дисплей:
 встроенный блок; 
 размер шрифта: 16 пикселей; 
 поля: 4px 2px; 
 продолжительность перехода: 0.4с; 
 курсор: указатель; 
}
 .button1 {
 цвет фона: белый; 
 цвет: черный; 
 граница: 2 пикселя
 твердый # 4CAF50; 
}
 .button1: hover {
 background-color: # 4CAF50; 
 цвет белый; 
}
 .button2 {
 background-color: white; 
 цвет:
 черный; 
 граница: сплошная 2 пикселя # 008CBA; 
}
 .button2: наведение {
 цвет фона: # 008CBA; 
 цвет: белый; 
}
  
 
  Green  
  Blue 
 
 Попробуй сам »
 Связанные страницы 
 Ссылка на HTML DOM: объект кнопки
 CSS Tutorial: Styling Buttons
 Настройки CSS по умолчанию 
 Нет.
 
 ,
 Тип кнопки HTML Атрибут 
 ❮ HTML тег 
 Пример 
 Два кнопочных элемента, которые действуют как одна кнопка отправки и одна кнопка сброса (в форме):
 
  Имя:  
  
 
 
  Фамилия:  
  
 
 
  Отправить  
  Сброс  
 
 Попробуй сам »
 Определение и использование 
 Атрибут type указывает тип кнопки.
  Совет:  Всегда указывайте атрибут типа для элемента .
Разные браузеры могут использовать разные типы по умолчанию для элемента .
 Поддержка браузера 
 Атрибут
 тип
 Есть
 Есть
 Есть
 Есть
 Есть
 Синтаксис 
 
 Значения атрибутов 
 Значение
 Описание
 кнопка
 Кнопка кликабельная
 отправить
 Кнопка является кнопкой отправки (отправка данных формы)
 сброс
 Кнопка — это кнопка сброса (сбрасывает данные формы в исходные значения)
 ❮ HTML тег  ,
 Как создать текстовые кнопки 
 Узнайте, как стилизовать текстовые кнопки с помощью 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 пикселей; 
 курсор: указатель; 
 дисплей: встроенный блок; 
}
 / *
 Зеленый * / 
. Успех {
 цвет: зеленый; 
}
. Успех: наведение {
 цвет фона: # 4CAF50; 
 цвет: белый; 
}
 / * Синий * / 
 .info {
 цвет: голубой; 
}
 .info: hover {
 background:
 # 2196F3; 
 цвет: белый; 
}
 / * Оранжевый * / 
.предупреждение {
 цвет:
 оранжевый; 
}
. Предупреждение: завис
 {
 фон: # ff9800; 
 цвет:
 белый; 
}
 / * Красный * / 
 .danger {
 цвет: красный; 
}
. Опасность: парение {
 фон: # f44336; 
 цвет: белый; 
}
 / * Серый * / 
. По умолчанию
 {
 цвет: черный; 
}
. По умолчанию: hover {
 background:
 # E7e7e7; 
}
 Попробуй сам »
 Перейдите к нашему руководству по кнопкам CSS, чтобы узнать
подробнее о стилях кнопок.
 
 ,
 Как создать кнопку HTML, которая действует как ссылка? 
 Переполнение стека
 Товары
 Клиенты
 Случаи использования
 Переполнение стека
 Общественные вопросы и ответы
 Команды
 Частные вопросы и ответы для вашей команды
 предприятие
 Частные вопросы и ответы для вашего предприятия
 работы
 Программирование и связанные с ним возможности технической карьеры
 Талант
 Нанять технических талантов
 реклама
 Обратитесь к разработчикам по всему миру
 Загрузка…
.
No related posts.