ch5 创建类似按钮的链接

锚是行内元素，所以只有在单击链接的内容时它们才会激活，如果可以实现为按钮的效果，就可以有更大的可单击区域，实现方法为：display设置为block，修改width、height和其他属性，代码如下：

a{
  display:block;
  width:6.6em;
  line-height:1.4;//使用line-height来控制高度，而不是用height，能够使得按钮中的文本垂直居中
  text-align:center;
  text-decoration:none;
  border: 1px solid #66a300;
  background-color: #8cca12;
  color: #fff;
}

实现的结果如下，链接显示为块级元素，单击块中的任何地方都会激活链接：

简单的翻转

使用:hover、:focus等伪类即可以创建翻转效果

a :hover,a:focus{
    background-color: #f7a300;
    border-color: #ff7400;
}
a :active {
    background-color: #a7a7a7;
    border-color: #868686;
}

悬停或获得焦点时：

激活时：

图像翻转

修改背景图像对于简单的按钮很合适，但是对于复杂的按钮就要使用背景图像。

<a href="#" >Book Now &raquo;</a>
a :link,a:visited{
    display: block;
    width: 203px;
    height: 72px;
    text-indent: -1000em; //使用大的负文本缩进隐藏锚文本
    background: url(img/button.png) left top no-repeat;
}
a :hover, a:focus {
    background-image: url(img/button-over.png);
}
a :active {
    background-image: url(img/button-active.png);
}

                  正常状态

                   鼠标悬停状态

                    激活状态

这种应用多图像方法的缺点是：在浏览器第一次加载鼠标悬停的图像时有短暂的延迟，会造成闪烁现象，让人感觉按钮反应迟钝。

Pixy样式的翻转

解决上述问题的方法是：
1、将鼠标悬停的图像作为背景应用于父元素，从而预加载它们。
2、不切换多个背景图像，而是使用一个图像并切换它的背景位置，使用单个图像减少了服务器请求的数量，而且可以将所有按钮状态放在一个地方——Pixy方法，如下代码：

<a href="#" >Book Now &raquo;</a>
a{
    display: block;
    width: 203px;
    height: 72px;
    text-indent: -1000em;
    background: url(img/buttons.png) -203px 0 no-repeat;
}
a:hover {
    background-position: right top;
}
a:active {
    background-position: left top;
}

                                                              用一个图像表示这些按钮状态

实现的效果和上述一样。