Если коротко:
Используйте для кнопок — кнопки, а для ссылок — ссылки.
Это не исчерпывающее руководство по кнопкам и не пример невероятного дизайна, а лишь попытка показать, что есть разница между ссылками и кнопками.
Для кого эта статья?
В первую очередь для дизайнера который делает макет сайта, но не дорисовывает детали свойственные вебу. Своеобразная попытка объяснить, что веб-сайт лежит за пределами плоской полиграфии.
Во вторых для верстальщика к которому пришёл макет без состояний, чтобы было куда дизайнера послать.
В третьих чтобы вместо очередной тирады о разнице в кнопках\ссылках и нужности дизайна состояний, просто давать ссылку.
Содержание
Ссылки
Введение
Когда наводят указатель на ссылку которая кнопка то в левом нижнем углу появляется надпись 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 — файлы-картинки.