©TCP-tryWWW

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS3 Buttons</title>
	<style>
		.btn {
			background-color: #87CEEB;
			padding: 15px 30px;
			margin: 10px;
			border: none;
			color: black;
			text-align: center;
			text-decoration: none;
			font-size: 16px;
			display: inline-block;
			cursor: pointer;
			-webkit-transition-duration: 0.4s;
			transition-duration: 0.4s;
		}
		.btn1, .btn2:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); }
	</style>
</head>

<body>

	<h1>그림자 효과 버튼</h1>
	<button class="btn btn1">그림자 효과 버튼</button>
	<button class="btn btn2">마우스를 올려 보세요!</button>

</body>

</html>