• 코드:
​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: #87CEEB;
10
            padding: 15px 30px;
11
            margin: 2px;
12
            border: none;
13
            color: black;
14
            text-align: center;
15
            text-decoration: none;
16
            font-size: 16px;
17
            display: inline-block;
18
            cursor: pointer;
19
            -webkit-transition-duration: 0.4s;
20
            transition-duration: 0.4s;
21
        }
22
        .btn1:hover, .btn2:hover, .btn3:hover, .btn4:hover {
23
            background-color: #4169E1;
24
            color: white;
25
        }
26
    </style>
27
</head>
28
​
29
<body>
30
​
31
    <h1>마우스 오버 버튼</h1>
32
    <button class="btn btn1">HTML</button>
33
    <button class="btn btn2">CSS</button>
34
    <button class="btn btn3">JQuery</button>
35
    <button class="btn btn4">PHP</button>
36
​
37
</body>
38
​
39
</html>