• 코드:
​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
            position: relative;
11
            height: 70px;
12
            width: 150px;
13
            padding: 15px 30px;
14
            margin: 10px;
15
            border: none;
16
            text-align: center;
17
            text-decoration: none;
18
            font-size: 22px;
19
            cursor: pointer;
20
            overflow: hidden;
21
            -webkit-transition-duration: 0.4s;
22
            transition-duration: 0.4s;
23
        }
24
        .btn::after {
25
            content: "";
26
            background-color: #FFD700;
27
            display: block;
28
            position: absolute;
29
            top: 70px;
30
            left: 0;
31
            padding-top: 200%;
32
            padding-left: 300%;
33
            margin-left: 0;
34
            margin-top: -120%;
35
            opacity: 0;
36
            transition: all 0.8s;
37
        }
38
        .btn:active::after {
39
            padding: 0px;
40
            margin: 0px;
41
            opacity: 1;
42
            transition: 0s
43
        }
44
    </style>
45
</head>
46
​
47
<body>
48
​
49
    <h1>애니메이션 버튼</h1>
50
    <button class="btn">버튼</button>
51
​
52
</body>
53
​
54
</html>