CSS 按钮式链接

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

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

1. a  {
2.     padding: 10px 18px;
3.     color: #fff;
4.     font-size: 14px;
5.     font-weight: bold;
6.     border-radius: 4px;
7.     background: #f74c4c;
8.     text-decoration: none;
9. }

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

图6-1 按钮式链接

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

1. a:hover,  a:focus {
2.     background: #f14b00;
3. }
4. a:active  {
5.     background: #f1004b;
6. }

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

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。