CSS Carousel 버튼

개요

CSS Carousel 버튼

<style>
.dot {
  display: inline-block;
  background: none;
  color: inherit;
  border: none;
  padding: 0 !important;
  font: inherit;
}
.dot span {
  display: block;
  width: 10px;
  height: 10px;
  margin: 5px;
  background: #ccc;
  border-radius: 9px;
}
.dot.active span {
  background: #888;
}
</style>

<div class="dots">
  <button class="dot"><span></span></button>
  <button class="dot"><span></span></button>
  <button class="dot active"><span></span></button>
  <button class="dot"><span></span></button>
</div>
</style>

<div class="dots">
  <button class="dot"><span></span></button>
  <button class="dot"><span></span></button>
  <button class="dot active"><span></span></button>
  <button class="dot"><span></span></button>
</div>