소스 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<html>
    <head>
        <style>
            .btn1{
                background-color: #FF5A5F;
                border: 0;
                color: white;
                cursor: pointer;
                font-size: 15px;
                font-weight: 700;
                border-radius: 6px;
                outline: 0;
                height: 45px;
                width: 70px;
                box-shadow: 0 2px 2px 0 black;
                opacity: 0.7;
            }
            .btn1:hover{
                opacity: 1;
            }
            .btn_google{
                background-color: white;
                width: 400px;
                height: 45px;
                font-size: 15px;
                font-weight: 700;
                border-radius: 6px;
                cursor: pointer;
            }
            .btn2{
                height: 20px;
                width: 260px;
            }
        </style>
    </head>
    <body>
        <h1>버튼</h1>
        <hr/>
        <button class="btn1">검색</button>
        <h1>구글 버튼</h1>
        <hr/>
        <button class="btn_google">
            <!-- 구글 로고 svg를 검색해서 복붙 했음 -->
        <svg viewBox="0 0 533.5 544.3" style="width: 18px; height: 18px; " xmlns="http://www.w3.org/2000/svg">
            <path d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z" fill="#4285f4"/>
            <path d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z" fill="#34a853"/>
            <path d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z" fill="#fbbc04"/>
            <path d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z" fill="#ea4335"/>
        </svg>
        구글 계정으로 로그인
        </button>        
        <h1>인풋태그</h1>
        <hr/>
        <input class="btn2" type="text" placeholder="🔍 Search...">
        <!-- 이모지에서 돋보기를 이용 했음 -->
    </body>
</html>
cs



저작자표시

'국비지원 Spring프레임워크 > HTML' 카테고리의 다른 글

position: relative, absolute, fixed  (0) 2020.11.04
레이아웃 FLEX  (0) 2020.11.03
div로 컨텐츠 위치 조정하기  (0) 2020.11.03
SVG 이미지  (0) 2020.11.03
Form 태그  (0) 2020.11.03

+ Recent posts

티스토리툴바