6.1.2 按钮式链接

在任何浏览器下，默认的链接都太过平淡，不能满足大多数人的需求。尤其是希望有特大点击区域的链接，比如制作主导航链接、手风琴菜单、按钮等链接时，默认的链接更是无能为力，而按钮式链接便可担此重任。

链接默认是行内元素，只能通过链接文本来激活链接。要想让链接像按钮一样，较大的点击区域，其实很简单。只需为链接添加合适的内边距，并设置类似按钮的背景和边框即可。

a  {
    padding: 10px 18px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    background: #f74c4c;
    text-decoration: none;
}

运行结果如图 6‑1 所示：

为了提高页面的可访问性，跟普通超链接一样，也要为按钮式链接定义其他两个状态下的样式，一个是鼠标悬停和获取焦点的状态，一个是激活状态。

a:hover,  a:focus {
    background: #f14b00;
}
a:active  {
    background: #f1004b;
}

对于简单的按钮，修改背景颜色就很合适，但对于比较复杂的按钮，可能需要使用背景图像。一般需要 3 个图像，一个用于默认状态，一个用于鼠标悬停和获取焦点的状态，一个用于激活状态。然后，为不同的状态应用不同的背景，就可以让不同状态下的链接，具有不同的风格。