html 간단한 코드관련 질의드립니다.

Question

개인 홈페이지를 독학으로 만들고있는 사용자입니다.

버튼을 만들어주는 사이트가 있길래, 코드를 부여를 받았고

그걸 CSS페이지에 넣고 저장을 하였는데요 (제일 아래 코드)

<div class="myButton"><a href="연결사이트" class="myButton">안녕하세요</a></div>

이렇게 버튼코드를 생성해 이용코자하였는데

이런 결과값이 나왔습니다. 문제가 무엇인지 html 전문가님들의 조언부탁드립니다.

<a href="#" class="myButton">blue</a> .myButton { box-shadow:inset 0px 0px 0px 0px #97c4fe; background:linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%); background-color:#3d94f6; border-radius:20px; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:18px; font-weight:bold; padding:32px 76px; text-decoration:none; text-shadow:1px 3px 6px #1570cd; } .myButton:hover { background:linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%); background-color:#1e62d0; } .myButton:active { position:relative; top:1px; }

Answer 1

안녕하세요. 꾸준한하마55입니다.

소스코드 파일 다운로드 : https://github.com/sigmak/exercise4_01/tree/2021-12-04-css-buttonTest

css 버튼 클래스 이므로 div 보다는 a 태그에만 적용하는게 더 나을거 같아서 그렇게 적용해봤습니다.

1.소스코드

2.웹브라우저(파이어폭스)에서 결과 확인