CSS/PUSHボタン

#btn01 {
	margin: 50px 0px 20px 70px;
	display: inline-block;
	padding: 30px 30px;
	position: relative;
	background-color: #f7d034;
	border-radius: 4px;
	color: #444;
	transition: 0.1s;
	box-shadow: 4px 4px 4px #f7ba59;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
	display: inline-block;
	cursor: pointer;
}
#btn01:active {
	top: 3px;
	left: 2px;
	box-shadow: 2px 2px 2px #f7ba59;
	transition: 0.1s;
}

#btn02 {
	margin: 50px 0px 20px 70px;
	display: inline-block;
	padding: 30px 30px;
	position: relative;
	background-color: navy;
	border-radius: 4px;
	color: #fff;
	transition: 0.1s;
	box-shadow: 0px 6px 0px #aaa;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
	display: inline-block;
	cursor: pointer;
}
#btn02:active {
	top: 5px;
	box-shadow: 0 0;
	transition: 0.1s;
}

#btn03 {
	margin: 50px 0px 20px 70px;
	display: inline-block;
	padding: 30px 30px;
	position: relative;
	background-color: #fa39da;
	border-radius: 4px;
	color: #fff;
	transition: 0.1s;
	box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
		inset -4px -4px 4px rgba(0, 0, 0, 0.4),
		4px 4px 8px rgba(0, 0, 0, 0.6);
	text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
	display: inline-block;
	cursor: pointer;
}
#btn03:active {
	box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.4),
		inset 0.5px 0.5px 4px rgba(0, 0, 0, 0.8),
		1px 1px 1px rgba(0, 0, 0, 0.6);
	transform: translateY(4px);
}