Стиль button(кнопок) такой как у link(ссылки)

Перевод статьи "
Six hours agoStyling buttons to look like links" Natalie Downe

Распространенной ошибкой многих разработчиков есть то, что для выполнения серверных действий они используют link элементы(дальше просто link), например, удаление товара из корзины покупок или добавление чего то в избранное. Эти оба действия являются событиями которые изменяют состояния на сервере и должны быть выполнены с помощью метода 'post'.

Однако, иногда даже разработчики, которые знают что ошибочно использовать link, вместо form элемента(дальше просто form), делают это в случае, когда button(дальше просто button) должна выглядеть как link из-за 'высосанных из пальца' требований дизайна.

Обратите внимание на то, что я определенно не поощряю редизайн button для того что бы он имел вид как link. Я считаю, что нам не следует вносить слишком много путаницы в взаимодействие с браузером для функциональных вещей, таких как элементы form, прокрутку и т.д. Тем не менее, иногда нужно сделать именно так как хочет ваш дизайнер.

На самом деле с использованием CSS легко сделать что бы submit кнопка выглядела как link, однако лучше не попадать в такое положение, когда вы жертвуете внешним видом в пользу link исключительно из-за дизайн.

Сначала разметка: хотя вы можете использовать решение 'input' с

type="submit"

как submit элемент, и этот пример будет работать аналогично, но button, по моему мнению, лучший выбор. Это действительно гибкий способ, который может содержать большое разнообразие других элементов управления внутри. Если выбрать такую реализацию, то вы сможете использовать множество элементов от простого текста в изображении до заголовков и параграфов. Статья про кнопки Aaron Gustafson написана в 2006-м году по прежнему актуально сегодня, и объясняет некоторые возможности использование простых кнопок button.

Еще одна полезная статья, написана не так давно, объясняет методы которые Wufoo использовал для того что бы link выглядел как button. Из нее можно подчеркнуть действительно полезное идею, можно увеличить ширину у потомков button в IE, для этого необходимо прописать следующий стиль

overflow: visible

.

Для демонстрации можете воспользоваться следующим примером который я написала. В данном примере используется следующая разметка:

That's nice, I am a link

На основной странице данной демонстрации применены стили к тегам link и body:

body {
font-family: "Verdana" sans-serif;
}
a:link,
a:visited { 
color: blue;
}
a:hover,
a:focus,
a:active {
color: black;
}

Дальше я добавила магические теги для удаления ширины всех кнопок в IE:

button {
overflow: visible;
width: auto;
}

Button элементу установила css класс, в котором были указания изменения цвета, типа шрифта(кнопка должна наследовать системные шрифты), а также заменила стандартные стили button, такие как "border", "margin", "padding" и "background".

По умолчанию курсор кнопки выглядит как arrow. Для всех button я как правило устанавливаю

cursor: pointer

, что бы пользователи знали что они "clickable"(их можно нажать). Это добавляет больше впечатления, что button выглядеть как link.

button.link {
font-family: "Verdana" sans-serif;
font-size: 1em;
text-align: left;
color: blue;
background: none;
margin: 0;
padding: 0;
border: none;
cursor: pointer;
}

Интересно, что Mozilla не позволяет выделить текст внутри button, в то время как в других браузерах можно это сделать, что бы исправить данный эффект и дать возможность пользователям выделять текст в нашем псевдо link нужно применить следующий стиль:

-moz-user-select: text;

Если ваш стиль button как то отличается, то их тоже можно переопределить.

Теперь у вас почти получился link. Те из вас кто был внимателен, должны были заметить неясную ситуацию внутри button со span элементом. Суть в том, что нет смысла напрямую устанавливать text-decoration стилю button, он не будет применен, а вам возможно нужно было реализовать именно это.

Применяя text-decoration на элементе span при наведении или фокусировки на button отобразиться подчеркивание.

button.link span {
text-decoration: underline;
}
button.link:hover span,
button.link:focus span {
color: black;
}

Естественно, что в "любимом" браузере IE 6 не будут отображаться эффекты наведения на ваших элементах link потому, что он не "делает" наведение на внутренний элемент, кроме непосредственно самих элементов link. Если вы действительно хотите, то вы можете реализовать эти эффекты с помощью javascript, добавляя класс при наведении и убирать при перемещении курсора за пределы элемента управления.

Вот мой простой пример. Если вам нужен button который будет выглядеть как link, например, кнопка удаления в корзине интернет магазина, необходимо применить

display:inline

стиль для любой формы и элементов внутри.

Теперь вы знаете как это сделать, не оправдывайтесь - воспользуйтесь правильным HTTP методом.