50 примеров CSS3 кнопок с эффектами и анимацией. Кнопка для сайта


Онлайн сервис для создания кнопок

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

(В Конце статьи важная поправка)

Онлайн сервис для создания кнопок

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

css создание кнопки

Конечно, набросать стили – это дело 5 минут, но есть и такие люди, которым не хочется вникать в структуру и им нужен только результат. А кто-то еще не умеет — в общем, если вам лень самому писать стили, то в этой статье я, как раз, и расскажу о сервисе dabuttonfactory.com, в котором можно быстро получить css оформление подобной кнопки.

Итак, заходим на сайт. Перед нами откроется страничка с полями для редактирования по бокам. И визуальное изображение кнопки, которую мы редактируем – в центре. А также, под ней будет формироваться css код.

Онлайн сервис для создания кнопок– стили для текста

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

создание кнопок онлайн

В поле “Text” – задаем текст, который будет на кнопке. В “Font” – выбираем шрифт (его всегда можно поменять позже в таблице стилей, как и все остальные элементы). “Bold” и “Italic” – жирность и наклон соответственно. Поле “Textshadow” задает тень тексту. Можно указать расстояние и цвет.

“Outputtype” – как вы уже поняли выставляем CSS background, так как ради этого, мы и обратились к данному сервису.

Онлайн сервис для создания кнопок– стили кнопки

онлайн сервис для создания кнопок

Здесь в поле “Style” – вы можете выбрать какие углы будут у кнопки — скругленные или квадратные, а также задать радиус округления. В “Вackground” – можно задать цвет фона монотонным, либо градиентом. Вкладки “Border” и “Shadow” – позволяют задать обводку и тень. В параметрах тени есть возможность изменить ее направление, цвет и отступ.

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

Если вы выставили параметры такие же, как я на скриншотах, то у вас получится  такая кнопка:

сервис для создания кнопок

Вот и все. Теперь при помощи онлайн сервиса для создания кнопок вы можете очень быстро создавать этот важнейший элемент дизайна, даже ничего не понимая в css. А на сегодня — все. Пока!

ВИМАНИЕ! Не успел я опубликовать данный пост в социальных сетях, как  мне на почту пришло сообщение от одного из читателей о том, что в нем есть недочет.

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

Конечно, можно оставить как есть, но если вам нужна не просто кнопка, а именно заданная через css, то завтра я расскажу как создать ее самостоятельно и добавим эффект нажатия. Поэтому не буду удалять, пока, статью. Может кому-то пригодиться.

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

 

smartlanding.biz

Создание HTML и CSS кнопок для сайта

14.12.2017 12:07

Обновления для Антиплагиата!

Функциональность инструмента Антиплагиат обновилась — исчезла строка "Исключить URL". Теперь эта функция работает автоматически при использовании вкладки "Проверить URL". Также, первая проверка инструмента осуществляется намного быстрее. Однако, если Вы нацелены проверить всё до деталей, нажимайте кнопку "Расширенная проверка".

24.11.2017 14:26

Black Friday! 40% скидка на рекламу!

Успейте заказать рекламу с максимальной скидкой! Оформить заявку можно на странице https://be1.ru/advertising/

15.11.2017 11:14

Теперь мы умеем определять региональную привязку сайта!

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

09.11.2017 12:07

Инструмент проверки позиций получил дополнительный функционал!

В связи с тем, что инструментом начало пользоваться много пользователей, мы решили сделать его лучше, удобнее, функциональнее. Добавили зарегистрированным пользователям возможность сохранять проект, чтобы быстро ежедневно проверять позиции в 2 клика. Также начали вести историю позиций запросов и разработали возможность разбить запросы по релевантным страницам. Enjoy =)

08.11.2017 09:45

Аудит сайта доступен каждому!

Be1 начал предоставлять свою первую услугу, благодаря которой можно получить чёткую инструкцию как продвинуть свой сайт на ТОП-овые позиции! Получите отчёт за 3 дня с готовыми решениями.

19.10.2017 16:01

Реклама на сайте Be1.ru

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

11.10.2017 16:18

Добавили историю позиций по запросам!

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

13.09.2017 16:15

Разработали составление конкурентного анализа

Это сводка, важных при продвижении, показателей, к которым необходимо стремиться, чтобы попасть в ТОП-1 выдачи Яндекс. Найти ее можно проанализировав сайт нажать в блоке о видимости на "отчёт".

