Как сделать кнопку ссылку в html
Перейти к содержимому

Как сделать кнопку ссылку в html

  • автор:

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

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

Правильно

Синтаксически корректное («валидное») и кроссбраузерное решение — заключить кнопку в простейшую форму. В атрибут action формы следует поместить URL-адрес, на который должна вести «кнопка-ссылка». Для работы формы в устаревших браузерах (IE8 и ниже) следует добавить кнопке атрибут type= «submit» :

«Кнопка-ссылка» в примере ведёт на страницу с адресом /example/ .

Если требуется открывать ссылку в новом окне или фрейме, можно, как и у обычных ссылок, использовать атрибут target элемента FORM :

Демо

Строка запроса

Строка запроса — часть URL-адреса после первого вопросительного знака, содержащая GET-параметры в виде пар name=value ( имя=значение ), разделённых символом & .

Если адрес, на который должна указывать ссылка, содержит строку запроса, следует для каждого GET-параметра добавить в форму скрытое поле с соответствующими атрибутами name и value :

Данная форма ведёт на страницу /example/?foo=bar&lorem=ipsum .

Chromium/ Blink и WebKit

В браузерах на основе движков Chromium/ Blink (Chrome, Opera 15+, Яндекс.Браузер, Vivaldi) и WebKit (Safari) есть ошибка (баг) (1, 2): вопросительный знак, отделяющий строку запроса от основной части адреса, добавляется к адресу даже при отсутствии полей в форме. Поэтому, например, форма:

приведёт на адрес /example/? вместо ожидаемого /example/ .

Кент Тамура (Kent Tamura) из команды разработчиков Chromium говорит, что это соответствует текущим специфи­кациям HTML и URL.

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

Ограничения по сравнению с реальной ссылкой

  • У пользователя нет возможности узнать, куда ведёт ссылка-кнопка, до щелчка по ней.
  • Пользователь не может по своему желанию открыть ссылку-кнопку в новой вкладке или в новом окне.

Неправильно

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

Нередко элемент BUTTON просто помещают внутрь ссылки:

Это работает во всех современных браузерах, но согласно HTML5 это синтаксически некорректно («невалидно»): ссылка не должна содержать интерактивные элементы. Кроме того, такая ссылка не работает в Internet Explorer (IE) ниже 9-й версии.

Демо

Кнопка с JS-обработчиком щелчка

Порой используется кнопка с JavaScript-обработчиком события щелчка:

Но такая кнопка не работает при выключенном JavaScript, её невозможно открыть в новой вкладке или новом окне, и возможны проблемы с индексацией поисковиками, не исполняющими JavaScript-код.

Демо

Программа для масштабирования игр без размытия

Нестандартные расширения CSS

Описанные ниже возможности нестандартные, и использовать их не рекомендуется.

Firefox и Chromium

Firefox версий 81 и ниже и браузеры на основе движка Chromium (Chrome, Opera 15+, Vivaldi, Яндекс.Браузер) прошлых версий поддерживали нестандартные префиксированные варианты свойства appearance , значение button которых позволяло оформить как кнопку произвольный элемент, в том числе ссылку:

A.example -moz-appearance: button; /* Firefox */
-webkit-appearance: button; /* Chromium */
>

Демо

Internet Explorer, Edge и спецификация

