웹 페이지에서 버튼은 사용자와 상호작용하는 핵심 요소입니다. 배경색 없이 텍스트만으로 구성된 텍스트 버튼(Text Button)은 깔끔하고 모던한 UI를 만들 때 자주 활용됩니다. 이 글에서는 CSS만을 사용하여 텍스트 버튼의 색상, 호버(hover) 효과, 둥근 모서리 등을 지정하는 방법을 예제와 함께 살펴보겠습니다.
텍스트 버튼 스타일링의 핵심 포인트
텍스트 버튼을 만들 때는 일반적으로 다음과 같은 속성들을 활용합니다.
- border: none; — 기본 버튼 테두리를 제거하여 심플한 느낌을 줍니다.
- color — 버튼 종류(Success, Info, Warning, Danger 등)에 맞는 텍스트 색상을 지정합니다.
- :hover — 마우스를 올렸을 때 배경색이 변하도록 하여 인터랙션 피드백을 제공합니다.
- border-radius — 모서리를 둥글게 처리해 부드러운 디자인을 완성합니다.
예제 코드
다음은 CSS로 텍스트 버튼의 스타일을 지정하는 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
button {
border: none;
color: white;
font-weight: bolder;
padding: 20px;
font-size: 18px;
cursor: pointer;
border-radius: 6px;
}
.Success {
color: #4caf50;
}
.Success:hover {
background: #e7e7e7;
}
.Info {
color: #2196f3;
}
.Info:hover {
background: #e7e7e7;
}
.Warning {
color: #ff9800;
}
.Warning:hover {
background: #e7e7e7;
}
.Danger {
color: #f44336;
}
.Danger:hover {
background: #e7e7e7;
}
.Default {
color: black;
}
.Default:hover {
background: #e7e7e7;
}
</style>
</head>
<body>
<h1>Text Buttons Example</h1>
<button class="Success">Success</button>
<button class="Info">Info</button>
<button class="Warning">Warning</button>
<button class="Danger">Danger</button>
<button class="Default">Default</button>
</body>
</html>코드 설명
공통 버튼 스타일
button 선택자에는 모든 버튼에 공통으로 적용되는 기본 스타일이 정의되어 있습니다. 테두리를 제거하고(border: none), 패딩과 폰트 크기를 지정하며, cursor: pointer를 통해 마우스 커서가 손가락 모양으로 바뀌도록 설정했습니다. 또한 border-radius: 6px로 모서리를 부드럽게 처리했습니다.
버튼 유형별 색상
각 클래스는 용도에 따라 고유한 텍스트 색상을 가집니다.
- .Success — 성공을 의미하는 초록색(#4caf50)
- .Info — 정보성 안내를 위한 파란색(#2196f3)
- .Warning — 경고를 나타내는 주황색(#ff9800)
- .Danger — 위험·삭제 동작용 빨간색(#f44336)
- .Default — 기본 상태의 검정색
호버(Hover) 효과
모든 버튼은 마우스를 올리면 연회색(#e7e7e7) 배경이 나타나도록 :hover 의사 클래스가 적용되어 있습니다. 이를 통해 사용자가 버튼 위에 있는지 시각적으로 즉시 인식할 수 있습니다.
실행 결과
위 코드를 실행하면 Success, Info, Warning, Danger, Default 다섯 개의 텍스트 버튼이 화면에 표시됩니다. 각 버튼은 지정된 색상의 굵은 텍스트로 렌더링되며, 마우스를 올리면 회색 배경과 함께 호버 효과가 나타납니다.
마무리
이처럼 CSS만으로도 배경 없이 텍스트 중심의 세련된 버튼을 쉽게 만들 수 있습니다. 실무에서는 Material Design의 텍스트 버튼 패턴처럼 이러한 스타일을 확장하여, 색상 변수를 활용하거나 다크 모드 대응, 접근성(명도 대비)까지 고려하면 더욱 완성도 높은 UI를 구현할 수 있습니다.