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


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

Я думаю, что эти генераторы существенно облегчат Вам задачу с поиском нужной кнопки на сайт. Так как здесь Вы сможете создать любую CSS кнопку, а так же произвести над ней очень тонкую настройку. Потому что все генераторы которые здесь достаточно функциональны. 

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

Ну а теперь давайте перейдём к кнопкам.

www.bestcssbuttongenerator.com

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

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

www.cssdrive.com

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

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

dryicons.com


Очень просто но к тому же достаточно функциональный генератор кнопок на CSS. тут есть все функции с помощью которых Вы сможете сделать именно то, что Вам нужно.

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

css3button.net

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

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

css3buttongenerator.com

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

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

www.cssbuttonmaker.com

Этот генератор сможет сделать самую лучшую CSS3 кнопку для Вас.

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

www.sciweavers.org

Самый классный генератор кнопок. Очень понравилось множество разнообразных функций, которые помогут точно настроить кнопку. А так же присутствует множество не плохих уже настроенных шаблонов.

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

beloweb.ru

Кнопка 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

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

В качестве обычной кнопки используются 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

Здравствуйте уважаемые начинающие веб-мастера.


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

В предыдущей статье мы научились создавать рамки.

В этой статье я покажу Вам несколько вариантов html кода для кнопок которые создаются при помощи тега button.

Тег button не является блочным элементом, и его можно вставлять в другие теги HTML.

Тем более это нужно делать, ведь обычно кнопка располагается как отдельный элемент, и если её не поместить в блок (p или div), то она расположиться в конце той строки, которая находится перед ней.

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

А вот результат, можно пощёлкать.

Следующую кнопку сделаем с применением тегов таблиц.
Код:

Результат:

К сожалению настройки моей темы не позволяют мне в полной мере использовать оформление таблицы, но об этом очень подробно рассказано и показано в статье Таблицы HTML


Оформление кнопки

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

А это значит, что кнопке можно будет придать более оригинальное оформление.

Код:

Результат действующий, можно пощёлкать, и посмотреть, как кнопка работает.

Давайте подробно рассмотрим, какие свойства мы применили для оформления.

1. background: #fdeaa8; — цвет кнопки;

2. width: 80px; — ширина кнопки;

3. height: 40px; — высота кнопки;

4. border-radius: 5px; — закруглённые уголки, если вместо 5px поставить 50%/50%, то кнопка станет округлой;

5. box-shadow: 0px 1px 3px; — создаёт тень, делает кнопку более выпуклой;

6. font-size: 20px; — размер текста;

7

В тег button можно вставить и картинку.

Код:

Результат:

Ещё один атрибут, который можно применить для кнопки — это title.

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

Обычно в нём указывается место, в которое ведёт данная кнопка.

Код:

Результат:

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

Для этого к тегу button применяется событие onclick.

В значении указывается адрес, по которому и будет осуществлён переход. К примеру так:

onclick="location.href=’https://starper55plys.ru/’;".

И полный код кнопки будет выглядеть так:

starper55plys.ru

Как оформлять в сss кнопки для сайта

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


Как создаются кнопки

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

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

С помощью того же тега input:

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

(или span если она должна быть строчным элементом). Естественно, этот вариант хуже тем, что вам придется дополнительно писать некоторые стили для оформления, а input type = “button” уже имеет некоторые по умолчанию.

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

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

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

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

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

Что ж, с созданием все понятно, а теперь вернемся к их оформлению. Допустим, мы создали ее с помощью input, что дальше? Если вам нужно изменить внешний вид элемента, то можно воспользоваться разными css-свойствами. Например, давайте пропишем такие:

Ширину и высоту элементу лучше не задавать, а размеры сформировать с помощью внутренних отступов. Добавим еще такие стили:

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

Вставка графики в кнопку. В качестве преимуществ тега button я указывал то, что можно вставить картинку. Но на самом деле ее без проблем можно сделать и в элементе input. Так даже правильнее, потому что изображение добавляется не тегом img, а с помощью задания фона. В качестве примера я использую изображение button.png.

Желательно в кнопки вставлять именно png-изображения, так как они могут хорошо улучшить внешний вид.

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

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

Соответственно, давайте допишем позицию фона. Для примера я предлагаю разместить картинку справа, а не слева. Также для этого нам придется изменить сторону, с которой у нас внутренний отступ. Его нужно сделать справа.

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

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

Трехмерность с помощью теней

Следующий прием выполняется с помощью одного из свойств css3 – box-shadow. Он позволяет добавить кнопке трехмерности, ведь иногда это нужно по дизайну. Раньше для этого требовалось использовать дополнительные изображения, сейчас же это вовсе необязательно, гораздо лучше использовать тень.

Сам прием очень простой, мы просто слегка смещаем тень и задаем ей цвет. Добавьте к стилям input такое свойство:

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

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

Внешний вид при наведении

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

Вот так вот селектор подошел бы в нашем случае. Он бы выбрал все input с типом button, на которые наведен курсор. Если нужно выбрать только 1 элемент, лучше к нему обращаться через стилевой класс или идентификатор. Соответственно, вы можете изменить цвет фона, текста, поменять картинку, трансформировать элемент и т.д. Если вы хотите, чтобы изменения происходили плавно, а не резко, то используйте свойство transition.

Теперь все изменения внешнего вида будут происходить плавно в течение 1 секунды. Итак, сегодня мы с вами посмотрели простые css свойства, которые можно применять для оформления кнопок. Как видите, ничего сложного. Более мощную информацию вы можете найти в премиум-курсе по CSS3, а я на этом с вами прощаюсь.

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

webformyself.com

Код кнопки 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 и css код

Устанавливаем кнопки на сайт

Для того чтобы установить кнопки на сайт, вам необходимо скачать архив с подготовленным файлом стилей, затем файл из архива «vermutoff-buttons.css» закачать к себе на сайт, в папку вашей темы. Закачать файл вы можете с помощью FTP клиента «FileZilla».

Далее вам нужно добавить одну строку кода в файл вашей темы header.php между тегами <head></head>. Этот код подключит только что закаченный вами файл стилей vermutoff-buttons.css:

<link rel="stylesheet" type="text/css" media="all" href="/здесь укажите адрес до папки с вашей темой/vermutoff-buttons.css" />

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

HTML коды кнопок

Кнопка 1а

<a class="button_a button_1 vermut_button" href="/">ЗАКАЗАТЬ</a>

Кнопка 1б

<a class="button_b button_1 vermut_button" href="/">ЗАКАЗАТЬ</a>

Кнопка 1в

<a class="button_v button_1 vermut_button" href="/">ЗАКАЗАТЬ</a>

Кнопка 2а

<a class="button_a button_2 vermut_button" href="/">ЗАКАЗАТЬ</a>

Кнопка 2б

<a class="button_b button_2 vermut_button" href="/">ЗАКАЗАТЬ</a>

Кнопка 2в

<a class="button_v button_2 vermut_button" href="/">ЗАКАЗАТЬ</a>

Кнопка 3а

<a class="button_a button_3 vermut_button" href="/">ЗАКАЗАТЬ</a>

Кнопка 3б

<a class="button_b button_3 vermut_button" href="/">ЗАКАЗАТЬ</a>

Кнопка 3в

<a class="button_v button_3 vermut_button" href="/">ЗАКАЗАТЬ</a>

Для того, чтобы кнопка вела на какую либо страницу вашего или чужого сайта, необходимо заменить href=»/» например на href=»http://onwordpress.ru».

www.onwordpress.ru

Тег input

Тег input может использоваться для создания различных элементов ввода на странице (текстовое поле ввода, кнопка и других) и принимать значения следующих атрибутов:

  • type — указывает на тип элемента (в нашем случае это button);
  • name — позволяет задать имя элемента (это необходимо, например, для идентефикации кнопки обработчиком формы);
  • value — задает значение для элемента (например, для передачи данных формы) и это значение выполняет роль надписи на кнопке.

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

<input type="button" name="nubex" value="Nubex" />

Результат:

Тег button

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

<button name="nubex" value="Nubex">  <img style="vertical-align: middle; width: 24px;" src="http://nubex.ru/files/siroezhkin/icon.png" alt="" />  Конструктор сайтов "Нубекс"  </button>

Результат:

Атрибуты тега button такие же, как и у input, отличие лишь в том, что значение value теперь не является надписью на кнопке, а служит только для передачи значения на сервер.

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

Третий вариант создания кнопки на странице — использование тега a, т. е. обычной ссылки. Вид кнопки ссылка приобретает при применении к ней нужных CSS-стилей. Рассмотрим вариант создания кнопки с помощью ссылки:

<!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Кнопка ссылка</title>   <style>  	a.nubex {  	color: #fff;  	user-select: none; /* Убираем текстовое выделение */  	text-decoration: none;	/* Убираем подчеркивание */  	outline: none; /* Убираем контур вокруг ссылки */  	background-color: #fa8e47; /* Цвет фона */  	padding: 1em 2em; /* Отступ от текста до рамки */  	}  	a.nubex:active {  	background-color: #ee6206; /* Цвет кнопки при нажатии */  	}  	a.nubex:hover {  	background-color: #f97f2e; /* Цвет кнопки при наведении курсора */  	}   </style>   </head>   <body>   <a href="#" class="nubex">Кнопка-ссылка</a>   </body>  </html>

Данный способ предоставляет большое преимущество и свободу в оформлении кнопки.

В конструкторе сайтов «Нубекс» кнопки-ссылки можно вставлять через визуальный редактор. О добавлении кнопок вы можете узнать больше в статье: Просто добавьте кнопку!

nubex.ru


You May Also Like

About the Author: admind

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

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

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