使用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>
效果:
变换前:
变换后: