需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：button {background-color: #00a7d0}
button:hover {background-color: #ff7701}。
3、浏览器运行index.html页面，此时显示出了蓝色背景颜色的按钮。
4、将鼠标移入按钮，此时按钮的背景颜色变成了橙色。
如果你只想用css来实现这个效果的话，那你只能用<a></a>标签了，利用它的hover属性来做这种效果；举个例子；
<div class="btn"><a>按钮</a></div>
.btn a{background:url(图片1路径) no-repeatwidth:图片宽度height:图片高度}
.btn a:hover{background:url(图片2路径) no-repeatwidth:图片宽度height:图片高度}
又或者你也可以用JS来做，先做两个类，一个放正常的图片另一个放下陷的图片，然后使用onmousedown来调用这两个类
