网站提示：创建一个可重用的“按钮”级

网页充满了按钮。 导航，链接，“下一步”按钮，“提交”按钮，“确定”按钮，“关闭”按钮...这样的例子不胜枚举。 当你对设计一个新网页，很可能是它将会有很多的按钮。 让生活更容易为自己创建一个按钮类，你可以重复过去，在你的HTML超过当你需要一个按钮。

这不仅是对你的忙，但它为您的用户和美学好方法。 一致性是在可用性的关键因素。 让我们开始吧。

梯度的背景按钮

保持事情简单化这里是关键。 我们一定要保持我们的按钮的文本。 这是一个必须为可访问性，可用性和可扩展性。 方法之一，我们能够做到这一点，但仍使我们的按钮看起来不错，并视不同的是给他们一个很好的渐变背景。

这渐变背景将重复水平 ，使按钮可长期或短期，因为我们需要他们，而不是由该图形的尺寸限制。 让我们在Photoshop中创建梯度。 创建75px高一新文件20px宽。 这可作为图形薄1px，因为它只是要重复水平，但我们会离开20px它使我们可以看到我们在做什么。 文件大小的差别可以忽略无论如何。

填充任何颜色的文件。 这并不重要，我们将覆盖层的风格与它无论如何。 它填补不过对于层样式有所将于顶部。

现在，双击，在图层调板层（窗口“>层），弹出图层样式。 点击渐变叠加样式。 默认情况下，你应该有一个直上，上下梯度白黑色。 这是好事，在渐变预览一下，改变的东西更适合您的设计的按钮样式颜色。 在这种情况下，一些不错的饱和红会：

保存你的文件（奇怪的是，巴布亚新几内亚- 24往往是最好的这样的图像预设。最高质量，最低的文件大小）。 使用类似“按钮bg.png，”聪明的命名约定。 请确保您保存您的私营部门为此，谁知道什么时候你可能想跳回去把改变颜色，渐变的，或任何其他微妙的细节定位。

为按钮的CSS

现在，我们需要建立我们的通用按钮类，利用这种新的背景一些CSS。 我们将使用一类“。按钮”。 简单，显而易见，和通用。 这就是智能代码。 我们不想做任何具体的如“＃导航用＃mainContent李a.button”，因为这整个的一点是，类是通用的网页的任何地方reseable。

这里是我会成立这个类：

.button { background: url(images/button-bg.png) repeat-x top center #650606; border: 1px solid white; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 5px 8px; color: white; font-weight: bold; font-size: 12px; text-align: center; } .button:hover { background: white; border: 1px solid red; color: black; } 

哇那是一个一个的CSS声明嗯一口位？ 它的每一点最重要的还是。 让我们重温每个属性。

• 背景 ：这是我们应用我们创建梯度图像。 请注意，“顶”设置，保持它垂直对齐按钮的顶部和重复的图像水平与“重复- X”的。 也注意到有一个十六进制代码宣布为背景色。 此值设置为作为最底层梯度图像相同的颜色。 以防万一此按钮增长身高比图像，颜色将是很好的继续。
• 边界 ：单像素白边的征收。 如果我们的按钮在白色的，这将无形的，但因为我想使用悬停状态的彩色边界，经常国家将需要一个边界了。 否则，将有轻微的“跳就徘徊”，这是不可取的。 接下来的两个样式的轮按钮的角落。 首先是针对基于Mozilla的浏览器（Firefox，羊群...），第二个是针对Webkit浏览的浏览器（Safari浏览器，Konqueror的...）。 （IE）的其他浏览器将无法看到圆角，但没有伤害任何犯规。
• 填充 ：这是至关重要的，以防止按钮的边缘文本了。 给人的按钮一些机构。 使更多的按钮式的，更容易点击。
• 色彩 ：我们的背景是暗红色的颜色，所以使文本显示，白色是好的。 以防万一图像浏览器打开过，我们的按钮，背景仍然是暗红色的，因为我们在设置按钮一样，所以这里的白色是完全安全。
• Font-size/weight/text-align：几乎言自明这里。 一般情况下我可能没有在酶值大小的文本，但在一个按钮时，使，明年不调整，能够在IE 6，可能是理想的一致性。
• 悬停 ：这就是必须使我们的按钮，却觉得自己的按钮。 按钮做一些事情时，翻车。 我们会立即切换到一个黑色文本和红边白色背景。 很明显的，很明显一个按钮。

在代码中使用我们的按钮

因为我们班是如此通用的，我们可以用它在任何地方！

定期醇'超链接：

 <a href="/home" class="button">Go Back Home</a> 

很长的链接：

 <a href="/contact" class="button">Visit The General Contact Form Page</a> 

提交按钮：

 <input type="submit" class="button">Submit</input>