27.07.2017 16:08

Разработали инструмент, который обнаруживает упущенную семантику!

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

20.07.2017 16:04

Разработали своё расширение под Chrome

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

be1.ru

Кнопки | CSS — Примеры

Простая HTML кнопка для сайта

Есть несколько типов input для создания кнопки и тег button [ type="button | reset | submit" ]. Внешне и функционально они абсолютно одинаковы.

button<input type="button" value="input"/> <button type="button">button</button>

Когда использовать тег button?

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

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

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

Посмотреть описание <a href="#">кнопка</a>

Создание кнопки: «А нужно ли изменять вид кнопки при наведении или делать кнопку с эффектом нажатия?»

Динамические эффекты реализуются благодаря псевдоклассам:

  • :hover — при наведении. С появлением сенсорных экранов необходимость в :hover отпала. Для остальных же нужно как минимум изменение вида курсора мышки, чтобы дать понять, что элемент не является декорацией.
  • :active — в момент нажатия кнопки. Когда на странице тут же что-то явно происходит, например, переход по ссылке, загрузка модального окна, появляется значок обработки формы, то :active можно опустить.
  • :focus — пока кнопка в фокусе, то есть когда пользователь нажал на кнопку, но ещё не щёлкнул курсором мышки в другое место окна браузера. Без :focus невозможно объединить visibility: hidden; и transition. Если слишком быстро убрать мышку, то элемент повиснет в "половинном" состоянии, например, ссылка будет прозрачна, но по ней можно делать переход.

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

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

Иногда самый простой внешний вид может выглядеть более стильно, чем навороченная с крутыми эффектами кнопка. Взгляните, как она тут [cssdeck.com] смотрится.

Добавить в корзину <a href="#">кнопка</a> <a href="#">кнопка</a> Как у Сбербанка <a href="#">кнопка</a>

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

Градиенты плохо поддаются анимации, плавной смене цвета фона. Что же делать? Ответ: box-shadow [перейдите по ссылке, там есть суперская форма входа].

Купить <a href="#">кнопка</a>

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

Забронировать <a href="#" tabindex="0">кнопка</a>

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

Положить в корзину <a href="#">кнопка</a>

Красивые кнопки CSS

10 999 р. <a href="#">кнопка</a> Как у Google <a href="#">кнопка</a> <a href="#" tabindex="0">кнопка</a> Заказать <a href="#">Заказать</a> <a href="#">Установить</a>

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

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

Стилизация кнопок с помощью CSS

Анимированная кнопка: "свечение текста"

<input type="button" value="Купить"> <input type="button" value="запись">

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

Глянцевая кнопка <a href="#">кнопка</a> <a href="#">кнопка</a> Заказать билеты <a href="#">кнопка</a> <a href="#" data-twitter>twitter</a> <a href="#">кнопка</a> <a href="#" tabindex="0">кнопка</a> <a href="#">1</a>

Объёмная кнопка CSS

Объёмная <a href="#">кнопка</a> кнопка Автор <a href="#">кнопка</a> сделатьзаказ Автор <a href="#">Объёмная</a> положить в корзину <a href="#">Объёмная</a>

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

Оформить <a href="#">Заказать</a>

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

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

Круглые CSS кнопки

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

Анимированная кнопка CSS

Анимированное заполнение происходит так (тут нет лишнего кода, связанного с кнопкой). Другие интересные эффекты загрузки можно найти тут [tympanus.net].

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

3d кнопка CSS

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

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

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

Кнопка с главным действием должна выделяться из общего содержания, быть контрастной. Тут главное не переусердствовать. Так, например, у интернет магазина e5 это приятно для глаза: кнопка магазина e5 А тут с оранжевым явный перебор, даже на изображении сложно остановить взгляд: кнопки магазина e5

Именно поэтому у Google второстепенные кнопки сначала плоские, а после наведения мышки обретают объём.

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

shpargalkablog.ru

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

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

Напомню, что кнопка представляет собой "красиво оформленную ссылку", для которой вам необходимо прописать url-адрес, куда эта ссылка должна вести.

Макеты готовых кнопок

Кнопки для сайта - 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 href="/">ЗАКАЗАТЬ</a>

Кнопка 1б

<a href="/">ЗАКАЗАТЬ</a>

Кнопка 1в

<a href="/">ЗАКАЗАТЬ</a>

Кнопка 2а

