• 코드:
​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
            border: solid 1px #00BFFF;
12
            color: black;
13
            text-align: center;
14
            text-decoration: none;
15
            font-size: 16px;
16
            display: inline-block;
17
            cursor: pointer;
18
            float: left;
19
        }
20
        .btn1:hover, .btn2:hover, .btn3:hover, .btn4:hover {
21
            background-color: #4169E1;
22
            color: white;
23
        }
24
    </style>
25
</head>
26
​
27
<body>
28
​
29
    <h1>버튼 메뉴</h1>
30
    <button class="btn btn1">메뉴 1</button>
31
    <button class="btn btn2">메뉴 2</button>
32
    <button class="btn btn3">메뉴 3</button>
33
    <button class="btn btn4">메뉴 4</button>
34
​
35
</body>
36
​
37
</html>