-
-
June 30 2007, 00:32
- Россия
- Cancel
Как узнать код кнопки?
Есть замечательные сайты, ссылки на которые мне бы хотелось поставить в моем ЖЖ. И у них есть красивые кнопки, которые тоже хочется. Но коды кнопок не известны. Откуда их взять? Кто в курсе?
Например, очень хочется поставить кнопки «Новой газеты» и «Эха Москвы».
Кажется, что программирование — это сложно, особенно если никогда не приходилось с ним сталкиваться. На самом деле всё зависит от задачи. Чтобы вносить небольшие изменения на сайт, хватит и азов, а их может освоить даже человек без технического образования. Об этих азах и пойдет речь в статье. Расскажем об устройстве исходного кода, о том, как начать в нём немного разбираться, и ответим на вопрос, зачем всё это вам нужно.
Примечание: мы не будем лезть в дебри и подробно описывать процесс программирования. Расскажем о том минимуме, что пригодится в работе над вашим сайтом.
Зачем понимать исходный код
Сначала поговорим о том, зачем вам нужно что-то знать о коде, если вы не программист. Да, здорово расширять свои границы. Но главное, что вы можете получить из этого знания — пользу для бизнеса.
Зная, как устроен исходный код, вы сможете:
- Больше понимать в SEO-продвижении.
Если просто смотреть на страницу сайта, вы не сможете проанализировать, правильно ли настроено SEO-продвижение, а инструменты для анализа не всегда могут быть под рукой. Только в коде проверяют, на месте ли метаданные и обязательные элементы — основная информация для успешного SEO. Поэтому заглядывать в исходный код становится обычной практикой маркетологов или владельцев бизнеса, которые сами занимаются продвижением.
Плюс вам больше не будет казаться магией работа SEO-специалиста. Вы будете говорить на одном языке и понимать, как поисковики видят ваш сайт и что можно улучшить.
- Анализировать сайты конкурентов на более глубоком уровне.
Если вы решите проанализировать сайты конкурентов, немного разбираясь в коде, вы сможете оценить не только визуальную и контентную стороны страниц. У вас получится определить, с помощью каких ключевых слов продвигается сайт, на какой CMS работает и немного больше понять стратегию продвижения конкурентов.
- Составлять грамотные ТЗ для разработчика самостоятельно.
Вам будет легче представить и объяснить разработчику, как вы видите свою задумку. А значит, на финальной стадии работ не окажется, что всё сделано не так, а деньги и время уже потрачены.
- Лучше понимать программистов.
Когда программист будет объяснять вам, в каких правках нуждается сайт компании, вы всё поймёте и сможете на равных обсудить это с сотрудником. Вам будет проще нанимать человека на IT-должность и разбираться в сметах на обслуживание сайта.
- Экономить, самостоятельно внося изменения в сайт.
Экономнее изучить азы программирования и быстро устранять проблемы самостоятельно вместо того, чтобы нанимать программиста для выполнения небольших, но частых задач. Например, менять размеры баннеров или цвет текста на странице.
Что такое исходный код сайта
Национальная библиотека им. Н. Э. Баумана говорит, что исходный код — это текст компьютерной программы, который может прочитать человек, на языке программирования или языке разметки.
Именно код скрывается за внешней стороной любой интернет-страницы. Он выглядит как список пронумерованных строк с информацией о том или ином элементе страницы.
Как посмотреть код любого сайта
Расскажем, как посмотреть исходный код страницы в браузере Google Chrome*. В остальных браузерах этот процесс примерно такой же.
Код вызывается одной из комбинаций:
- комбинация клавиш Ctrl + U или правая кнопка мыши → «Просмотр кода страницы» — вызывает «полотно» кода в отдельном окне браузера. Вы сможете увидеть структуру всей страницы. Вот как это выглядит:
Чтобы не утонуть в огромном количестве новых символов, нужно разобраться, что такое HTML, CSS и JavaScript.
Что такое HTML
HTML — язык гипертекстовой разметки. На нём написано большинство сайтов в интернете.
Что можно узнать о сайте из исходного кода
Код сайта предназначен в первую очередь для браузера и поисковых систем. Браузеру он говорит, что и в каком порядке выводить на странице. Поисковые системы берут из исходного кода всю информацию о странице: заголовок, описание, метаданные — всё то, что потребуется, чтобы показать страницу в выдаче поисковика. Обычный пользователь тоже может прочитать этот специальный текст — достаточно знать, как он устроен.
Все элементы кода нужны для правильного расположения разделов и деталей страницы. Всё это вы сможете найти и проанализировать, внимательно изучив исходный код сайта:
- текст, который есть на странице;
- цвета, шрифты и размеры элементов страницы;
- иллюстрации, фотографии и другие детали;
- ссылки;
- важные теги, метатеги и атрибуты кода;
- скрипты, счётчики, генераторы заявок, коды идентификации в системах и пр.;
- данные JavaScript;
- ошибки и поломки в коде и прочее.
Чтобы лучше понять теорию, разберёмся в коде страниц блога RU-CENTER: найдём теги, картинки и другую информацию.
Для начала открываем страницу и вызываем интерактивный код (Ctrl + Shift + I). Откроется интерактивная панель с кодом, поделённая на две области. Слева — HTML-код (вкладка Elements), справа — CSS (вкладка Styles). Нам пока нужна левая часть с HTML.
Основные теги
HTML-страница состоит из набора тегов, которые вместе с содержимым называются элементами — это строительный материал веб-страницы. Другими словами, теги — команды для браузера, чтобы он понял, как нужно показывать сайт пользователю. Указывая в коде определенные теги, вы говорите браузеру: «Это текст, а это картинка, это ссылка, а это кнопка или форма». И браузер показывает все элементы интерфейса так, как вы их разместили.
Теги обычно открываются и закрываются так: <tag> — открытие тега, </tag> — закрытие.
Теги делятся на два вида: блочные и строчные.
- Блочные теги всегда занимают отдельную строку в коде и обозначают целый элемент страницы сайта. Пример: заголовки или параграфы.
Немного разобрались с основными HTML-элементами, теперь поговорим о том, что такое CSS.
Что такое CSS
CSS (Cascading Style Sheets) — каскадные таблицы стилей. Это язык, который отвечает за внешний вид HTML-документа, — CSS и HTML действуют в одной связке.
Если HTML отвечает за структуру, то CSS определяет стиль документа: дизайн, вёрстку, адаптацию для разных устройств.
Страница сайта, написанная только на HTML, выглядит просто как текст, поделённый на абзацы, с разными начертаниями шрифтов, гиперссылками, списками и таблицами:
А так выглядит та же страница, но со стилями CSS:
Раньше, примерно до 1996 года, стили были встроены в HTML, код становился громоздким и в нём было сложно разобраться. Тогда появился CSS со своим языком, правилами и возможностью вынести все стили в отдельный файл. Процесс создания сайтов стал более гибким, управлять стилями оказалось проще — теперь стиль абзаца не нужно править в HTML-файле вручную для каждого абзаца— достаточно в CSS-файле отредактировать одно правило. Плюс стало проще читать и обслуживать HTML-код.
Главный тег для элементов CSS — <style>. Стили, которые нужно подключить к HTML-документу, как правило, выносят в отдельный CSS-файл, а после прописывают ссылку на него в коде HTML.
Что такое JavaScript
JavaScript — логический язык программирования. Он сложнее, чем HTML или CSS, поддерживается всеми современными браузерами, его используют практически все сайты.
В отличие от HTML и CSS, JavaScript позволяет использовать на сайтах более мощные и сложные функции, создавать интерактивные страницы с динамичными элементами. Например:
- отслеживать аналитику,
- создавать анимации,
- встраивать всплывающие окна и другое.
На сайте скрипты на этом языке найти просто. Открываем интерактивный код, нажимаем Ctrl + F и вводим в поле поиска JavaScript:
Здесь мы видим, что тег с пометкой javascript отвечает за отслеживание взаимодействий пользователя с сайтом: это тег Google Аналитики*. Но мы не будем подробно останавливаться на нём в этой статье.
Как познакомиться с кодом поближе
Поговорили о теории, теперь — практика. Глубоко копать не будем, чтобы не запутаться. Покажем, как отредактировать код в браузере, а после — провести мини-SEO-аудит, используя только выдачу поисковика и страницу вашего сайта. Начнём с редактирования кода.
Как редактировать HTML-код прямо в браузере
Вы можете отредактировать код любой интернет-страницы с одним «но»: эти изменения будут видны только вам и после перезагрузки страницы всё вернётся к прежнему виду. Поэтому смелее — вы точно ничего не сломаете.
Обычно это делается, чтобы:
- Визуально менять тексты и данные на сайте, проверять новые форматы.
- Тестировать блоки и элементы: заголовки, сноски, абзацы, врезки и т. п.
- Править информацию на странице, чтобы показать скриншоты дизайнерам, редакторам или разработчикам.
Давайте немного поменяем текст на странице блога RU-CENTER. Открываем страницу в браузере Google Chrome*. Находим заголовок, нажимаем на него правой кнопкой мыши и выбираем в меню «Просмотр кода».
Мы хотим исправить этот заголовок. Нажимаем дважды левой кнопкой мыши на текст в строке кода, пишем новый заголовок и нажимаем Enter:
Или, например, хотим мы поменять текст на кнопке. Кликаем на неё правой кнопкой мыши, выбираем в меню пункт «Просмотреть код»:
И меняем его — в области кода левой кнопкой мыши дважды нажимаем на текст, печатаем новую фразу и нажимаем Enter:
А ещё поменяем иллюстрацию. Кликаем на изображение правой кнопкой мыши и выбираем пункт «Просмотреть код»:
Попробуйте поэкспериментировать на своём сайте. Это интересно и полезно: вы сможете внести изменения, сделать скриншот наиболее удачной версии и использовать его при составлении ТЗ на доработку сайта.
Как редактировать CSS-код прямо в браузере
CSS-код можно редактировать так же, как и HTML: открываем код страницы в браузере и заменяем или удаляем элементы. Если обновить страницу, всё вернётся на свои места.
Изменим размер картинки на странице RU-CENTER. Открываем код изображения, находим внизу окна кода нужное поле:
Уменьшим иллюстрацию, изменив значения в блоке:
Проверьте основные теги для SEO на вашем сайте
Мы разобрались в HTML-тегах, узнали, как отредактировать код сайта в браузере и ничего не сломать. Теперь давайте проведём мини-SEO-аудит сайта, используя только его страницу и выдачу поисковика.
Для тренировки и насмотренности попробуйте найти в коде своей страницы указанные ниже теги. Они обязательно должны быть на каждой странице сайта как самые важные для SEO-продвижения.
Title
<title>Заголовок страницы</title>. Это самый важный тег для SEO, его нужно заполнять для каждой страницы сайта. Информация из title не показывается напрямую на странице, но отображается в названии страницы в верхней области браузера:
Найдём title на странице RU-CENTER. Открываем код сайта с помощью инструментов разработчика. Нажимаем Ctrl + F и вводим в поле поиска title. Вот и наш заголовок:
Подробнее о тегах и основных ошибках SEO-продвижения сайта вы можете прочитать в нашей статье.
Где бесплатно научат понимать код и программировать
В статье мы дали общую информацию об устройстве HTML-кода сайта. Чтобы окунуться в тему глубже, вы можете пройти специальные курсы. Сейчас их много, мы дадим список из нескольких самых популярных вариантов.
- Html Academy. Бесплатные задания после регистрации.
- «Нетология». Курсы: «Основы HTML и CSS», «Python-разработка для начинающих» и др.
- Geekbrains. Интенсивы: «Основы программирования», «Python для начинающих» и др.
- Яндекс Практикум. Все курсы можно попробовать бесплатно, например: «Как стать веб-разработчиком», «Как стать Python-разработчиком» и др.
- «Смотри.Учись». Курс «PHP. Базовый курс» и др.
- Гарвард, Основы программирования. Видео-лекции на YouTube.
- /
- /
Как поставить цель на кнопку
Содержание
- JavaScript-событие – что это?
- Как установить цель на кнопку сайта
- Как добавить цель на сайт
- Как проверить работу цели
Сервисы веб-аналитики позволяют с точностью отслеживать действия пользователей на сайте и на основе полученных данных делать выводы о качестве настройки контекстной рекламы, размещенного контента, выпускаемого продукта и так далее. Владение этой информацией помогает грамотно оптимизировать и сайт, и работу фирмы в целом.
Помимо данных о посещениях и длительности просмотров, сервисы аналитики Google Analytics и Яндекс Метрика предоставляют сведения о том, какой процент ваших посетителей заполняет формы обратной связи, нажимает кнопки «купить», «оформить», «подписаться» и совершает иные взаимодействия с сайтом. Для получения таких данных вам необходимо настроить цель JavaScript-событие и установить ее на соответствующую кнопку вашего сайта.
В этой статье мы поговорим о том, что собой представляет событие JavaScript, как его настроить и как отслеживать целевые действия пользователей через работу JS-кода.
JavaScript-событие – что это?
Данный тип взаимодействия посетителя с сайтом означает, что пользователь совершил целевое действие, в результате которого URL страницы не изменился.
В этом случае вы не можете проследить действия потенциального клиента посредством целей «Количество просмотров» или «Посещение страниц», поскольку в них фиксируется смена адресов при переходе пользователя по страницам. При нажатии кнопки «купить», «подписаться», при заполнении формы заявки пользователь остается на той же странице – то есть адрес не меняется, однако целевое действие совершено. Как же тогда контролировать выполнение медиаплана? Для отслеживания таких действий и используется цель «JavaScript-событие».
Цель JavaScript считается достигнутой в том случае, если в результате действия пользователя на странице срабатывает специальный код. С помощью JS информация о совершенном действии передается на сервис веб-аналитики и фиксируется.
Как установить цель на кнопку сайта
Чтобы настроить цель типа «JavaScript-событие» на кнопку вашего сайта и отслеживать ее выполнение в системах аналитики, нужно сделать следующее:
- Настроить цель JS-событие в Яндекс Метрике или Событие в Google Analytics;
- Вставить уникальные данные вашей новой цели в html-код кнопки сайта и сохранить измененный код.
А теперь разберемся подробнее, как это сделать.
Как узнать код кнопки
Прежде всего нам нужно узнать код кнопки, с которым мы будем работать. Для этого:
Кликаем правой кнопкой мыши по нужной кнопке на сайте и нажимаем «Просмотреть код».
В открывшейся консоли находим код, выделенный цветом.
Копируем код и сохраняем.
В зависимости от используемого типа html-элемента код кнопки будет иметь разный вид: <a href= … >, <input_type= … >, <button_type= … > и т.д.
В дальнейшем именно в этот код мы будем вносить изменения.
Как создать цель JavaScript в Яндекс Метрике
Далее нам нужно настроить цель в Яндекс Метрике и получить идентификатор, который мы вставим в код кнопки на сайте. Для этого выполняем следующие действия:
Открываем настройки счетчика, вкладку «Цели».
Нажимаем «Добавить цель», в открывшейся форме выбираем тип «JavaScript-событие».
Заполняем поля «Название» (любое удобное для вас), «Идентификатор цели».
Записываем номер счетчика и идентификатор цели.
Название идентификатора набирается только латиницей, и обязательно должно удовлетворять следующим требованиям:
- Быть уникальным для каждого события (каждой кнопки, формы связи т.д.).
- Не повторять URL какой-либо страницы сайта.
- Не содержать символы # & = + ? /
Если имя идентификатора для конкретной кнопки будет совпадать с идентификатором для другой кнопки или адресом страницы сайта, то полученные данные будут некорректными.
Как создать цель Событие на кнопку в Google Analytics
Если вы хотите настроить цель для отслеживания в Гугл Аналитикс, то необходимо сделать следующее:
Зайти в раздел «Администратор», далее – в «Цели», затем нажать «+ цель».
На шаге «Установка цели» выбрать тип (можно оставить «Шаблон» по умолчанию). Далее – «Продолжить».
На следующем шаге «Описание цели» заполнить поле «Название» (понятное для вас) и в поле «Тип» поставить галку в пункте «Событие».
На шаге «Подробные сведения о цели» заполняем первые два поля «Категория» и «Действие» – это могут быть любые понятные вам названия, введенные латиницей.
Включить кнопку «Использовать ценность события в качестве ценности цели конверсии».
Как добавить цель на сайт
Берем сохраненный код кнопки сайта, вставляем в него данные созданной цели и сохраняем на сайте новый измененный код.
Например, мы хотим узнать, сколько потенциальных клиентов позвонило через нажатие кнопки телефона на нашем сайте. Для этого используем код кнопки с телефонным номером <a href=»tel:+78125619075″ style=»»><span class=»phone_alloka» data-phone=»+7%20%28812%29%20244-7138″>+7 812 561-9075</span></a>.
Далее делаем следующее.
Настройка цели для Яндекс Метрики
Для Яндекс Метрики используем комбинацию onClick=«yaCounter12345678.reachGoal(‘identifikator’);», в которой 12345678 – это номер счетчика, identifikator – придуманный нами уникальный идентификатор.
Вставляем данный код в код кнопки и получаем:
<a href=»tel:+78125619075″ style=»» onClick=«yaCounter12345678.reachGoal(‘identification’);»><span class=»phone_alloka» data-phone=»+7%20%28812%29%20244-7138″>+7 812 561-9075</span></a>
Настраиваем цель для Google Analytics
Для Гугл Аналитикс пользуемся комбинацией onClick=«ga(‘send’, ‘event’, ’email-num’, ’email-click’, ‘click_email’, ’15’);», где email-num соответствует полю «Категория», email-click – полю «Событие», click-email – полю «Ярлык», а цифра 15 – значению поля «Конверсия». Все перечисленные поля вы заполняете самостоятельно на стадии создания цели в Google Analytics. Соответственно, при вставке кода на сайт вы заменяете указанные поля на выбранные вами значения.
Поля send и event не заменяете и оставляете в исходном виде.В итоге у вас получается:
<a href=»tel:+78125619075″ style=»» onClick=«ga(‘send’, ‘event’, ’email-num’, ’email-click’, ‘click_email’, ’15’);»><span class=»phone_alloka» data-phone=»+7%20%28812%29%20244-7138″>+7 812 561-9075</span></a>
Цель на кнопку для Яндекс и Google
В случае, если мы хотим установить коды Яндекс Метрики и Гугл Аналитикс на одну кнопку, то вставляем их просто рядом:
<a href=»tel:+78125619075″ style=»» onClick=«yaCounter12345678.reachGoal(‘identification’);onClick=«ga(‘send’, ‘event’, ’email-num’, ’email-click’, ‘click_email’, ’15’);»><span class=»phone_alloka» data-phone=»+7%20%28812%29%20244-7138″>+7 812 561-9075</span></a>
Важно! Внесение любых изменений в html-код сайта требует предельной осторожности. Ошибка в коде может серьезно нарушить работу вашего сайта. Если у вас недостаточно навыков работы с html, то рекомендуем обратиться к специалистам профильного агентства.
Как проверить работу цели
После установки цели на кнопку сайта рекомендуется проверить корректность ее работы.
Для этого к адресу страницы в строке браузера добавляем команду ?_ym_debug=1 и загружаем страницу.
Далее вызываем консоль через команду Ctrl+Shift+J и совершаем на сайте целевое действие. В консоли отобразится вызов метода reachGoal, который мы использовали в коде.
Чтобы удостовериться, что отчеты о действиях пользователей отправляются на сервис аналитики, заходим в отчеты и проверяем:
В Яндекс Метрике заходим в раздел «Отчеты», далее – «Стандартные отчеты», затем – «Конверсии».
В Google Analytics открываем «Отчет в реальном времени» и далее – «Конверсии».
Если достижение цели происходит на сайте и фиксируется системой, то данные о совершении целевого действия отобразятся в отчетах счетчика.
-
Полина
Глав.ред., копирайтер,
контент-менеджер
Подпишись на полезные материалы
Делимся инсайдерской информацией, только тсссс!
Еще полезные статьи
|
Узнать код нажатой кнопки?rotex42 8 лет назад
На сайте есть рейтинг и кнопки для рейтинга плюс и минус, при нажатии которой срабатывает голос. Как узнать код кнопки плюса и минуса?
gudroni 8 лет назад «<div id=»vote_down_question_1033478″ class=»vote_down s1″ title=»-1 Голос»></div>» Код элемента не так то и сложно узнать. Нажимаем правой кнопкой мыши на этой кнопке и выбираем из меню раздел «просмотр кода элемента». В открывшемся окне вы увидите выделенную строку, которая и является кодом данной кнопки. Данная инструкция используется в браузере «google chrome».
в избранное
ссылка
отблагодарить rotex42 Спасибо за ответ попробую, а в Mozilla код можно узнать?
gudroni Да. Возможно меню немного другое, но делается примерно одинаково. Я просто не использую такой браузер.
Знаете ответ? |
Если коротко:
Используйте для кнопок — кнопки, а для ссылок — ссылки.
Это не исчерпывающее руководство по кнопкам и не пример невероятного дизайна, а лишь попытка показать, что есть разница между ссылками и кнопками.
Для кого эта статья?
В первую очередь для дизайнера который делает макет сайта, но не дорисовывает детали свойственные вебу. Своеобразная попытка объяснить, что веб-сайт лежит за пределами плоской полиграфии.
Во вторых для верстальщика к которому пришёл макет без состояний, чтобы было куда дизайнера послать.
В третьих чтобы вместо очередной тирады о разнице в кнопкахссылках и нужности дизайна состояний, просто давать ссылку.
Содержание
Ссылки
Введение
Когда наводят указатель на ссылку которая кнопка то в левом нижнем углу появляется надпись javascript:;: 
Или адрес с решёткой: 
ПКМ на такой кнопке и контекстное меню любезно предложит: 
ctrl + ЛКМ на такой кнопке откроют новую вкладку на которой будет ровно та страница, с которой она была открыта.
Кроме того такая ссылка с решёткой в качестве ссылки, станет :visited , если ещё не стала до этого, и приобретёт соотстветствующее стилевое оформление. Если дизайнер его конечно не зарезал, что в большинстве случаев конечно зря, о чём ниже.
<a href=»//link.url»>Ссылка</a>
- Если клик приведёт к смене адреса,
- этот адрес можно скопировать,
- отправить по электронной почте,
- на него можно снова зайти,
- это не адрес самой страницы
— это ссылка.
У ссылки должны быть стили для обычного, :active , :visited , :focus и :hover состояний.
Антипаттерн
Поздравляю! С такими стилями все ваши ссылки визуально превратятся в обычный текст. Найти их на странице станет крайне затруднительно.
Состояния
a — обычное состояние
В обычном состоянии a должна быть синей или подчёркнутой, а лучше и синей и подчёркнутой, чтобы пользователь без наведения мыши понимал, что это — ссылка. Пользователь привык к тому, что синие слова на странице это ссылки, даже если они не подчёркнуты. Если вам не нравится синий цвет для ссылок, меняйте его, но тогда ссылки подчёркивайте.
a:hover — наведение
Когда курсор находится над ссылкой, она становится :hover и в данном примере приобретает подчёркивание. Так пользователь поймёт, что это точно ссылка, на которую можно кликнуть.
a:focus — фокус клавиатуры
Когда на ссылку устанавливается указатель, перемещаемый табулятором TAB ↹
она становится :focus . В 2016 году это может показаться странным, но есть люди которые работают с сайтам посредством клавиатуры. У некоторых вовсе сломана мышь. В любом случае, занулять :focus состояние — это преступление против таких людей.
Особые спецэфекты применять не обязательно, достаточно таких как у :focus .
CSS чтобы не писать дважды:
a:active — клик
Важное состояние :active происходит когда пользователь уже кликнул на ссылку, но клавишу ещё не отпустил. Помогает пользователю понять, что его клик сработал, и ему не нужно кликать по ней несколько раз, чтобы точно перейти на нужную страницу.
a:visited — ранее посещённая страница
:visited , поможет пользователю не забыть какие странички он уже открывал и не открывать их повторно. Так вместе с :active и :hover мы чуточку разгрузим интернет от случайных загрузок, и сделаем его чуть лучше и быстре.
В эпоху HTML4 вместо кнопок использовались ссылки подчёрнутые пунктирной линией. Этот паттерн устарел.
Подчёркивание пунктирной линией рекомендуется для тултипов при наведении.
Например у <abbr> такое выделение поможет понять, что можно навести указатель и получить расшифровку.
Пример нестандартного оформления ссылок:
HTML5 <button>Кнопка</button>
- Если клик не меняет адрес страницы,
- адрес нельзя скопировать
- и нельзя этим адресом поделиться — это кнопка.
Доступность
<button /> может быть недоступен на архаичных браузерах или устройствах. У кнопок не применятся стили без специальных JavaScript скриптов.
Но вас это не должно беспокоить. На таких устройствах часто и JavaScript не работает. И быть может CSS.
Вообще если следовать идеологии что всё, что должно обрабатываться JavaScript’ом, должно добавляться JavaScript’ом, такой проблемы вовсе не возникнет.
Поведение внутри формы
<button> по умолчанию имеет атрибут type=submit даже если его не прописать.
Ещё этот атрибут может принимать значения reset для сброса заполнения в форме
и button чтобы исключить влияние на форму. Правила хорошего тона предполагают,
что везде нужно писать <button type=»button»>Кнопка</button> .
Но на деле можно ограничится полной записью только внутри <form></form> ,
type=submit в остальных местах ни на, что не влияет.
Это кстати отличный сбособ для стилизации кнопки отправки формы.
В отличии от <input type=»submit» value=»Кнопка» /> , в содержимое
button можно писать любой HTML код, а не только текст.
Например
Это даёт даже больше свободы в стилевом оформлении чем <input type=»image» />
Состояния
Похожи на состояния у ссылок за исключением того, что у кнопок нет состояния :visited , зато есть состояние :disabled .
Обычно дефолтное оформление браузера выпиливается основательно, иногда с нейтрализацией отображения состояний отличных от обычного.
Да. Этот гайд для тебя, любитель превратить веб-страницу в бумажный аналог.
Стилей для этих штучек понадобится немного больше, но всё не так страшно. Кроме того ребята из Twitter и отчасти Google уже позаботились о реализации велосипеда.
Тёплый ламповый Bootstrap «и новомодный MaterializeCSS, например.
Отображение
Так выглядит <button>Кнопка</button> в моём Chrome 54: 
На картинке button , button:hover , button:focus , button:active соответственно.
Без излишеств. Но учитывая движение Google в направлении Material Design, вполне может статься так, что в скором времени их заменят на подобные аналоги.
Как узнать ссылку кнопки на сайте
Просмотр профиля
Группа: User
Сообщений: 1
Регистрация: 21.2.2016
Поблагодарили: 0 раз
Репутация: 0
Ребят, помогите советом.
Вот страница http://hroost.com — видите, сверху есть неумело установленная менюшка с валютой — украина, россия ? и кнопка «валюта». Скажите, можно ли узнать, какая получается ссылка при нажатии на «валюта»? чтобы назначить вместо этой менюшки обычные ссылки, нажимая на которые я смогу менять валюту на сайте. Спасибо
Webmaster_hb
Просмотр профиля
/>
Группа: User
Сообщений: 7538
Регистрация: 5.3.2007
Поблагодарили: 0 раз
Репутация: 0
тут просто кнопку нельзя заменить ссылкой
т.к. это форма с данными которые отправляются на сервер при нажатии на кнопку
если и делать вместо кнопки ссылки, без переделки серверной части сайта
то нужно на ссылку назначить javascript который активирует отправку данных из этой формы, т.е. это уже будет не ссылка — но внеше для пользователь сайта она будет выглядеть кака ссылка
Как узнать ссылку кнопки на сайте
Авторизуясь в LiveJournal с помощью стороннего сервиса вы принимаете условия Пользовательского соглашения LiveJournal
- July 2018
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
Так ведь кнопка — это ж просто картинка со ссылкой. Если у вас есть картинка и вы знаете адрес сайта, пишете такой примерно код:
(Все квадратные скобки заменить на угловые)
Это кнопка сайта Шендеровича. В первой строке — адрес сайта, во второй строке — адрес картинки-кнопки и ее длина-ширина-рамочка (эти параметры можно опустить)
Ага! Ну тут вообще все просто, главное эту кнопку найти. )
Находите понравившуюся кнопку, на ней кликаете правой кнопкой мышки и выбираете пункт «Свойства»
Из открывшегося окна копируете адрес. Как правило он оканчивается на что-то типа «имя файла».jpg или «имя файла».gif — файлы-картинки.