<a href="/">ЗАКАЗАТЬ</a>

Кнопка 2б

<a href="/">ЗАКАЗАТЬ</a>

Кнопка 2в

<a href="/">ЗАКАЗАТЬ</a>

Кнопка 3а

<a href="/">ЗАКАЗАТЬ</a>

Кнопка 3б

<a href="/">ЗАКАЗАТЬ</a>

Кнопка 3в

<a href="/">ЗАКАЗАТЬ</a>

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

Подписывайтесь и получайте полезные статьи на почту!

www.onwordpress.ru

50 примеров CSS3 кнопок с эффектами и анимацией

Я отобрал некоторые кнопки CSS, которые, на мой взгляд, могут быть использованы в веб-проектах.

Генератор кнопок CSS3

Посмотрите на генератор CSS3 кнопок от Sanwebe:

Розовая кнопка CSS3 со шрифтом Pacifico

Симпатичная розовая кнопка (не считая небольшого кода jQuery для проигрывания музыки и изменения внутреннего текста) полностью создана на основе CSS3:

Коллекция 3D кнопок

Коллекция 3D кнопок, созданная с помощью CSS3:

Социальные 3D кнопки

Отличные социальные кнопки, выполненные с помощью CSS3 и шрифта для иконок:

Анимированные CSS3 кнопки

Анимированные CSS кнопки с фоновыми узорами. Могут не работать в браузерах Firefox 3.6 и IE10:

Круглые анимированные кнопки CSS3

Еще одни анимированные кнопки, в которых поворот текста при наведении мыши дает по-настоящему привлекательный эффект:

Кнопки Clean Circle

Вот еще один пример круглых кнопок CSS3:

Кнопки-переключатели на CSS3

Хорошо выполненные переключатели, созданные с помощью CSS3 и шрифта иконок:

Анимированная кнопка CSS3

Симпатичная трехмерная кнопка, созданная с помощью CSS3 и шрифтов Google:

Эффекты кнопок CSS3

Эти кнопки демонстрируют анимации, использующие различные свойства CSS3:

Глянцевые кнопки CSS3

Теперь можно быть абсолютно уверенным, что глянцевые кнопки можно легко создать при помощи CSS3, больше никакого Photoshop:

Трехмерные кнопки CSS3

Удивительно, что можно сделать с помощью псевдоэлементов CSS3 :before и :after. Оцените поразительные трехмерные кнопки:

Переключатель CSS3

Пример кнопки-переключателя на CSS3 без использования JavaScript:

Эффект трехмерной переворачивающейся кнопки

Эффект трехмерной переворачивающейся при нажатии кнопки, созданной с помощью CSS3:

Брендовые кнопки

Красивые кнопки CSS популярных брендов, использующих иконки bootstrap:

Темная круглая кнопка

Круглая кнопка с использованием jQuery для придания эффекта капли при нажатии на кнопку:

Переключатель CSS3

Переключатель, созданный с помощью CSS3:

Красивые плоские кнопки

Коллекция плоских кнопок CSS на все случаи жизни, без анимации и эффектов:

Кнопки общего доступа в социальных сетях

Более привлекательная версия кнопок общего доступа, но без функционала. По версии разработчика, должны работать в IE7+:

Рождественская кнопка

Рождественская CSS кнопка, использующая data:urls – метод для встраивания изображения прямо в документ:

Мягкая кнопка

Круглая глянцевая кнопка, созданная с помощью CSS3:

Мягкая кнопка Soft Button

Кнопки используют только символы Unicode, что позволяет использовать текстовые или иконочные шрифты:

Крупные трехмерные анимированные кнопки CSS3

Еще один набор трехмерных анимированных CSS кнопок для сайтов. Анимация выполнена с помощью свойств animation и keyframes:

Металлические CSS3 кнопки

Коллекция металлических CSS3 кнопок, символы на которых были созданы с помощью шрифта pictos с использованием @font-face. Для металлического эффекта были задействованы свойства box-shadow и linear-gradient:

Круглые CSS3 кнопки

Еще одна коллекция круглых анимированных кнопок на CSS3:

CSS3 кнопки социальных сетей с возможностью нажатия

Кнопки используют простые CSS3 свойства, такие как gradients, box-shadows, text-shadows и так далее. Состояние «ожидание» и «активное» также включены в этот набор:

Простые CSS3 кнопки

Красивые кнопки CSS:

Трехмерная кнопка загрузки

