html开发中CSS按钮式链接解析

按钮式链接

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

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

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;

}