아웃라인 버튼은 배경색 없이 테두리와 글자색만으로 디자인된 버튼으로, 모던하고 깔끔한 UI를 만들 때 자주 활용됩니다. CSS의 border 속성과 :hover 가상 클래스를 조합하면, 평소에는 외곽선만 보이다가 마우스를 올리면 배경이 채워지는 인터랙티브한 버튼을 쉽게 구현할 수 있습니다.
예제 코드
다음은 CSS로 아웃라인 버튼의 스타일을 지정하는 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
button {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border: none;
color: white;
font-weight: bolder;
padding: 20px;
font-size: 20px;
cursor: pointer;
border-radius: 6px;
width: 140px;
}
.Success {
border:2px solid #4caf50;
color:#4caf50
}
.Success:hover {
background-color: #46a049;
color:white;
}
.Info {
border:2px solid #2196f3;
color:#2196f3;
}
.Info:hover {
background: #0b7dda;
color:white;
}
.Warning {
border:2px solid #ff9800;
color:#ff9800;
}
.Warning:hover {
background: #e68a00;
color:white;
}
.Danger {
border:2px solid #f44336;
color:#f44336;
}
.Danger:hover {
background: #da190b;
color:white;
}
.Default {
border:2px solid #e7e7e7;
color: black;
}
.Default:hover {
background: #ddd;
}
</style>
</head>
<body>
<h1>알림 버튼 예제</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-radius), 포인터 커서 등 버튼의 기본 형태를 정의합니다. - 아웃라인 스타일: 각 버튼 클래스(Success, Info, Warning, Danger, Default)에서
border: 2px solid 색상코드로 테두리를 만들고, 글자색도 같은 계열의 색으로 지정해 통일감을 줍니다. - 호버 효과:
:hover가상 클래스를 사용해 마우스를 올렸을 때 배경색이 테두리와 같은 계열의 진한 색으로 채워지고, 글자색이 흰색으로 바뀌도록 설정했습니다.
실행 결과
위 코드를 실행하면 초록색(Success), 파란색(Info), 주황색(Warning), 빨간색(Danger), 회색(Default)의 다섯 가지 아웃라인 버튼이 화면에 나타납니다.
버튼에 마우스를 올리면(hover), 아래 이미지와 같이 버튼의 배경색이 외곽선과 동일한 계열의 색으로 채워지면서 강조 효과가 나타납니다.
마무리
이처럼 border와 :hover만 활용하면 별도의 이미지나 JavaScript 없이도 세련된 아웃라인 버튼을 만들 수 있습니다. 색상 코드를 변경하거나 transition 속성을 추가하면 더욱 부드러운 애니메이션 효과도 적용할 수 있으니, 프로젝트에 맞게 응용해 보시기 바랍니다.