• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS3 Buttons</title>
7
    <style>
8
        .btn {
9
            background-color: orange;
10
            display: inline-block;
11
            height: 70px;
12
            width: 150px;
13
            padding: 15px 30px;
14
            margin: 10px;
15
            border: none;
16
            outline: none;
17
            border-radius: 20px;
18
            text-align: center;
19
            text-decoration: none;
20
            font-size: 22px;
21
            cursor: pointer;
22
            box-shadow: 0 9px #B0B0B0;
23
        }
24
        .btn:hover { background-color: #FF8C00; }
25
        .btn:active {
26
            background-color: #FF8C00;
27
            box-shadow: 0 5px #808080;
28
            transform: translateY(4px);
29
        }
30
    </style>
31
</head>
32
​
33
<body>
34
​
35
    <h1>애니메이션 버튼</h1>
36
    <button class="btn">버튼</button>
37
​
38
</body>
39
​
40
</html>