锚是行内元素，所以只有在单击链接的内容时它们才会激活，如果可以实现为按钮的效果，就可以有更大的可单击区域，实现方法为：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 »</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 »</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;
}
用一个图像表示这些按钮状态
实现的效果和上述一样。
