需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：
button {width: 100pxheight: 50pxborder: 0color: whitebackground: -webkit-radial-gradient(#72787f, #545c64)}
3、浏览器运行index.html页面，此时用CSS实现了按钮中间白、四周黑，上方白、下方灰的效果。
主要思路是利用hover来进行功能实现，transition-duration:来实现过度动画；
css这样实现
html如下
.download-block{
width:90%
height:100px
background:#0b0e32
/*margin: 100px auto 0*/
margin:0 auto
position:absolute
left:0
right:0
transition-duration:2s
opacity:0.7
}
.download-block1{
background:transparent
height:100px
overflow:hidden
position:relative
left:0
top:-100px
right:0
padding-top:100px
transition-duration:2s
opacity:0.7
cursor:pointer
}
.download-block1:hover{
padding-top:0
transition-duration:2s
opacity:0.7
}
