在这里为大家带来一个简单的有按下效果动画的按钮，不用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>
扫一扫
450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
