Кнопки для сайта html

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

Кнопку на веб-странице можно создать двумя способами — с помощью тега <input> и тега <button>.

Рассмотрим вначале добавление кнопки через <input> и его синтаксис.

<input type="button" атрибуты>

Атрибуты кнопки перечислены в табл. 1.

Табл. 1. Атрибуты кнопок
Атрибут Описание
name Имя кнопки, предназначено для того, чтобы обработчик формы мог его идентифицировать.
value Значение кнопки и одновременно надпись на ней.

Создание кнопки показано в примере 1.

Пример 1. Добавление кнопки

HTML5IECrOpSaFx

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Кнопка</title>  </head>  <body>   <form>  <p><input type="button" value=" Нажми меня нежно "></p>  </form>  </body> </html>

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

Вид кнопки

Рис. 1. Вид кнопки

Второй способ создания кнопки основан на использовании тега <button>. Он по своему действию напоминает результат, получаемый с помощью тега <input>. Но в отличие от него предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML включая изображения и таблицы. На рис. 2 показаны разные виды кнопок, полученные с помощью <button>.

Кнопки, созданные с помощью <button>

Рис. 2. Кнопки, созданные с помощью <button>

Синтаксис создания такой кнопки следующий.

<button атрибуты>Надпись на кнопке</button>

Атрибуты перечислены в табл. 1, но в отличие от кнопки <input> атрибут value определяет только отправляемое на сервер значение, а не надпись на кнопке. Если требуется вывести на кнопке изображение, то тег <img> добавляется внутрь <button>, как показано в примере 2.

Пример 2. Рисунок на кнопке

HTML5IECrOpSaFx

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Кнопка</title>  </head>  <body>   <form>  <p><button>Кнопка с текстом</button>   <button>  <img src="images/umbrella.gif" alt="" style="vertical-align:middle">   Кнопка с рисунком  </button></p>  </form>  </body> </html> 

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

Кнопка Submit

Для отправки данных на сервер предназначена специальная кнопка Submit. Её вид ничем не отличается от обычных кнопок, но при нажатии на нее происходит выполнение серверной программы, указанной атрибутом action тега <form>. Эта программа, называемая еще обработчиком формы, получает данные, введенные пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде HTML-документа. Что именно делает обработчик, зависит от автора сайта, например, подобная технология применяется при создании опросов, форумов, тестов и многих других вещей.

Синтаксис создания кнопки Submit зависит от используемого тега <input> или <button>.

<input type="submit" атрибуты> <button type="submit">Надпись на кнопке</button>

Атрибуты те же, что и у рядовых кнопок (пример 3).

Пример 3. Отправка данных на сервер

HTML5IECrOpSaFx

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Кнопка</title>  </head>  <body>   <form>  <p><input name="login"></p>  <p><input type="submit"></p>  </form>  </body> </html> 

Атрибут name для этого типа кнопки можно не писать. Если не указать значение value, то браузер автоматически добавит текст, он различается в зависимости от браузера. Так, Firefox пишет «Отправить запрос», IE — «Подача запроса», Opera и Chrome — «Отправить». Сам текст надписи никак на функционал кнопки не влияет.

Кнопка Reset

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

Синтаксис создания указанной кнопки прост и похож на другие кнопки.

<input type="reset" атрибуты> <button type="reset">Надпись на кнопке</button>

В примере 4 показана форма с одним текстовым полем, которое уже содержит предварительно введённый текст с помощью атрибута value тега <input>. После изменения текста и нажатия на кнопку «Очистить», значение поля будет восстановлено и в нём снова появится надпись «Введите текст».

Пример 4. Кнопка для очистки формы

HTML5IECrOpSaFx

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Кнопка</title>  </head>  <body>   <form>  <p><input value="Введите текст"></p>  <p><input type="submit" value="Отправить">  <input type="reset" value="Очистить"></p>  </form>  </body> </html> 

Значение кнопки Reset никогда не пересылается на сервер. Если надпись на кнопке опустить, иными словами, не задавать атрибут value, на кнопке по умолчанию будет добавлен текст «Очистить».

htmlbook.ru

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

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

Пример 1.

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

