css图片当按钮 |css翻书特效

.btn {
display: inline-block;
background-image: url("button.png");
width: 100px;
height: 50px;
text-indent: -9999px;
border: none;
}
.btn:hover {
background-position: 0 -50px;
}

以上代码就是使用CSS图片来做按钮的例子。大家先给.btn设置了background-image属性，并指定为大家想要显示的图片。然后设置了按钮的宽度和高度，以及text-indent属性，将按钮中的文本缩小到看不见，因为大家要的是图片按钮，不需要文本。最后将边框设为none，消除按钮的默认边框。

接着大家给按钮设置了一个:hover伪类，当鼠标悬停在按钮上时触发。注意到大家改变的是background-position属性。这就是当鼠标悬停时图片发生了位移。通过这种方式，大家可以达到按钮动态效果的目的。

CSS图片按钮减少了代码量，还能实现丰富的动态效果，使用场景非常广泛。