웹 페이지에서 일반 텍스트 링크보다 눈에 잘 띄는 버튼 형태의 링크를 만들고 싶다면 CSS만으로 간단하게 구현할 수 있습니다. 이 글에서는 <a> 태그에 배경색, 테두리(border), 패딩(padding) 등을 적용해 마치 진짜 버튼처럼 보이는 링크 버튼을 만드는 방법을 소개합니다.
CSS 링크 버튼의 핵심 원리
링크를 버튼처럼 보이게 하려면 다음 속성들을 조합하면 됩니다.
- border: 버튼의 외곽선을 그려 테두리가 있는 모양을 만듭니다.
- padding: 텍스트 주변에 여백을 주어 버튼 크기를 키웁니다.
- display: inline-block: 인라인 요소인 링크에 패딩과 너비가 제대로 적용되도록 합니다.
- :hover / :active: 마우스를 올리거나 클릭했을 때 색상이 변하는 인터랙션을 추가합니다.
테두리가 있는 링크 버튼 예제 코드
아래 코드를 실행하면 흰색 배경에 파란색 테두리가 있는 버튼 스타일의 링크가 생성되며, 마우스를 올리면 빨간색 배경으로 바뀌는 효과를 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: white;
color: black;
border: 1px solid blue;
padding: 30px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
color: white;
}
</style>
</head>
<body>
<a href = "demo.html" target = "_blank">Demo Link</a>
</body>
</html>코드 상세 설명
1. 기본 상태 스타일 (a:link, a:visited)
background-color: white;— 버튼의 기본 배경을 흰색으로 지정합니다.color: black;— 링크 텍스트 색상을 검정으로 설정합니다.border: 1px solid blue;— 두께 1px의 파란색 실선 테두리를 추가합니다.padding: 30px 30px;— 위아래, 좌우 모두 30px의 여백을 주어 버튼 영역을 넉넉하게 만듭니다.text-decoration: none;— 링크에 기본적으로 적용되는 밑줄을 제거합니다.display: inline-block;— 패딩과 정렬이 정확히 적용되도록 디스플레이 유형을 변경합니다.
2. 마우스 오버 및 클릭 상태 (a:hover, a:active)
a:hover— 사용자가 마우스 포인터를 버튼 위에 올리면 배경이 빨간색으로, 글자색은 흰색으로 변경됩니다.a:active— 버튼을 클릭하고 있는 동안에도 동일한 강조 스타일이 유지됩니다.
응용 팁
테두리를 둥글게 만들고 싶다면 border-radius 속성을 추가하세요. 예를 들어 border-radius: 8px;를 넣으면 부드러운 둥근 버튼이 됩니다. 또한 transition: background-color 0.3s;를 추가하면 색상이 자연스럽게 변하는 애니메이션 효과도 쉽게 구현할 수 있습니다.