• Tutorial





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


Для кого эта статья?

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


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


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


СсылкиВведение Ссылка которая кнопка



CSSДля наглядности - мой вариант велосипеда который выглядит странновато, но для примера сойдёт.

Обычная, наведение, клик, отключена соответственно.button - обычное состояние button { background: none; outline: none; border: none; text-transform: uppercase; } button:hover , button:focus - при наведении button:hover, button:focus { color: hsla(108, 12%, 0%, 1); box-shadow: -1px 1px 2px hsla(108, 62%, 42%, 1); background-color: hsla(108, 62%, 92%, 1) } button:active - в момент клика button:active { color: hsla(108, 42%, 32%, 1); box-shadow: -2px 4px 8px hsla(64, 64%, 42%, 1); background-color: hsla(64, 64%, 92%, 1); } button:disable - отключена button:disabled { color: hsla(0, 0%, 64%, 1); background: none; box-shadow: none; opacity: 1; } Пример посложнее


Показать CSS

button { margin: .8rem; font-size: 1.42rem; padding: 1rem; background: hsla(180, 90%, 64%, 1); color: hsla(180, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(180, 90%, 32%, 1); box-shadow: -4px 4px 0 0 hsla(180, 90%, 22%, .87), -3px 4px 3px hsla(180, 42%, 11%, 1), 1px 5px 4px hsla(180, 42%, 11%, 1), -4px 1px 0 0 hsla(180, 90%, 32%, 1), inset 0 0 1px 0 hsla(180, 90%, 90%, 1); border: 1px hsla(180, 92%, 56%, 1) solid; border-top-color: hsla(180, 92%, 64%, 1); border-radius: 5px; outline: none; position: relative; transition: all .22s ease-in; } button:hover { background: hsla(420, 90%, 42%, 1); color: hsla(420, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(420, 90%, 32%, 1); border: 1px hsla(420, 92%, 56%, 1) solid; border-top-color: hsla(420, 90%, 64%, 1); box-shadow: -4px 4px 0 0 hsla(420, 90%, 22%, .87), -3px 4px 3px hsla(420, 42%, 11%, 1), 1px 5px 4px hsla(420, 42%, 11%, 1), -4px 1px 0 0 hsla(420, 90%, 32%, 1), inset 0 0 1px 0 hsla(420, 90%, 90%, 1); } button:focus { background: hsla(108, 90%, 42%, 1); color: hsla(108, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(108, 90%, 32%, 1); border: 1px hsla(108, 92%, 56%, 1) solid; border-top-color: hsla(108, 90%, 64%, 1); box-shadow: -4px 4px 0 0 hsla(108, 90%, 22%, .87), -3px 4px 3px hsla(108, 42%, 11%, 1), 1px 5px 4px hsla(108, 42%, 11%, 1), -4px 1px 0 0 hsla(108, 90%, 32%, 1), inset 0 0 1px 0 hsla(108, 90%, 90%, 1); } button:active { background: hsla(420, 90%, 42%, 1); color: hsla(420, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(420, 90%, 32%, 1); transform: translate(-4px, 4px); border: 1px hsla(420, 92%, 22%, 1) solid; border-top-color: hsla(420, 92%, 56%, 1); box-shadow: 0 0 0 0 hsla(420, 90%, 22%, .87), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 0 hsla(420, 90%, 32%, 1), inset 1px 1px 4px 0 hsla(420, 90%, 22%, 1); } button:disabled { background: hsla(420, 0%, 64%, 1); color: hsla(420, 0%, 12%, 1); text-shadow: 1px 1px 1px hsla(420, 0%, 32%, 1); transform: translate(-4px, 4px); border: 1px hsla(420, 0%, 22%, 1) solid; border-top-color: hsla(420, 0%, 56%, 1); box-shadow: 0 0 0 0 hsla(420, 0%, 22%, .87), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 0 hsla(420, 0%, 32%, 1), inset 1px 1px 4px 0 hsla(420, 0%, 22%, 1); } button:disabled.in_ajax { background: hsla(108, 22%, 64%, 1); color: hsla(108, 22%, 12%, 1); text-shadow: 1px 1px 1px hsla(108, 22%, 32%, 1); transform: translate(-4px, 4px); border: 1px hsla(108, 22%, 22%, 1) solid; border-top-color: hsla(108, 22%, 56%, 1); box-shadow: 0 0 0 0 hsla(108, 22%, 22%, .87), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 0 hsla(420, 0%, 32%, 1), inset 1px 1px 4px 0 hsla(420, 0%, 22%, 1); }

ДизайнеруТы цээсэсов можешь и не знать, но состояния отрисовать обязан !

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





Спасибо

Спасибо, что дочитали. Всё здесь написаннное не является 100% истиной в последней инстанции.
Репозиторий

GitHub

Ссылка на репозиторий этой статьи . Если хотите дополнить или исправить, присылайте пожалуйста Pull Request


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

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

1. Кнопка в виде изображения

Это самый простой подход к созданию кнопки в виде ссылки на сайте. Для этого Вам понадобится всего лишь найти подходящую картинку для кнопки. Например, картинка с Вашей кнопкой называется button.jpg . Тогда, для создания ссылки код должен быть следующим:

... ...

Вот во что он превращается на странице сайта:

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

Кстати, для создания изображений для кнопок есть специальный сайт: http://dabuttonfactory.com/ . Здесь можно бесплатно создать кнопку по Вашему вкусу (задать стиль, выбрать изображение, написать подходящий текст и т.п.).

2. Кнопка с помощью HTML тега

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

... ...

Вот как это примерно будет выглядеть на странице:

Вместо URL1 и URL2 надо написать адреса страниц, куда необходимо осуществить переход. Если Вы хотите, чтобы ссылки открывались в новых вкладках (аналог атрибута target="_blank" у тега a), то вместо onclick="javascript:window.location="..."" нужно прописать onclick="javascript:window.open="..."" (заменить location на open).

Я почти уверен, что Вам захочется оформить кнопку как-то по другому (под дизайн своего сайта). Для этого введем класс btn:

.btn { //Задание общего стиля для кнопки height :30px ; border-color :#c2e254 #9bb838 #9bb838 #c2e254 ; border-style :solid ; border-width :1px ; background :#c2e254 ; cursor :pointer ; } .btn:hover { //Стиль кнопки при новедении на него курсора border-color :#FFCC66 #FFFF99 #FFFF99 #FFCC66 ; border-style :solid ; border-width :1px ; background :#FFFF99 ; } .btn:focus { //Стиль кнопки, когда она в фокусе background :#ddd ; border-color :#ddd #333 #333 #ddd ; border-style :solid ; border-width :1px ; } .btn:active { //Стиль кнопки при нажатии background :#ff0000 ; border-color :#ddd #333 #333 #ddd ; border-style :solid ; border-width :1px ; }

После этого кнопка будет выглядеть следующим образом на странице.

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

Использование HTML

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

Пример 1. Атрибут action

Кнопка Переход по ссылке

В этом примере при щелчке по кнопке открывается веб-страница new.html в новой вкладке.

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

Использование CSS

Раз кнопку нельзя сделать ссылкой, то вообще отказываемся от и стилизуем ссылку, чтобы она стала похожа на кнопку. В примере 2 показан класс btn , при добавлении его к элементу ссылка меняет своё оформление.

Кнопка .btn { display: inline-block; /* Строчно-блочный элемент */ background: #8C959D; /* Серый цвет фона */ color: #fff; /* Белый цвет текста */ padding: 1rem 1.5rem; /* Поля вокруг текста */ text-decoration: none; /* Убираем подчёркивание */ border-radius: 3px; /* Скругляем уголки */ } Переход по ссылке

Результат данного примера показан на рис. 1.

Использование JavaScript

Для перехода к указанной веб-странице можно воспользоваться событием onclick , добавляя его к элементу . Внутри onclick пишем document.location , а в качестве значения адрес желаемой веб-страницы (пример 3). Обратите внимание на комбинацию кавычек, адрес веб-страницы берётся в одинарные кавычки.

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

Мне также понравится, чтобы в URL не было никаких дополнительных символов или параметров.

Как я могу это достичь?

Continue

но проблема заключается в том, что в Safari и Интернет   Explorer , он добавляет знак вопросительного знака в конец URL-адреса. Мне нужно найти решение, которое не добавляет никаких символов в конец URL-адреса.

Для этого есть два других решения: использование JavaScript или стилизация ссылки, чтобы выглядеть как кнопка.

Использование JavaScript:

Continue

Но для этого явно нужен JavaScript, и по этой причине он менее доступен для чтения с экрана. Пункт ссылки - перейти на другую страницу. Поэтому попытка заставить кнопку действовать, как ссылка, является неправильным решением. Мое предложение состоит в том, что вы должны использовать ссылку и стиль, чтобы он выглядел как кнопка .

Continue

27 ответов

HTML

Простой способ HTML состоит в том, чтобы поместить его в , в котором вы указываете желаемый целевой URL в атрибуте action .

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

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

CSS

Если CSS разрешен, просто используйте , который вы хотите выглядеть как кнопка, используя, помимо прочего, свойство appearance (только поддержка Internet поддержка браузера в настоящее время (июль 2015 г.) все еще плохая).

Go to Google a.button { -webkit-appearance: button; -moz-appearance: button; appearance: button; text-decoration: none; color: initial; }

Или выберите одну из этих многих библиотек CSS, таких как Bootstrap .

Go to Google

JavaScript

Если JavaScript разрешен, установите window.location.href .

Если это внешний вид кнопки, которую вы ищете в базовом теге привязки HTML, вы можете использовать Twitter Bootstrap для отформатируйте любую из следующих распространенных ссылок/кнопок типа HTML, чтобы они отображались в виде кнопки. Обратите внимание на визуальные различия между версиями 2, 3 или 4 рамки:

Link Button

Использование:

Click me

К сожалению, эта разметка больше не действительна в HTML5 и не будет проверять и не всегда работать как потенциально ожидаемая. Используйте другой подход.

Как и в случае с HTML5, кнопки поддерживают атрибут formaction . Лучше всего, не требуется Javascript или обман.

Go to Stack Overflow!

Предостережение

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

Click me !

И он загрузит href на ту же страницу. Хотите новую страницу? Просто используйте target="_blank" .

Если вы используете внутреннюю форму, добавьте атрибут type = "reset" вместе с элементом кнопки. Это предотвратит действие формы.

www.example.com

Единственный способ сделать это (за исключением изобретательной идеи BalusC!) - это добавить к кнопке JavaScript onclick событие, что не подходит для доступности.

Есть ли недостатки в выполнении следующих действий?

Schedule

Где a.nostyle - это класс, который имеет стиль вашей ссылки (где вы можете избавиться от стандартного стиля ссылок), а span.button - это класс, который имеет стиль для вашего "button" (фон, граница, градиент, и др.).

Идя вместе с тем, что добавили некоторые другие, вы можете сходить с ума только с помощью простого CSS-класса без PHP, no jQuery , просто HTML и CSS.

Создайте класс CSS и добавьте его в свой якорь. Код ниже.

Button-link { height:60px; padding: 10px 15px; background: #4479BA; color: #FFF; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: solid 1px #20538D; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); } .button-link:hover { background: #356094; border: solid 1px #2A4E77; text-decoration: none; } Press Here to Go

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

Кажется, есть три решения этой проблемы (все с плюсами и минусами).

Решение 1: Кнопка в форме. Continue

Но проблема заключается в том, что в некоторых версиях популярных браузеров, таких как Chrome, Safari и Internet Explorer, он добавляет знак вопроса в конец URL-адреса. Таким образом, другими словами, для кода выше ваш URL-адрес будет выглядеть следующим образом:

Http://someserver/pages2?

Есть один способ исправить это, но для этого потребуется конфигурация на стороне сервера. Одним из примеров использования Apache Mod_rewrite было бы перенаправление всех запросов с завершающим? на их соответствующий URL без? . Вот пример использования.htaccess, но есть полный поток :

RewriteCond %{THE_REQUEST} \?\ HTTP RewriteRule ^/?(index\.cfm)? /?

Аналогичные конфигурации могут различаться в зависимости от используемого веб-сервера и используемого стека. Итак, резюме этого подхода:

  • Это настоящая кнопка, и семантически это имеет смысл.
  • Нет JavaScript, не требуется сложный стиль.
  • Трейлинг? выглядит уродливым в некоторых браузерах. Это может быть исправлено с помощью взлома (в некоторых случаях) с использованием POST вместо GET, но чистым способом является перенаправление на стороне сервера. Недостатком перенаправления на стороне сервера является то, что он вызовет дополнительный HTTP-вызов для этих ссылок из-за перенаправления 304.
  • Добавляет дополнительный элемент
  • Позиционирование элементов при использовании нескольких форм может быть сложным и ухудшается при работе с адаптивными проектами. Некоторое расположение может стать невозможным для достижения этого решения в зависимости от порядка элементов. Это может в конечном итоге повлиять на удобство использования, если на проект влияет эта проблема.
Решение 2: Использование JavaScript.

Вы можете использовать JavaScript для запуска onclick и других событий, чтобы имитировать поведение ссылки с помощью кнопки. Пример ниже может быть улучшен и удален из HTML, но здесь просто проиллюстрировать идею:

Continue

  • Простой (для базовых требований) и сохраняющий семантику, не требуя дополнительной формы.
  • Так как это настоящая кнопка, она также будет действовать как настоящая кнопка (например, перетаскиваемое поведение и/или имитировать щелчок при нажатии пробела при активном действии).
  • Требуется JavaScript, что означает менее доступный. Это не идеально подходит для базового (основного) элемента, такого как ссылка.
Решение 3: Якорь (ссылка), стилизованная как кнопка.

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

Button!

Затем в CSS ваш стиль должен выглядеть так:

Link-button-wrapper { width: 200px; height: 40px; box-shadow: inset 0px 1px 0px 0px #ffffff; border-radius: 4px; background-color: #097BC0; box-shadow: 0px 2px 4px gray; display: block; border:1px solid #094BC0; } .link-button-wrapper > a { display: inline-table; cursor: pointer; text-decoration: none; height: 100%; width:100%; } .link-button-wrapper > a > h1 { margin: 0 auto; display: table-cell; vertical-align: middle; color: #f7f8f8; font-size: 18px; font-family: cabinregular; text-align: center; }

Link link

Button, button a{position:relative;} button a{top:0;left:0;bottom:0;right:0;}

@Nicolas, после работы для меня, как у вас, не было type="button" , из-за чего он начал вести себя как тип отправки. Так как у меня уже есть один тип submit.it, это не сработало для меня.... и теперь вы можете либо добавить класс к кнопке, либо , чтобы получить требуемый макет:

Click here

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

A.button { background-color: #999999; color: #FFFFFF !important; cursor: pointer; display: inline-block; font-weight: bold; padding: 5px 8px; text-align: center; -webkit-border-radius: 5px; border-radius: 5px; } .button:hover { text-decoration: none; }

Я знаю, что было подано много ответов, но никто из них, похоже, не справился с проблемой. Вот мой подход к решению:

  • Используйте метод , с которого начинается OP. Это работает очень хорошо, но иногда добавляет? к URL-адресу. Главной проблемой является? .
  • Используйте jQuery/JavaScript для выполнения следующей ссылки, когда JavaScript включен, поэтому? не добавляется к URL-адресу. Он будет без проблем возвращаться к методу для очень небольшой доли пользователей, у которых нет JavaScript.
  • В JavaScript-коде используется делегирование событий, поэтому вы можете присоединить прослушиватель событий до того, как существуют или . В этом примере я использую jQuery, потому что это быстро и просто, но это можно сделать и в "vanilla" JavaScript.
  • Код JavaScript предотвращает действие по умолчанию, а затем следует ссылку, указанную в атрибуте action .
Пример JSBin (фрагмент кода не может следовать ссылкам)

// Listen for any clicks on an element in the document with the `link` class $(document).on("click", ".link", function(e) { // Prevent the default action (e.g. submit the form) e.preventDefault(); // Get the URL specified in the form var url = e.target.parentElement.action; window.location = url; }); Form buttons as links Link