<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮</title>
<style>
#div1{width:200px;height:50px;line-height:50px;text-align:center;
border:1px solid #000;font-size: 30px;border-radius:10px;
box-shadow: inset 0 0 10px green,0 10px #000;
transition:0.3s all ease;
position: relative;left:0;top: 0;
}
#div1:hover{box-shadow:inset 0 0 20px green,0 10px #000;}
#div1:active{box-shadow:inset 0 0 20px green,0 0 #000;top: 10px;}
</style>
</head>
<body>
<div id="div1">按钮</div>
</body>
</html>
