Правильный способ подчеркнуть кнопку отправки HTML?

Question

Если вам абсолютно необходимо стилизовать HTML-кнопки, как правильно выделить некоторые из них? например «Добавить в корзину» обычно подчеркивается визуально, чтобы выделить его.

Вариант 1 - переносить в em или strong + css

Вариант 2 - класс + css

Вариант 3 -?

Answer 1

CSS это путь. Например, в приложении Facebook «Заметки» кнопка «Опубликовать» выделена синим цветом, а остальные - серым. Это все сделано с помощью CSS классов и идентификаторов.

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

Answer 2

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

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

HTML

<div class="foo">
  <input type="submit" />
</div>

CSS

.foo input
{
 ...some styles
}

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

Answer 3

С CSS2 + вы можете использовать вариант 3: Только CSS

input[type="submit"] {
    border: 3px solid blue;
}

Подробнее: http://www.w3.org/TR/CSS2/selector.html

Answer 4

Правильный и семантический способ будет

<button><em>label</em></button>

но поскольку IE не поддерживает несколько элементов, вы должны использовать - и перенос их в em или что-то плохое

Я бы сильно предпочел

<input type="button" class="emphasized"/>

или что-то ..

Answer 5

Ну, если вы хотите выделить кнопку , я бы сказал, что наиболее семантическое представление - это обернуть ваш тег <button> (или <input type="submit"> или что-то еще вы используете) в <em> тегах и стилизуйте его в CSS, например:

em button {
    color: blue;
    font-style: normal;
    font-weight: bold;
}

(Помните, что, хотя курсив и полужирный могут быть визуальными стилями по умолчанию для <em> и <strong> в большинстве браузеров, это просто соглашение. Если вы не «сильно» подчеркиваете что-то, просто используйте <em> даже если вы хотите, чтобы оно отображалось жирным шрифтом.)

Answer 6

Многие сайты используют изображения. Одной из проблем этого может быть несоответствие - вы должны сделать все свои кнопки изображениями, или ни одно из них, или некоторые будут выглядеть неуместно.

Я обычно говорю:

• больший размер шрифта (font-size: 120%)
• жирный шрифт (font-weight: bold)
• отступ (более горизонтальный, чем вертикальный, например, padding: 4px 8px)

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

Если вы начнете менять какие-либо цвета, вам нужно будет установить не менее color, background-color и border.

Answer 7

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

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

Кроме того, вы можете добавить CSS, чтобы получить нужный визуальный эффект.

Answer 8

Задайте открытый вопрос, получите кучу правильных, но разных ответов ...

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

Вы можете использовать CSS для стилизации элемента, который вы используете для отправки. Идя по этому маршруту, вы можете использовать и стиль соответствующим образом, или вы можете использовать [lable here here] . Я предпочитаю последнее, так как его легче стилизовать, но это во многом личное предпочтение.

Лучший совет - осмотреться, а когда увидишь что-то вроде того, что хочешь, посмотри, как они это сделали.

Answer 9

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

«Картинка стоит тысячи слов!»