Эта трехмерная кнопка использует трансформацию perspective. Она работает только в браузерах на основе webkit:

Поразительные CSS3 кнопки социальных сетей

Эти кнопки социальных сетей используют как базовый фон свойства liner-gradient, box-shadow для трехмерного эффекта:

Большая кнопка

Солидная глянцевая CSS3 кнопка с эффектом тени внизу. Для кнопки используется шрифт под названием Sansita One из коллекции Google:

Простые кнопки

Несколько простых CSS кнопок:

CSS3-кнопки социальных сетей

Еще один набор кнопок социальных сетей. Для создания самих кнопок используются псевдоэлементы :before и :after:

Простые CSS кнопки

Набор незамысловатых CSS кнопок. Они просты в настройке и использовании. Их можно легко интегрировать с Font-Awesome или другой библиотекой:

Кнопки в виде покерной фишки

Пример простой кнопки в виде фишки для игры в покер. Она может быть также использована как кнопка с эффектом наведения:

Кнопка-ползунок

Концепт CSS кнопки-ползунка:

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

Панель администратора (меню или навигация) с использованием CSS3 и фреймворка fontawesome. При переключении на кнопку класс active добавляется с помощью jQuery:

Пришитая кнопка

Простая кнопка со строчкой, демонстрирующая возможности CSS3 без использования фонового изображения:

Вращающаяся кнопка

Круглая кнопка с вращающейся границей для индикации наведения курсора мыши:

Кнопка на CSS3

Мягкая кнопка, созданная с помощью CSS3 на основе этого примера:

CSS3 кнопка с выдвигающейся карточкой

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

Анимация CSS3 кнопки в виде конфеты

Кнопка с анимацией для отображения состояния загрузки:

CSS3 переключатели

Красивые переключатели, которые используют jQuery для переключения класса:

Глянцевые кнопки

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

Трехмерные кнопки с разноцветной границей

Кнопки с границами разных цветов:

8-битный эффект при наведении

Обратите внимание на эти великолепные кнопки с эффектом 8 бит, срабатывающем при наведении курсора:

Кнопки Салливан

Простые кнопки, использующие иконки из FontAwesome:

Чувственные SCSS кнопки в цветовой модели HSB

Несколько CSS кнопок с иконками из FontAwesome:

Набор кнопок

Очередной набор чистых кнопок для веб-приложений:

Кнопка-переключатель

Кнопка-переключатель на основе Bootstrap:

Анимированные кнопки

Коллекция анимированных CSS3 кнопок для придания особого колорита вашему сайту:

Красочные кнопки

Коллекция CSS кнопок различных цветов:

Перевод статьи «50 CSS3 button examples with effects & animations» был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

Кнопки для сайта онлайн за пять минут

Быстрая навигация по этой странице:

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

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

О чем речь?

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

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

Онлайн-сервис Da Button Factory

http://dabuttonfactory.com/

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

Во время создания кнопок виден пример того, что должно получиться, поэтому всегда можно регулировать цвета, форму и размеры. Сервис англоязычный, однако никаких трудностей во время использования не возникает — все просто и понятно: «Size» — размер кнопки или шрифта, «Color» — их цвет, «Text» — текст внутри, «Font» — необходимый шрифт. В области «Style» можно выбрать стилевое оформление углов кнопки (всего их три вида). Область «Border» предназначена для определения рамок кнопки, а с помощью «Download» можно загрузить готовую кнопку на компьютер в том расширении, который предварительно выбран. В целом, сервис заслуживает твердой четверки. Единственным недостатком может являться простота оформления и не слишком широкие функциональные возможности.

Онлайн-генератор Cool Text

http://cooltext.com/

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

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

www.runcms.org

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

1. Кнопка-ссылка HTML

Кнопка со ссылкой 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>

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

2. Кнопка Submit

Кнопки типа Submit существуют для отправки информации, введённой посетителем сайта, на сервер. Например, простейшая организация ввода пароля выглядит так:

<p><input name="login"></p> <p><input type="submit"></p>

3. Кнопка Reset

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

<input type="reset" value="Название кнопки">

4. HTML кнопка с картинкой

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

<input type="image" src="ссылка на картинку">"

Кнопка с картинкой и текстом:

<button> <img alt="" src="ссылка на картинку" />Нажмите, чтобы посмеяться</button>

Например:

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

Удачи!

www.internet-technologies.ru