本文介绍了如何使用CSS为按钮创建基础样式，并在鼠标悬停时实现颜色、背景和阴影的动态变化，通过`hover`伪类和过渡效果实现视觉反馈。
使用css制作按钮的变化
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.child{
border: 1px red solid;
width: 500px;
height: 250px;
border-radius: 100px;
margin-left: 25%;
margin-top: 15%;
background-image: linear-gradient(to left,#e66465, #9198e5);
font-size: 20%;
line-height: 250px;
font-size: 100px;
text-align: center;
color: #9198e5;
}
.child:hover{
color:papayawhip;
background-image: radial-gradient(#e66465, #9198e5);
box-shadow: 5px 5px 500px #9198e5,
5px -5px 500px #e66465,
-5px 5px 500px #9198e5,
-5px -5px 500px #e66465;
transition:2s;
}
</style>
</head>
<body>
<div class="child">按钮</div>
</body>
</html>效果：
变换前：
变换后：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
