react-zoom-pan-pinch/src/stories/utils/styles.module.css

Zoom and pan html elements in easy way

.controlPanel {
  position: absolute;
  z-index: 2;
  transform: translate(10px, 10px);
  max-width: calc(100% - 20px);
}
.controlBtn {
  padding: 6px 12px;
  background: white;
  border: 1px solid grey;
  border-radius: 5px;
  margin-right: 10px;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
}

.controlBtn:focus {
  filter: brightness(90%);
}

.controlBtn:hover {
  filter: brightness(120%);
}

.controlBtn:active {
  opacity: 0.9;
}

.grid {
  display: grid;
  grid-template-columns: repeat(100, 1fr);
}