揭秘CSS(第 1 版)
6.1.2 按钮式链接
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

链接的样式

动态超链接

按钮式链接

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

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

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

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

按钮式链接
图6-1 按钮式链接

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

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

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

关于作者

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

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验