<a href="">Button</a>
body {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% при наведении. Блоки, генерируемые с помощью псевдоэлементов, прозрачные, для них заданы левая/верхняя и правая/нижняя границы, которые проявляются при наведении, создавая эффект прорисовки.

<a href="">Button</a>
html {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.

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

<a href="">Button</a>
body {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.

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

<a href="">Button</a>
body {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%.

<a href="">Button</a>
body {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.

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

<a href="">Button</a>
body {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.

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

<a href="">Button</a>
body {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.

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

<a href=""><span>Button</span></a> 
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.

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

<a href="">Button</a>
body {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 градусов и смещен за левую границу кнопки. При наведении он перемещается за правую границу, создавая эффект блика.

<a href="">Button</a>
body {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;  }

html5book.ru

Код кнопки html для сайта — Копируй и вставляй!

код кнопки html для сайта
код кнопки html для сайта

  • Действие первое — скачиваем необходимые изображения для установки соц кнопок, которые я Вам приготовил — вот ссылка. После скачивания картинок соц кнопок, которые будут в архиве, разархивируйте и выберите для себя приемлемые. Затем поместите выбранные картинки на свой хостинг в папку, адрес которой Вам потом пригодится!
  • Действие второе — устанавливаем специальные стили CSS для того, чтобы наши кнопки на сайте ожили и стали анимированными. Вот код css:
/*-------------------Анимированные соц кнопки для сайта--------------*/ #social a:hover { background-color: transparent;opacity:0.7; } #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }

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

  • Действие третье — самое интересное! Создаем специальный HTML код, который будет выводить наши соц кнопки на сайте и превращать их в анимированные. Вот примерно такой код HTML:
<div id="social"> <a href="ВАША ССЫЛКА_1" target="_blank"><img style="margin-left: 15px;" title="ОПИСАНИЕ_1" alt="" src="ССЫЛКА НА КАРТИНКУ_1" width="48" height="48" /></a> <a href="ВАША ССЫЛКА_2" target="_blank"><img style="margin-left: 15px;" title="ОПИСАНИЕ_2" alt="" src="ССЫЛКА НА КАРТИНКУ_2" width="48" height="48" /></a> <a href="ВАША ССЫЛКА_3" target="_blank"><img style="margin-left: 15px;" title="ОПИСАНИЕ_3" alt="" src="ССЫЛКА НА КАРТИНКУ_3" width="48" height="48" /></a> <a href="ВАША ССЫЛКА_4" target="_blank"><img style="margin-left: 15px;" title="ОПИСАНИЕ_4" alt="" src="ССЫЛКА НА КАРТИНКУ_4" width="48" height="48" /></a> <a href="ВАША ССЫЛКА_5" target="_blank"><img style="margin-left: 15px;" title="ОПИСАНИЕ_5" alt="" src="ССЫЛКА НА КАРТИНКУ_5" width="48" height="48" /></a> <a href="ВАША ССЫЛКА_6" target="_blank"><img style="margin-left: 15px;" title="ОПИСАНИЕ_6" alt="" src="ССЫЛКА НА КАРТИНКУ_6" width="48" height="48" /></a> </div>

В данном html коде Вам нужно заменить символы, которые приведу ниже, на свои:

  • ВАША ССЫЛКА_№ — заменяем на вашу ссылку, при нажатии на которую посетитель будет попадать в необходимое место, например на Вашу страницу Вконтакте и т.д.
  • ОПИСАНИЕ_№ — здесь Вам нужно вписать описание, которое будет высвечиваться при наведении мышки на картинку. Например, если у Вас картинка Twitter, то соответственно напишите в описании аналогично.
  • ССЫЛКА НА КАРТИНКУ_№ — тут Вам необходимо вставить ту ссылку, которая будет вести к картинке закаченной ранее на хостинг. Помните я Вам говорил выше, чтобы Вы сохранили адрес к папке с картинками хранящимися на хостинге? Вот он как раз и пригодится здесь!

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

Всем удачи и благополучия! До новых встреч!

pribylwm.ru

Обычная кнопка

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

 <input type="button" value="Нажмите здесь!" onclick="location.href='любая ссылка'"> 

Выглядит это следующим образом:

Кнопка с фоновым изображением

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

 <a href="любая ссылка" target="_blank"><img src="ссылка на изображение"></a> 

Выглядит это следующим образом:

Кнопки для сайта html

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

  1. Создать изображение кнопки. Самостоятельно или с помощью онлайн-сервисов (например, cooltext.com).
  2. Загрузить на сайт изображение и получить ссылку на него. Для этого можно воспользоваться файловым менеджером.

Кнопки для сайта html

Кнопки для сайта html

Кнопка на CSS

Кнопку можно оформить с помощью CSS. Для этого добавьте стили в шаблон сайта и укажите класс кнопки.

Добавьте в разделе Панель управления / Дизайн / Редактор / CSS:

 .site-button {  background-color: #488bfa;  border: 2px solid #ffffff;  color: #ffffff;  padding: 12px 26px;  border-radius: 10px;  font-size: 17px; } 

Кнопки для сайта html

Тогда HTML-код самой кнопки будет следующим:

 <a href="любая ссылка" class="site-button">Нажмите здесь!</a> 

А на сайте кнопка отобразится так:

Нажмите здесь!

Не пугайтесь, если CSS кажется вам незнакомым и странным. Чтобы настроить кнопку под свои нужды, достаточно изменить отступы / размер шрифта в пикселях и цвет фона / текста в HEX (чтобы посмотреть все цвета, наберите в Яндексе запрос «hex цвета онлайн»).

Ваша кнопка на других сайтах

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

Обычная кнопка

 <textarea onclick="this.select()"><input type="button" value="Нажмите здесь!" onclick="location.href='любая ссылка'"> </textarea> 

Кнопка с фоновым изображением

 <textarea onclick="this.select()"><a href="любая ссылка" target="_blank"><img src="ссылка на изображение"></a> </textarea> 

Кнопка на CSS

 <textarea onclick="this.select()"><a href="любая ссылка" class="site-button">Нажмите здесь!</a></textarea> 

www.ucoz.ru

You May Also Like

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.