雪碧图制作的按钮小流程
2018-09-11 本文已影响0人
田小田txt
<!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
