웹 페이지에서 아이콘 버튼은 사용자에게 시각적인 단서를 제공하여 인터페이스의 직관성을 크게 높여줍니다. HTML 버튼 요소와 Font Awesome 같은 아이콘 라이브러리를 CSS와 함께 활용하면 세련된 아이콘 버튼을 손쉽게 만들 수 있습니다.
CSS 아이콘 버튼 예제 코드
다음은 CSS를 사용해 아이콘 버튼을 만드는 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<style>
button {
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
background-color: rgb(30, 173, 255);
border: none;
color: white;
padding: 12px 16px;
font-size: 32px;
cursor: pointer;
}
i {
padding: 15px;
color: rgb(33, 0, 109);
}
button:hover {
background-color: rgb(81, 44, 148);
}
button:hover i {
color: white;
}
</style>
</head>
<body>
<h1 style="font-size: 60px; font-family: Arial, Helvetica, sans-serif;">
Icon Buttons Example
</h1>
<button><i class="fa fa-home"></i>Home</button>
<button>
<i class="fa fa-phone-square" aria-hidden="true"></i>Call Us
</button>
<button><i class="fa fa-map-marker" aria-hidden="true"></i>Visit Us</button>
<button><i class="fa fa-cog" aria-hidden="true"></i>Settings</button>
<button><i class="fa fa-user-o" aria-hidden="true"></i>Login</button>
</body>
</html>주요 코드 설명
1. Font Awesome 라이브러리 연결
<head> 태그 안에서 CDN 링크를 통해 Font Awesome 4.7.0 스타일시트를 불러옵니다. 이를 통해 fa fa-home, fa fa-cog 등 다양한 아이콘 클래스를 자유롭게 사용할 수 있습니다.
2. 버튼 기본 스타일링
button 선택자에는 배경색(rgb(30, 173, 255)), 테두리 제거(border: none), 흰색 글자, 적절한 패딩 값 등이 지정되어 있어 깔끔하고 현대적인 버튼 디자인이 완성됩니다. cursor: pointer 속성으로 마우스 커서가 손가락 모양으로 바뀌어 클릭 가능함을 알려줍니다.
3. 아이콘 스타일링
i 태그에 패딩과 진한 남보라색(rgb(33, 0, 109)) 글자색을 지정하여 아이콘이 버튼 안에서 균형 있게 배치되도록 합니다.
4. 호버(Hover) 효과
button:hover 선택자를 사용하면 마우스를 올렸을 때 배경색이 보라색 계열(rgb(81, 44, 148))로 부드럽게 변경되고, 아이콘 색상도 흰색으로 바뀌어 시각적인 피드백을 제공합니다.
실행 결과
위 코드를 브라우저에서 실행하면 홈(Home), 전화(Call Us), 위치(Visit Us), 설정(Settings), 로그인(Login) 아이콘이 포함된 파란색 버튼들이 화면에 나타납니다.
버튼 위에 마우스를 올리면 배경색이 보라색으로 변하고 아이콘 색상이 흰색으로 바뀌는 호버 효과를 확인할 수 있습니다.
마무리
이처럼 CSS와 Font Awesome만 활용해도 별도의 이미지 파일 없이 가볍고 확장성 있는 아이콘 버튼을 만들 수 있습니다. 색상, 패딩, 폰트 크기 등의 값을 조절하여 자신만의 디자인으로 응용해 보세요.