按钮式链接
在任何浏览器下, 默认的链接都太过平淡, 不能满足大多数人的需求尤其是希望有特大点击区域的链接, 比如制作主导航链接手风琴菜单按钮等链接时, 默认的链接更是无能为力, 而按钮式链接便可担此重任
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;
- }
来源: https://www.2cto.com/kf/201802/722443.html