폰트어썸

image.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <link
      rel="stylesheet"
      href="<https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css>"
      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <style>
      .red_btn {
        background-color: #ff5a5f;
        color: white;
        width: 80px;
        height: 45px;
        border: 0px;
        border-radius: 5px;
        font-size: 15px;
        font-weight: 700;
      }

      .red_shadow {
        box-shadow: 3px 3px 0px 0px rgb(107, 82, 82);
      }

      .red_outline_btn {
        background-color: white;
        color: black;
        width: 80px;
        height: 45px;
        border: 1px solid black;
        border-radius: 5px;
        font-size: 15px;
        font-weight: 700;
      }
      .outline_btn {
        height: 30px;
        border-radius: 5px;
      }
      .google_outline_btn {
        background-color: white;
        color: black;
        width: 300px;
        height: 45px;
        border: 1px solid black;
        border-radius: 5px;
        font-size: 15px;
        font-weight: 700;
      }
    </style>
  </head>
  <body>
    <h1>상세 디자인 (버튼, 인풋태그)</h1>
    <hr />
    <button class="red_btn">검색</button>
    <button class="red_btn red_shadow">로그인</button>
    <button class="red_outline_btn">회원가입</button>
    <hr />
    <input class="outline_btn" type="text" placeholder="🔎 Search..." />
    <hr />
    <button class="google_outline_btn">
      <i class="fa-brands fa-google"></i> 구글 계정으로 로그인
    </button>

    <i class="fa-brands fa-youtube"></i>
  </body>
</html>