어떻게 만들지: 수직 버튼 그룹

CSS를 사용하여 수직 '버튼 그룹'을 만들어보세요.

수직 버튼 그룹을 만들어보세요

第一步 - HTML 추가:

<div class="btn-group">
  <button>Apple</button>
  <button>Samsung</button>
  <button>Sony</button>
</div>

第二步 - CSS 추가:

.btn-group button {
  background-color: #04AA6D; /* 녹색 배경 */
  border: 1px solid green; /* 녹색 경계선 */
  color: white; /* 흰색 텍스트 */
  padding: 10px 24px; /* 일부 내간격 */
  cursor: pointer; /* 마우스 포인터/손가락 아이콘 */
  width: 50%; /* 필요하다면 너비 설정 */
  display: block; /* 버튼 쌓기 */
}
.btn-group button:not(:last-child) {
  border-bottom: none; /* 양쪽 프레임 방지 */
}
/* 마우스��착 시 배경색 추가 */
.btn-group button:hover {
  background-color: #3e8e41;
}

직접 테스트해 보세요

관련 페이지

강의:CSS 버튼