雪碧图制作的按钮小流程

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮</title>
<style type="text/css">
.btn:link{
    display: block;
    width: 93px;
    height: 29px; 
    background-image:url(img/btn.png);
    background-repeat:no-repeat; 
    }
.btn:hover{
    background-position: -93px 0px; 
}
.btn:active{
    background-position: -188px 0px;
}
.btn1{
    display: block;
    width: 40px;
    height: 30px;
    background-image: url(img/amazon1.png);
    background-repeat:no-repeat;
    background-position: -10px -340px; 
}
.btn1:hover{
    background-position: -56px -340px;
}
.btn1:active{
    background-position: -130px -340px;
}
</style>
 </head>
 <body>
<a class='btn' href="#"></a>
<a class='btn1' href="#"></a>
 </body>
 </html>

效果图如下：
正常浏览


(AQI~1JHTJE{{}KBJU`S$%R.png

鼠标经过时


Y$0Q(SB558KK37C6LYZFTXI.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容