html - 强调html提交按钮的正确方法？

Question

如果您绝对必须为您的 html 按钮设置样式，那么强调其中一些按钮的正确方法是什么？例如，“添加到购物车”通常在视觉上强调以使其脱颖而出。

选项 1 - 在 em 或 strong + css 中包装提交

选项 2 - 类 + css

选项 3 - ?

score 6 · Accepted Answer

CSS是要走的路。例如，在 Facebook“Notes”应用程序中，“发布”按钮为深蓝色，其他按钮为灰色。这一切都是通过 CSS 类和 ID 完成的。

最终，如果您想对 CSS 提出第二意见，您应该只寻找您信任的网站。像Firebug这样的工具可以很容易地看到它们是如何做样式的。

score 2 · Accepted Answer

一个类可能是你最灵活的解决方案。如果你想做的不仅仅是粗体或斜体，那么无论如何你都必须使用某种类/id。

但是，如果您将此项目放在容器中，那么您可以使用该容器来选择您的按钮。

html

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

css

.foo input
{
 ...some styles
}

不过，将课程放在输入上是完全可以接受的。前一种方法仅适用于容器中已有按钮并且不想添加任何额外标记的情况。

score 1 · Accepted Answer

好吧，如果您想强调一个button，我想说最语义化的表示是将您的<button>标签（或<input type="submit">您正在使用的任何东西）包装在<em>标签中并在 CSS 中设置样式，例如：

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

（请记住，虽然斜体和粗体可能是大多数浏览器的默认视觉样式<em>，<strong>但这只是惯例。如果您不是“强烈”强调某些内容，<em>即使您希望它显示为粗体，也可以使用。）

score 1 · Accepted Answer

正确和语义的方式是

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

但是由于 IE 不支持多个元素，因此您必须使用 <input type="button"> -- 并将其包装在 em 中或其他东西中是不好的。

我非常喜欢

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

或者其他的东西..

score 1 · Accepted Answer

使用 CSS2+，您可以使用选项 3：仅 CSS

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

score 0 · Accepted Answer

我会使用图像按钮...没有任何重点可以与精心设计的图标的美感相提并论...

“一张图片胜过千言万语！”

score 0 · Accepted Answer

问一个开放的问题，得到一堆正确但不同的答案......

大多数人只是选择图像作为按钮，因为它绕过了很多浏览器问题。你知道它在每个浏览器上看起来都是一样的。

您可以使用 CSS 来设置您用来提交的元素的样式。走这条路，你可以使用 <input type="submit"> 和适当的样式，或者你可以使用 <button type="submit">[lable goes here]</button>。我更喜欢后者，因为它更容易设计，但这主要是个人喜好。

最好的建议是环顾四周，当你看到你想要的东西时，看看他们是如何做到的。

score 0 · Accepted Answer

很多网站都使用图片。一个问题可能是不一致 - 您必须制作所有按钮图像，否则它们都不会或有些看起来不合适。

我一般会选择：

由于平台变化很大，我不会改变颜色。对于大多数人来说，灰色文本可能看起来不错，但如果用户使用较暗的主题，那么按钮背景颜色可能会使文本不可读。

如果您开始更改任何颜色，您至少需要设置一个color,background-color和border.

score 0 · Accepted Answer

考虑此类问题的一个好方法是考虑您希望从听觉浏览器中获得什么。在这种情况下，如果您的页面正在被读出，您是否还希望通过与其他按钮不同的音调或音量来强调该按钮。如果是这样，您应该使用语义标记来表明这是重点，而不仅仅是表示。

<em> 确实应该用于强调单个单词以指示重音应该放在句子中的位置，因此除非您的按钮出现在句子中间，否则我宁愿将输入元素包装在 <strong> 而不是 <em >。

此外，您可以添加 CSS 以获得您想要的视觉效果。

9 回答 9