CSS3制作简单动画按钮
在这里为大家带来一个简单的有按下效果动画的按钮，不用button标签，而用a标签，因为可以利用a标签做按钮可以通过a标签的active为按钮设置更多属性，增加外观美观，代码量很少，大家可以根据这种方法制作出更加炫酷的按钮。
先附上效果图：
源码附上：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>按钮</title>
<style>
body{
text-align: center;
background: #ccc;
}
.btn1{
text-decoration: none;
display: inline-block;
border-radius: 15px;
/* 按钮阴影效果 */
box-shadow: 0 8px 0 #1AC9FF,0 15px 30px #ccc;
color: white;
margin-top: 200px;
}
span{
font-size: 25px;
display: block;
/* 利用内边距来设置按钮的大小 */
padding: 10px 40px;
background-color:#60D9FF;
/* 边框圆角 */
border-radius: 12px;
/* 按钮颜色线性渐变 */
background-image: linear-gradient(to top,#64DAFF,#37D0FF);
transition: 0.1s;
}
/* 偏移值 */
.btn1:active span{
transform: translate(0,8px);
}
</style>
</head>
<body>
<a href="" class="btn1">
<span>按钮</span>
</a>
</body>
</html>