<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D按钮DEMO演示</title>
<style type="text/css">
/* start da css for da buttons */
.btn {
border-radius: 5px;
padding: 15px 25px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: relative;
display: inline-block;
}
.btn:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 1px 0px 0px;
}
.blue {
background-color: #55acee;
box-shadow: 0px 5px 0px 0px #3C93D5;
}
.blue:hover {
background-color: #6FC6FF;
}
</style>
</head>
<body>
<!-- start the realm of the buttons -->
<a href="#" class="btn blue">Button</a>
</body>
</html>
https://www.html5tricks.com/