[HTML/CSS] 8. Input Design

Mar 10, 2025

✏️

다양한 버튼 만들기

Button Style 활용


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn-red {
            background-color: #FF5A5F;
        }

        .btn-green {
            background-color: #008000;
        }

        .btn {
            border: none;
            color: white;
            width: 70px;
            height: 45px;
            font-weight: 700;
            border-radius: 6px;
        }

        .btn-elevated {
            box-shadow: 3px 3px 2px 1px rgb(0, 0, 0, 0.2);
        }

        .btn-google {
            background-color: white;
            width: 400px;
            height: 45px;
            font-size: 15px;
            font-weight: 700;
            border-radius: 6px;
            border: 1px solid black;
            cursor: pointer;
        }

        input {
            height: 40px;
            width: 300px;
            border-radius: 6px;
            border: 1px solid black;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <h3>빨간색 버튼</h3>
    <button class="btn btn-red">검색</button>
    <h3>플로팅 버튼</h3>
    <button class="btn btn-red btn-elevated">버튼</button>
    <h3>초록 플로팅 버튼</h3>
    <button class="btn btn-green btn-elevated">초록 버튼</button>
    <h3>구글 버튼</h3>
    <button class="btn-google">
        <svg viewBox="0 0 18 18" role="presentation" aria-hidden="true" focusable="false"
            style="height: 18px; width: 18px; display: inline-block;">
            <g fill="none" fill-rule="evenodd">
                <path
                    d="M9 3.48c1.69 0 2.83.73 3.48 1.34l2.54-2.48C13.46.89 11.43 0 9 0 5.48 0 2.44 2.02.96 4.96l2.91 2.26C4.6 5.05 6.62 3.48 9 3.48z"
                    fill="#EA4335"></path>
                <path
                    d="M17.64 9.2c0-.74-.06-1.28-.19-1.84H9v3.34h4.96c-.1.83-.64 2.08-1.84 2.92l2.84 2.2c1.7-1.57 2.68-3.88 2.68-6.62z"
                    fill="#4285F4"></path>
                <path
                    d="M3.88 10.78A5.54 5.54 0 0 1 3.58 9c0-.62.11-1.22.29-1.78L.96 4.96A9.008 9.008 0 0 0 0 9c0 1.45.35 2.82.96 4.04l2.92-2.26z"
                    fill="#FBBC05"></path>
                <path
                    d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.84-2.2c-.76.53-1.78.9-3.12.9-2.38 0-4.4-1.57-5.12-3.74L.97 13.04C2.45 15.98 5.48 18 9 18z"
                    fill="#34A853"></path>
                <path d="M0 0h18v18H0V0z"></path>
            </g>
        </svg>
        &nbsp;구글 계정으로 로그인</button>
    <h3>이모지 Input</h3>
    <input type="text" placeholder=" 🔍 Search...">


</body>

</html>