如何在 CSS 中为按钮创建缩放效果？

button {
  padding: 10px 25px;
  background: red;
  color: white;
  margin: 50px;
  border: none;
  position: relative;
  outline: none;
}
button:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: black;
  z-index: -1;
}
button:focus:before {
  transform: scale(2);
  transition: all 0.4s linear;
  opacity: 0;
}

<button>Click</button>