.btn { display: inline-block; background: url("button.png") no-repeat; width: 100px; height: 50px; cursor: pointer; } .btn:hover { background-position: 0 -50px; }
上面的代码中使用了一个名为”btn”的CSS类来定义按钮的样式,其中”background”属性表示按钮的背景图片,”width”和”height”属性指定了按钮的宽度和高度,”cursor”属性则标识鼠标在按钮上时的样式,这里设置为”pointer”表示手形光标。
在按钮被悬停时,”hover”伪类将为其定义一个新的背景位置以提供反馈。这里将背景位置向上偏移50个像素,以显示按钮被悬停时的样式。
通过以上几段简单的CSS代码,大家就能够制作出一个基本的点击图片按钮了。当然,大家还可以添加更多的样式和效果来让按钮看起来更具吸引力和交互性,比如添加渐变背景色、阴影效果、文本等。