<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*,
*:before,
*:after{
box-sizing: border-box
}
body{
margin: 0;
padding: 30px;
background: #f8f8f8;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.grid{
max-width: 400px;
margin: 0 auto;
display: grid;
grid-template-columns: 150px 150px 50px;
align-items: center;
justify-content: center;
grid-gap: 40px 25px;
}
button{
-webkit-appearance: none;
user-select: none;
display: flex;
align-items: center;
justify-content: center;
outline: none;
cursor: pointer;
width: 150px;
height: 50px;
background-image: linear-gradient(to top, #D8D9DB 0%, #fff 80%, #FDFDFD 100%);
border-radius: 30px;
border: 1px solid #8F9092;
box-shadow: 0 4px 3px 1px #FCFCFC,
0 6px 8px #D6D7D9,
0 -4px 4px #CECFD1,
0 -6px 4px #FEFEFE,
inset 0 0 3px 0 #CECFD1;
transition: all .2s ease;
font-family: "Source Sans Pro", sans-serif;
font-size: 14px;
font-weight: 600;
color: #606060;
text-shadow: 0 1px #fff;
}
button:hover{
box-shadow: 4px 3px 1px #FCFCFC,
0 6px 8px #D6D7D9,
0 -4px 4px #CECFD1,
0 -6px 4px #FEFEFE,
inset 0 0 3px 3px #CECFD1;
}
button:focus{
animation: active .9s alternate infinite;
outline: none;
}
button:active{
box-shadow: 4px 3px 1px #FCFCFC,
0 6px 8px #D6D7D9,
0 -4px 4px #CECFD1,
0 -6px 4px #FEFEFE,
inset 0 0 5px 3px #999,
inset 0 0 30px #aaa;
}
</style>
</head>
<body>
<div class="grid">
<button>点我一下</button>
</div>
</body>
</html>
Related links: [css] box-shadow