В браузерах Microsoft — Internet Explorer (IE) и Edge — возможность недоступна. В спецификации CSS Basic User Interface Module Level 4 значение button свойства appearance не предусмотрено.

  • morontt2013-03-08 Чего только не придумают… 🙂 Хотя вот ссылка кнопкой — это на каждом шагу буквально встречается.
  • Александр 2013-06-30 Марат, очень помогла ваша статья. Огромное спасибо!
    Это самый грамотный и актуальный на сегодня ответ в интернете, который мне удалось найти.
    Продолжите, пожалуйста, тему — «Правильный способ сделать картинку ссылкой» (1 вариант — только HTML; 2 вариант — CSS; …). В сети масса устаревших и в корне неверных рекомендаций — кто на что горазд…
    И еще один вопрос-просьба. По адресу http://api.yandex.ru/share/ Яндекс раздает невалидный код. На недоуменные вопросы в клубе разработчиков (http://clubs.ya.ru/share/) отвечают: «А зачем вам эта валидность?» Не могли бы Вы исправить их код?
  • Никита 2013-11-15 Есть и у этого способа подводные камни. Вот такие вот штуки ( http://s020.radikal.ru/i720/1311/34/bfe7beda17fe.jpg ) при использовании кнопок предыдущей и следующей страницы. Мешается ужасно. Как обойти непонятно.
  • Marat Tanalin(автор)2013-11-16 Никита, если вы о подтверждении, запрашиваемом браузером при попытке обновить страницу (или вернуться на неё по браузерной истории), загруженную в результате отправки формы, то это имеет место только в отношении форм, отправляемых методом POST (когда данные отправляются отдельным HTTP-пакетом). В данной же заметке описывается отправка форм методом GET (когда данные передаются непосредственно в URL-адресе страницы-адресата в виде пар имя=значение , добавляемых после вопросительного знака к адресу, указанному в атрибуте action формы), и соответствующие страницы пользователь может беспрепятственно обновлять или возвращаться на них без каких-либо запросов на подтверждение от браузера.
  • Наташа 2015-01-22 Спасибо большое за информацию. У меня есть один «дурацкий» вопрос :-). Почему при размещении 2 и более кнопок на одной странице (с разными url адресами) все они работают в одном направлении?
  • Marat Tanalin(автор)2015-01-22 Наташа, скорее всего, в вашем HTML-коде есть ошибки (например, у первой из двух форм отсутствует закрывающий тег

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

  • Наташа 2015-01-22 Спасибо, мне следовало быть более внимательной. И за Валидатор отдельное спасибо )))
  • thnx 2015-02-05 Весь интернет перерыл пока искал! спасибо мне очень помогло! и ошибок никаких нет в браузерах.
  • ValeriusSoft 2015-05-27 Не работает на движок OpenCart 2.0.2 $uri = $_SERVER[‘REQUEST_URI’];
    $qPos = strpos($uri, ‘?’); if ($qPos === strlen($uri) — 1) header(‘HTTP/1.1 301 Moved Permanently’);
    header(‘Location: ‘ . substr($uri, 0, $qPos));
    >
    ?> Может у вас есть код для .htaccess ?
  • Marat Tanalin(автор)2015-05-27 ValeriusSoft, см. новую заметку «Удаляем пустую строку запроса из URL».
  • Den 2015-09-11 как привязать код возврата на предыдущую страницу
    к кнопке?
    код кнопки: назад

    За ранее спасибо.

  • Marat Tanalin(автор)2015-09-11 Den, в вашем случае ссылка функционально не является ссылкой (указывает на фиктивный пустой якорь # и существует только для исполнения JS-кода при щелчке), поэтому можно просто заменить элемент A на элемент BUTTON , сохранив прежний onclick -обработчик. Но в общем случае использование JavaScript для реализации ссылки на предыдущую страницу нежелательно, т. к. :
    • JS может быть выключен в браузере пользователя, и тогда такая ссылка работать не будет, запутывая пользователя;
    • пользователь может попадать на одну и ту же страницу с разных страниц вашего сайта (тогда ссылка «Назад» будет всегда указывать на разные страницы), со страницы другого сайта (тогда предыдущий пункт в истории браузера будет указывать на страницу другого сайта — например, поисковика) или отсутствовать вообще (если страница открыта из закладок браузера, и тогда JS-ссылка «Назад» работать не будет).

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

  • Den 2015-09-11 Логично. Спасибо за быстрый ответ. Буду искать другой путь
  • Mig 2015-09-16 Спасибо, что просветили! Я тоже сначала сделал не правильно.
  • anstrem 2015-09-18 ИМХО правильный способ кнопку все таки ссылкой не делать, а просто визуализировать ссылку в виде кнопки: Оставить отзыв С цветами и стилями только сами поиграйтесь, а то тут какой то ужас стоит 🙂
  • Marat Tanalin(автор)2015-09-18 anstrem, такая кнопка будет отличаться внешне от системных кнопок, имеющих оформление, родное (native) для операционной системы.
  • Галина 2015-09-28 В html5 , по-моему, можно оформить кнопку-ссылку проще : и не мучиться с настройкой редиректа
  • Marat Tanalin(автор)2015-09-28 Галина, такая кнопка не будет работать при выключенном JavaScript. Кстати, ссылка на главную страницу не должна указывать на файл.
  • Галина 2015-09-28 автор, согласна.
  • Андрей 2015-10-06 Спасибо за подробное описание!
    Но у меня не получилось.
    Вот код (это популярная в сети кнопка)


    Guess Who?

    Was born Agnes Gonxha Bojaxhiu.


    Что не делаю, все равно код невалидный.

  • Marat Tanalin(автор)2015-10-06 Андрей, скорее всего, JS-логика, привязанная к такой кнопке, зависит от конкретной, заранее определённой HTML-структуры, и с этим ничего не поделать. Для полной уверенности можно попробовать заменить обрамляющую ссылку на форму с тем же атрибутом data-path-hover — если не заработает (скорее всего), то ветер с моря дул не судьба.
  • SkyFfs 2015-11-24 Спасибо, помогло! )
  • Badrainbow 2015-12-18 Самое логичное решение
  • Юлия 2016-03-12 Скажите пожалуйста, а можно ли в этой форме кнопки поменять цвет кнопки и шрифта?

  • Marat Tanalin(автор)2016-03-13 Юлия, используйте CSS-свойства background и color .
  • Юлия 2016-03-14 Спасибо)
  • Сергей 2016-04-27 Добрый день.
    Я только-только начал изучать html.
    Сейчас пытаюсь сделать элементы выпадающего списка ссылками на якоря.Это возможно сделать, используя только html?
    Спасибо.
  • Marat Tanalin(автор)2016-04-27 Сергей, если под выпадающим списком подразумевается HTML-элемент SELECT , то средствами статического HTML (без JavaScript) переход с его помощью на якоря не реализовать. Замечу, что в общем случае выпадающий список — не самый удобный способ навигации (например, нет возможности открыть произвольную ссылку в новой вкладке). Если ссылок не очень много, целесообразнее реализовать навигацию в виде UL -списка обычных ссылок.
  • Сергей 2016-04-27 Просто было любопытно. Понял Вас, приму к сведению.
    Спасибо за ответ.
  • MER11111111 2017-01-10 Всем привет,информация точна и подробная,спасибо автору,но у меня возник вопрос,если у меня сайт разделён фреймами,то как задать условия появления страницы,ссылка которой в кнопке,в определённом фрейме?(у меня на сайте есть верхний фрейм,боковой(там где находится кнопка) и центральный фрейм(в котором и должен появиться файл,который указан ссылкой) )
  • Marat Tanalin(автор)2017-01-10 @MER11111111 Для указания окна или фрейма, в который следует загружать ресурс, на который указывает ссылка, предназначен атрибут target , в качестве значения которого в случае фрейма следует указать значение атрибута name соответствующего фрейма. Но на самом деле фреймы как подход давно устарели, вместо них следует использовать шаблонизацию на стороне сервера.
  • Dmitriy77 2017-02-11
  • Marat Tanalin(автор)2017-02-11 Дмитрий, именно поэтому в тексте и написано «в современных браузерах и IE8+ атрибут необязателен».
  • Dmitriy77 2017-02-16 У меня сейчас небольшая запара как раз на тему
  • Marat Tanalin(автор)2017-02-16 Дмитрий, учитывая, что текущая суммарная доля устаревших версий IE вплоть до 10-й включительно составляет всего около 1%, в большинстве случаев можно смело отказываться от поддержки всех версий IE, кроме 11-й , не говоря уж об IE8 с его долей менее 0,3% и IE7 с долей 0,1%, которые не заслуживают внимания уже несколько лет.
  • Паша 2018-01-30 Марат у меня вот такая кнопка но ссылка на неё не работает что делать
    .button background-color:#0000ff;
    border: none;
    color: white;
    padding:20px;
    width: 200px; text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size:25px;
    border-radius:8px;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    >
    .button:after content: «»;
    background: #f1f1f1;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px !important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
    >
    .button:active:after padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
    > .button:hover background-color: #4CAF50;
    color: white;
    >

  • Marat Tanalin(автор)2018-01-30 Паша, см. секцию «Правильно» в заметке.
  • Максим 2018-02-13 Такой вопрос, при наведении курсора на кнопку, внешность курсора не заменяется на всем принятый указательный палец поднятый вверх (когда наводишь на любую ссылку), есть ли способ как-то сделать это, многие даже не поймут что это ссылка наводя на кнопку)
  • Marat Tanalin(автор)2018-02-13 Максим: BUTTON.example cursor: pointer; >
  • Сергей 2018-03-04 Badrainbow 2015-12-18 писал:
    Самое логичное решение

    ==================================================================
    СПАСИБО ОГРОМНОЕ Badrainbow! Я не силен в программировании, но кнопку для интернет-магазина на PrestaShop все таки смог перепрограммировать. Вот то, что было изначально: » /> Нужно было сделать так, чтобы при нажатии на кнопку активировался переход по адресу URL. Сначала сделал так: » /> Этот вариант сработал, но мне не хотелось использовать javascript в кнопке. В итоге, благодаря Badrainbow, сделал так: » /> Это работает. Еще раз спасибо Badrainbow.

  • Marat Tanalin(автор)2018-03-04

    не хотелось использовать javascript в кнопке

    • Правильно
      • Демо
      • Строка запроса
      • Chromium/Blink и WebKit
      • Ограничения по сравнению с реальной ссылкой
      • Кнопка внутри ссылки
      • Кнопка с JS-обработчиком щелчка
      • Firefox и Chromium
      • Демо
      • Internet Explorer, Edge и спецификация
      • html,
      • html5,
      • snippets,
      • web-стандарты,
      • избранное,
      • кроссбраузерность,
      • ликбез,
      • семантика,
      • формы
      • Firefox 114
      • Firefox 113
      • Firefox 112
      • Firefox 111
      • Firefox 110
      • Как сделать кнопку ссылкой
      • Правильный DOCTYPE в HTML5
      • Сброс стилей в CSS
      • Отключение Caps Lock в Windows
      • Dell P2415Q. Авторский обзор 4K-монитора
      • Asus PQ22UC — 22″ OLED-монитор 4K
      • Dell UP3017Q — 30″ OLED-монитор 4K

      Перепечатка любых материалов сайта в любом объёме запрещена

      Как сделать ссылку кнопку или кнопку ссылку на HTML? По 3 способа!

      Доброго времени суток! Каждый веб мастер задавался вопросом как же сделать кнопку по клику на которую человек сразу перейдет по нужному адресу. Простая ссылка » Ссылка» выглядит не красиво, и не всегда подходит по дизайну вашего сайта. Так же иногда возникает необходимость сделать обратное. Из обычной кнопки, сделать аналог ссылки, по клику на которой будет происходить переход по нужному адресу.

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

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

      Первый способ

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

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

      А вот и они, виновники нашей победы над текстовой ссылкой, стили. Они преобразуют ее в кнопку.

      сслыка кнопка, css стилями

      Таким способом мы заменили все ссылки на странице на кнопки.

      Второй способ

      Этот способ достаточно банален и прост. Скорее всего именно так вы и хотели сделать такую кнопку изначально. Просто оберните картинку кнопки тегом » «!

      ссылка кнопкой с помощью картинки

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

      Третий способ

      Этот способ практический такой же как и первый, за исключением того, что в первом методе мы использовали стили кнопок «по умолчанию«, сейчас же мы нарисуем свою кнопку «с блэк джеком и контуром!«.

      .ssilka< border:1px solid #ccc; /*рамка*/ background:#eaeaea; /*фон*/ padding: 10px 10px; /*отступы внутри*/ text-decoration: none; /*убрать подчеркивание ссылки*/ >

      Как сделать ссылку кнопку или кнопку ссылку на HTML? По 3 способа!

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

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

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

      Первый способ

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

       

      кнопка как ссылка с использованием форм

      Второй способ

      Тут мы уже задействуем магию JavaScript! Для этого, создадим функцию, которая будет перенаправлять пользователя куда нам нужно. И сделаем это так, чтоб можно было использовать эту функцию быстро и удобно в будущем.

       function GoUrl(url) 

      Что-бы воспользоваться функцией нужно лишь прописать свойство onClick для любой кнопки.

      Третий способ

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

      Итоги

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

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

      Приветствую! В этой статье хочу поговорить про кнопки, на мой взгляд один из важнейших элементов в дизайне сайтов и приложений. Ведь, в большинстве случаев, кнопки нужны для того, чтобы заставить пользователя выполнить какое-либо действие (подписаться на рассылку, добавить товар в корзину, оставить комментарий, заказать обратный звонок и т.д.), которое можно так или иначе монетизировать. Мы же здесь не просто так собрались 😉

      Итак из этой статьи вы узнаете:

      • Для чего нужны кнопки и какие функции они выполняют
      • Какие бывают кнопки и в чем их различия
      • Как сделать кнопку в HTML
      • Как сделать красивую кнопку в HTML и CSS

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

      Но давайте по порядку.

      Для чего нужны кнопки на сайте?

      Ответ напрашивается сам собой: “Для того, чтобы их нажимали!”. И, действительно, выделяющаяся симпатичная кнопка привлекает гораздо больше внимания чем тусклая и унылая ссылка. С другой стороны, если вся страница заполнена разномастными кнопками, которые, переливаясь и моргая, требуют внимания пользователя, он, скорее всего, не поняв, что от него требуется, не нажмет ни на одну и просто закроет вкладку.

      Поэтому использовать кнопки надо “экономно”, в идеале не больше 1-2 в видимой области экрана. При этом пользователю должно быть максимально понятно, что произойдет, если он нажмет на кнопку.

      Какие бывают кнопки?

      В моем представлении кнопки бываю двух типов, для каждого из них я использую соответствующие HTML-теги:

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

      Кнопки-действия нужны для совершения какого-либо действия на странице (отправка формы, открытие модального окна и т.д.). Для этого можно использовать теги или . Я предпочитаю второй вариант, т.к. он гораздо более гибкий в настройке.

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

      Но зачем это нужно. Все гораздо проще и понятнее.

      Если кнопка нужна для перехода на страницу — используем , во всех остальных случаях —

      Как сделать кнопку в HTML?

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

      Основными атрибутами таких кнопок являются:

      type: button | submit | reset

      Тип кнопки. Это необязательный параметр, и его можно пропустить. Если кнопка находится внутри формы и атрибут type отсутствует, браузер посчитает, что тип кнопки — submit и попытается отправить форму обработчику.

      Несмотря на слухи, которые ходят в интернете, о том, что тег должен располагаться только внутри тегов , на самом деле это не так 🙂 Если вдруг по какой-то причине Вам нужно или хочется поместить свою кнопку вне формы, которую она должна отправлять/сбрасывать/еще-что-то-делать, просто используйте атрибут form со значением соответствующим атрибуту id этой формы.

      Кроме того, у тега button могут быть следующие атрибуты:

      • autofocus — Автоматически устанавливает фокус браузера на кнопке при загрузке страницы
      • disabled — Кнопка заблокирована и нажатие на нее не выполняет никаких действий
      • formaction (только для типа submit) — адрес обработчика формы, на который отправляются данные из формы
      • formenctype (только для типа submit) — Тип отправляемых данных. Может быть application/x-www-form-urlencoded , multipart/form-data , text/plain
      • formmethod (только для типа submit) — HTTP-метод, при помощи которого пересылаются данные. Может быть get или post
      • formnovalidate (только для типа submit) — Отключает автоматическую валидацию введенных данных
      • formtarget (только для типа submit) — Указывает на то, как выводится результат обработки формы. Может быть _blank , _self , _parent , _top или значение атрибута name фрейма
      • name — Имя кнопки (можно использовать если, например, в форме есть несколько кнопок, которые ее отправляют, и обработчику нужно знать, какая из них нажата)
      • value — Значение кнопки (смысл примерно тот же, что и с name)

      Совет: используйте только быстрый и надёжный хостинг для своих сайтов, например Beget.com

      Как сделать красивую кнопку в HTML и CSS?

      У каждого из нас свое представление о красоте: кто-то считает красивым закат на берегу моря, а кто-то — Ниссан Жук. О вкусах, как говорится, не спорят.

      В моем представлении красивая кнопка — это кнопка, которая обладает следующими качествами:

      Является интерактивной (т.е. реагирует на взаимодействие с ней пользователем). Отличительной чертой кнопок, является то, что их можно нажимать, следовательно у кнопки должно быть несколько состояний: дефолтное (состояние «покоя»), нажатое и «ховер» (при наведение курсора)

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

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

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

      Если вы хотите узнать как сделать кнопку объемной или с эффектом «стекляшечности», как сделать картинку кнопкой и т.д. — почитайте статьи по дизайну интерфейсов за 2005-2009 гг. 🙂

      Еще одним пунктом я бы добавил, расположение кнопки в привычных для посетителей местах (например, кнопки входа/регистрации в правом верхнем углу, или кнопка отправки формы под формой). Но это уже больше относится к дизайну всей страницы.

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

      Для вывода иконок в кнопках, да и, в общем-то, везде я использую замечательный шрифт FontAwesome, а для текста — бесплатный шрифт Roboto, с которым одинаково хорошо смотрятся как кириллические, так и латинские символы.

      @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css'); @import url('https://fonts.googleapis.com/css?family=Roboto');
      .button < /* Сбрасываем дефолтные стили */ border: none; outline: none; display: inline-block; text-align: center; text-decoration: none; cursor: pointer; font-size: 16px; /* Можно также использовать любые встроенные и кастомные шрифты, например, отсюда */ font-family: Roboto, Verdana, Tahoma, sans; /* Тут можно поэкспериментировать */ padding: 12px 16px; border-radius: 100px; color: #fff; >.button i < margin-right: 4px; >.button + .button < margin-left: 6px; >.button.blue < background: #2196F3; >.button.purple

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

      .button:hover < box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); >.button:hover.blue < background: #39a1f4; >.button:hover.purple < background: #a66bbe; >.button:active < box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); >.button:active.blue < background: #0d8aee; >.button:active.purple

      Вот и все! Две симпатичные кнопки готовы.

      При наличии желания и времени можно их дополнить плавными анимированными переходами. Вот несколько примеров:

      А теперь обещанный бонус для тех кто дочитал этот пост до конца.

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

      #scroll-top < position: fixed; bottom: 48px; right: 48px; >#scroll-top button < position: relative; overflow: hidden; height: 48px; width: 48px; border: none; outline: none; cursor: pointer; color: rgba(0, 0, 0, 0.3); font-size: 16px; background: #21c984; transition: width 0.5s; border-radius: 100px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); >#scroll-top button span < display: inline-block; transition: opacity 0.3s ease 0s, transform 0.5s ease 0s; line-height: 48px; font-size: 20px; width: 100%; >#scroll-top button span::before < width: 100%; position: absolute; left: 0px; top: 200%; opacity: 0; content: attr(data-hover); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); color: #fff; font-size: 16px; text-transform: uppercase; >#scroll-top:hover button < width: 120px; background: #9b59b6; >#scroll-top:hover button span < -webkit-transform: translateY(-200%); -moz-transform: translateY(-200%); transform: translateY(-200%); >#scroll-top:hover button span:before < opacity: 1; >#scroll-top button:active
      jQuery(document).ready(function($) < $("#scroll-top >button").on("click", function(e) < var body = $("html, body"); body.stop().animate(< scrollTop: 0 >, 500, "swing"); >); >);

      В итоге должно получиться что-то похожее на это 😉

      Надеюсь, эта статья была для вас полезна. Буду рад ответить на ваши вопросы в комментариях.

      Как привязать ссылку к кнопке html

      Для того чтобы реализовать эту возможность можно пойти разными путями. Например, можно использовать стандартный тэг в связке с , и для формы указываем атрибут action с адресом веб-страницы. Другой более красивый вариант — стилизовать тэг под кнопку. Рассмотрим этот вариант подробнее:

       href="#" class="btn">Это кнопка 
      .btn  /* Теперь это строчно-блочный элемент */ display: inline-block; /* Серый цвет фона кнопки */ background: #8C959D; /* Белый цвет текста */ color: #fff; /* Отступы вокруг текста */ padding: 16px 32px; /* Убираем подчёркивание */ text-decoration: none; /* Скругляем уголки */ border-radius: 3px; > 

      a-button

      Результат:

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

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