[HTML+CSS] a 태그를 이용하여 버튼 만들기

너무 궁금해 2024. 12. 29. 10:12

이미지를 이용하지 않고 css를 이용하여 버튼 이미지 효과를 낼 수 있습니다.

<a> 태그를 이용하여 버튼 이미지효과를 만들어 보겠습니다.

※ 먼저 a 태그를 이용하여 링크를 만들었습니다.

<body>
  <a href="https://google.com">구글홈페이지로 이동하기</a>
</body>

>>> 결과 <<<

HTML의 <a> 태그는 브라우저마다 기본적으로 설정된 유형별 CSS 스타일을 가지고 있어요.

이를 유저 에이전트 스타일시트(User Agent Stylesheet)라고 부릅니다. 아래는 대부분의 브라우저에서 <a> 태그에 기본적으로 적용되는 CSS 속성이에요.

a {
  color: blue; /* 텍스트 색상: 파란색 */
  text-decoration: underline; /* 밑줄 */
  cursor: pointer; /* 마우스 포인터가 손가락 모양으로 변함 */
}

우리가 어떤 css속성을 설정하지 않았지만, <a>를 사용하면 파란색에 밑줄이 표시됩니다.

※ 상태별 기본 스타일

<a> 태그는 기본적으로 링크 상태에 따라 스타일이 다르게 적용됩니다.

1. 기본 상태 ( :link)

아직 클릭하지 않은 링크

a:link {
  color: blue;
}

2. 방문한 링크 (:visited)

이미 방문한 링크.

a:hover {
  text-decoration: underline;
}

3. 호버 상태 (:hover)

마우스를 링크 위에 올릴 때.

a:hover {
  text-decoration: underline;
}

4. 활성 상태 (:active)

링크를 클릭 중인 순간.

a:active {
  color: red; /* 빨간색 */
}

※ 기본 스타일 예제

<body>
  <a href="#">기본 링크</a>
  <a href="#" style="color: green;">스타일 덮어쓰기</a>
</body>

>>> 결과 <<<

첫 번째 링크는 파란색과 밑줄이 적용된 상태로 보입니다.
두 번째 링크는 color: green으로 기본 색상이 덮어씌워집니다.

※ 브라우저 기본 스타일 제거하기

<a> 태그의 기본 스타일을 없애려면, 아래처럼 CSS를 작성할 수 있어요

a {
  color: inherit; /* 부모 요소의 텍스트 색상 상속 */
  text-decoration: none; /* 밑줄 제거 */
  cursor: auto; /* 포인터 모양 변경 */
}

>>> 결과 <<<

※ 버튼 스타일 만들기

css속성을 주면 버튼처럼 만들 수 있어요

a {
  display: inline-block; /* 링크를 인라인 블록으로 설정하여 크기와 여백을 설정 가능하게 함 */
  padding: 10px 20px; /* 내부 여백: 위아래 10px, 좌우 20px */
  background-color: #007BFF; /* 배경색을 파란색 계열로 설정 */
  color: white; /* 텍스트 색상을 흰색으로 설정 */
  text-decoration: none; /* 링크의 밑줄을 제거 */
  border-radius: 5px; /* 버튼의 모서리를 둥글게 설정 (5px 반지름) */
  transition: background-color 0.3s; /* 배경색 변경에 0.3초의 전환 효과를 추가 */
}

a:hover {
  background-color: #0056b3; /* 마우스를 올렸을 때 배경색을 더 어두운 파란색으로 변경 */
}

>>> 결과 <<<

둥글고 입체감 있는 버튼도 만들 수 있어요

    a {
      display: inline-block; /* 버튼 크기 지정 가능 */
      padding: 12px 24px; /* 내부 여백: 위아래 12px, 좌우 24px */
      background-color: #28a745; /* 녹색 배경 */
      color: white; /* 흰색 텍스트 */
      text-decoration: none; /* 밑줄 제거 */
      border-radius: 50px; /* 둥근 버튼 모양 */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 입체감을 위한 그림자 */
      transition: transform 0.2s, box-shadow 0.2s; /* 클릭 시 애니메이션 효과 */
    }

    a:hover {
      background-color: #218838; /* 호버 시 더 진한 녹색 */
      box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* 호버 시 그림자 강조 */
    }

    a:active {
      transform: scale(0.95); /* 클릭 시 버튼이 살짝 작아짐 */
    }

>>> 결과 <<<

그라데이션 버튼도 만들 수 있어요

    a {
      display: inline-block; /* 버튼 크기 설정 */
      padding: 12px 24px; /* 내부 여백: 위아래 12px, 좌우 24px */
      background: linear-gradient(45deg, #ff6f61, #d84e2a); /* 45도 각도로 그라데이션 배경 */
      color: white; /* 흰색 텍스트 */
      text-decoration: none; /* 밑줄 제거 */
      border: none; /* 테두리 제거 */
      border-radius: 8px; /* 둥근 모서리 */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 입체감을 주는 그림자 */
      font-weight: bold; /* 굵은 글씨 */
      cursor: pointer; /* 마우스 포인터가 손 모양으로 변경 */
      transition: transform 0.2s, box-shadow 0.2s, background 0.3s; /* 클릭, 그림자 및 배경 변화에 애니메이션 추가 */
    }

    a:hover {
      background: linear-gradient(45deg, #d84e2a, #ff6f61); /* 호버 시 그라데이션 방향 반전 */
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* 호버 시 그림자 강조 */
    }

    a:active {
      transform: scale(0.98); /* 클릭 시 버튼이 살짝 작아짐 */
    }

>>> 결과 <<<