Стилизация кнопок в виде ссылок
Распространенная ошибка, которую совершают многие разработчики, заключается в использовании ссылки для запуска действия на сервере, например, удаления элемента из корзины покупок или добавления чего-либо в избранное. Оба этих примера представляют собой действия, которые изменяют состояние сервера, и поэтому их следует выполнять с использованием « post
».
Однако иногда даже разработчики, которые знают, что неправильно использовать ссылку там, где они должны использовать форму, втягиваются в это, когда дизайн требует, чтобы кнопка выглядела как ссылка.
Обратите внимание, что я определенно не поощряю изменение дизайна элементов кнопок, чтобы они выглядели как ссылки. Я считаю, что нам не следует слишком сильно возиться с настройками браузера по умолчанию для таких функциональных вещей, как элементы управления формами, полосы прокрутки и тому подобное. Тем не менее, иногда вам просто нужно построить то, что говорит вам ваш дизайнер.
На самом деле несложно сделать кнопку отправки похожей на ссылку с помощью CSS, поэтому вам никогда не придется жертвовать формами ради ссылок исключительно ради дизайна.
Во-первых, разметка: хотя вы можете использовать input type="submit"
в качестве элемента отправки, и этот пример будет работать точно так же, элемент кнопки, на мой взгляд, гораздо лучший вариант. Он действительно гибкий и может иметь множество различных элементов, вложенных внутрь, если вы того пожелаете, от простого текста с изображением до заголовков и абзацев. Эта статья о кнопках, написанная Аароном Густафсоном еще в 2006 году, все еще довольно актуальна сегодня и объясняет некоторые способы использования скромного элемента кнопки.
Еще одна полезная статья, также опубликованная некоторое время назад, объясняет приемы, которые Wufoo использует для стилизации ссылок, чтобы они выглядели как кнопки. Действительно важная вещь, которую следует вынести из этой статьи, заключается в том, что добавление overflow: visible
на кнопку устраняет сумасшедшую проблему с шириной, которую IE любит делать с нами.
Я разместил простую демонстрацию, чтобы вы могли следить за ней в своем браузере. Для целей этого примера разметка будет следующей: