Question

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

选项1 - 在em或strong + css

中换行提交

选项2 - class + css

选项3 - ？

Answer 1

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

最终，如果你想对CSS有第二意见，你应该只找一个你信任的网站。像Firebug这样的工具可以让您轻松查看他们的样式。

Answer 2

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

如果你在容器中有这个项目，那么你可以使用该容器来选择你的按钮。

<强> HTML

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

<强> CSS

.foo input
{
 ...some styles
}

将课程放在输入上是完全可以接受的。前面的方法只有在容器中已有按钮并且您不想添加任何额外标记时才会显示。

Answer 3

好吧，如果你想强调一个按钮，我会说最大的语义表示是包装你的<button>标签（或{在<input type="submit">标记中{1}}或其他任何内容）并在CSS中设置样式，例如：

<em>

（请记住，虽然斜体和粗体可能是大多数浏览器中em button { color: blue; font-style: normal; font-weight: bold; }和<em>的默认视觉样式，但这只是惯例。如果您没有“强烈”强调某些内容，请使用<strong>，即使您希望它显示为粗体。）

Answer 4

正确和语义的方式是

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

但由于IE不支持多个元素，因此必须使用＆lt; input type =“button”＆gt; - 将它包装在em或者其他东西中是不好的。

我非常喜欢

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

或者什么..

Answer 5

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

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

更多信息：http://www.w3.org/TR/CSS2/selector.html

Answer 6

我会使用一个图像按钮...没有强调可以匹配精心设计的图标的美丽......

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

Answer 7

提出一个悬而未决的问题，得到一堆正确但不同的答案......

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

您可以使用CSS来设置用于提交的元素的样式。走这条路线，你可以使用＆lt; input type =“submit”＆gt;和风格相应，或者你可以使用＆lt; button type =“submit”＆gt; [lable goes here]＆lt; / button＆gt;。我更喜欢后者，因为它更容易风格，但这主要是个人偏好。

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

Answer 8

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

＆LT; EM＆GT;应该用来强调单个单词以指示压力应放在句子中的位置，所以除非你的按钮出现在句子的中间，我宁愿将输入元素包装在＆lt; strong＆gt;中而不是＆lt; em＆gt;。

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

Answer 9

许多网站都使用图片。一个问题可能是不一致 - 你必须制作所有按钮图像，或者没有一个或一些按钮看起来不合适。

我一般都会去：

字体较大（font-size: 120%）
粗体文字（font-weight: bold）
填充（水平比垂直更高，例如padding: 4px 8px）

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

如果您开始更改任何颜色，则需要至少设置color，background-color和border。

正确的方法来强调HTML提交按钮？

9 个答案: