웹 페이지에서 여러 개의 버튼을 하나로 묶어 표시하고 싶다면 버튼 그룹(Button Group)이 유용합니다. CSS의 inline-block, box-shadow, :hover 같은 기본 속성만 활용해도 별도의 라이브러리 없이 깔끔한 버튼 그룹을 만들 수 있습니다.
핵심 포인트
- display: inline-block; — 컨테이너가 내용 크기에 맞게 줄어들도록 설정합니다.
- font-size: 0; — 버튼 사이에 생기는 불필요한 공백(whitespace)을 제거합니다.
- :not(:last-child) — 마지막 버튼을 제외한 나머지 버튼에만 오른쪽 경계선을 추가해 그룹 느낌을 살립니다.
- :hover — 마우스를 올렸을 때 배경색과 그림자가 변하는 인터랙션 효과를 줍니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<style>
.btnGroup{
display: inline-block;
font-size: 0;
border: 2px solid darkgreen;
box-shadow: 5px 10px 18px rgb(55, 173, 39);
}
button{
float: left;
margin:0px;
border:none;
padding: 15px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
font-size: 20px;
}
button:not(:last-child){
border-right: 2px solid rgb(6, 134, 49);
}
button:hover{
background:rgb(48, 24, 134);
box-shadow: 5px 10px 18px rgb(41, 39, 173);
color:white;
}
</style>
<body>
<h1>Button Group</h1>
<div class="btnGroup">
<button>Facebook</button>
<button>Twitter</button>
<button>LinkedIn</button>
</div>
<h2>Hover over the above button group to see hover effects</h2>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 초록색 테두리와 부드러운 그림자 효과가 적용된 버튼 그룹이 화면에 나타납니다.
버튼 그룹의 특정 버튼 위에 마우스를 올리면(hover) 배경색이 보라색으로 바뀌고 글자색이 흰색으로 전환되며, 그림자 색상도 함께 변경되는 것을 확인할 수 있습니다.
마무리
이처럼 몇 줄의 CSS만으로도 시각적으로 매력적인 버튼 그룹을 완성할 수 있습니다. 색상 값이나 패딩, 그림자 옵션을 조절하면 자신만의 디자인으로 쉽게 응용할 수 있으니 다양하게 변형해 보시기 바랍니다.