[CSS] 동글동글 캐러셀 버튼 만들기

단순 원형 캐러셀 버튼 만들기

HTML 짜고 시작

<div class="carousel-button">
          <button class="before-button"></button>
          <button class="stop-button"></button>
          <button class="next-button"></button>
 </div>

CSS 버튼 동그랗게 적용

/* 캐러셀 버튼 디자인 */
.carousel-button button {
  width: 10px; /* 버튼의 너비 */
  height: 10px; /* 버튼의 높이 */
  border-radius: 50%; /* 원형 모양을 만듭니다 */
  background-color: rgb(0, 0, 0); /* 버튼의 배경색 */
  cursor: pointer; /* 마우스 오버 시 커서 모양 변경 */
  margin: 0 1px; /* 버튼 사이의 간격 */
  border: none; /* 버튼 테두리 제거 */
  opacity: 0.5; /* 버튼 불투명도를 50%로 설정 */
}

.carousel-button button:hover {
  background-color: rgb(0, 0, 0); /* 버튼 호버 시 배경색 변경 */
  opacity: 1; /* 호버 시 버튼 불투명도를 100%로 설정 */
}

호버도 같이 적용

버튼 중앙정렬

/* 캐러셀 버튼 디자인 */
.carousel-button button {
  width: 10px; /* 버튼의 너비 */
  height: 10px; /* 버튼의 높이 */
  border-radius: 50%; /* 원형 모양을 만듭니다 */
  background-color: rgb(0, 0, 0); /* 버튼의 배경색 */
  cursor: pointer; /* 마우스 오버 시 커서 모양 변경 */
  margin: 0 1px; /* 버튼 사이의 간격 */
  border: none; /* 버튼 테두리 제거 */
  opacity: 0.5; /* 버튼 불투명도를 50%로 설정 */
}

.carousel-button button:hover {
  background-color: rgb(0, 0, 0); /* 버튼 호버 시 배경색 변경 */
  opacity: 1; /* 호버 시 버튼 불투명도를 100%로 설정 */
}
/* 버튼 중앙정렬 */
.carousel-button {
  text-align: center;
}

---

사진이 4개라서 4개 완성

 <!-- 캐러셀 위치이동 버튼 -->
        <div class="carousel-button">
          <button class="first-button"></button>
          <button class="second-button"></button>
          <button class="third-button"></button>
          <button class="fourth-button"></button>
        </div>

/* 캐러셀 버튼 디자인 */
.carousel-button button {
  width: 15px; /* 버튼의 너비 */
  height: 15px; /* 버튼의 높이 */
  border-radius: 50%; /* 원형 모양을 만듭니다 */
  background-color: #ffbe01; /* 버튼의 배경색*/
  cursor: pointer; /* 마우스 오버 시 커서 모양 변경 */
  margin: 0 5px; /* 버튼 사이의 간격 */
  border: none; /* 버튼 테두리 제거 */
}

.carousel-button button:hover {
  background-color: #db0009; /* 버튼 호버 시 배경색 변경 */
  opacity: 0.7; /* 호버 시 버튼 불투명도를 100%로 설정 */
}
/* 버튼 중앙정렬 */
.carousel-button {
  text-align: center;
  padding: 10px; /*간격조정*/
}